[ 목차 ]
1. 게시판 목록 화면
1-1. 게시판 목록 화면의 역할
2. 페이지 기본 제목 구성
2-1. 브라우저 탭 제목 : <title> 태그
2-2. 페이지 내 메인 제목 : <h2> 태그
3. 마무리
1. 게시판 목록 화면
이번 글에서는 CRUD 게시판 중에서 Read(읽기) 기능을 담당하는 게시판 목록 화면을 구현해보겠습니다.
목록 화면은 사용자가 게시판에 접속했을 때 가장 먼저 보게 되는 페이지로,
등록된 게시글들의 제목, 작성자, 작성일 등 기본 정보를 한눈에 확인할 수 있는 페이지라고 보시면 됩니다.
1-2. 게시판 목록 화면의 역할
저희가 구현할 게시판 목록 화면은 다음과 같은 역할을 합니다.
- 데이터베이스에서 게시글 목록을 조회해 사용자에게 보여줍니다.
- 게시글 제목을 클릭하면 해당 게시글의 상세 페이지로 이동합니다.
- 글쓰기 버튼을 통해 사용자가 새 게시글을 작성할 수 있습니다.
- 게시글이 없는 경우에는 "게시글이 없습니다."와 같은 안내 문구를 표시합니다.
※ 이번 실습에서는 간단한 기능 구현에 집중하기 위해, 모든 화면을 복잡한 CSS 없이 간단하게 진행할 예정입니다.
이제 목록의 주요 요소 중 하나인 제목을 어떻게 구성할지 알아보겠습니다.
2. 페이지 기본 제목 구성
웹 페이지는 일반적으로 <head> 영역과 <body> 영역으로 나뉩니다.
이 둘은 HTML 문서의 최상위 요소인 <html> 아래에 위치한다는 공통점이 있지만, 담당하는 역할은 완전히 다릅니다.
<head> 태그는 사용자가 화면에서 볼 수는 없지만, 웹 페이지를 구성할 때 필요한 정보들을 담는 영역입니다.
이 정보 덕분에 브라우저는 페이지를 어떻게 보여줄지 알 수 있고,
검색 사이트는 페이지 내용을 이해해서 검색 결과에 반영할 수 있습니다.
이곳에는 아래와 같은 내용들이 들어갑니다.
- 브라우저 탭에 보이는 제목
- 검색엔진에 노출되는 설명
- 폰트나 스타일 정보
<body> 태그는 사용자가 실제로 화면에서 보게 되는 모든 콘텐츠를 담는 영역입니다.
이곳에는 아래와 같은 내용들이 들어갑니다.
- 텍스트, 이미지
- 버튼
- 표
이해를 돕기 위해 유튜브 영상을 예로 들어보겠습니다.
<head>는 영상의 썸네일, 제목, 설명란과 같은 영상의 메타 정보에 해당하며,
<body>는 사용자가 실제로 시청하는 영상 본편의 내용에 해당합니다.
즉, <head>는 페이지가 어떻게 보여질지를 정하는 설계도이고
<body>는 실제로 사용자가 경험하는 화면 그 자체입니다.
이제 <head> 영역에서 가장 기본적이고 중요한 요소인 <title> 태그에 대해 살펴보겠습니다.
2-1. 브라우저 탭 제목 : <title> 태그
<title> 태그는 JSP 파일을 처음 만들면 기본으로 포함되어 있는 코드입니다.
삭제하더라도 문법적인 오류가 발생하지는 않으나, HTML 표준(W3C)에서는 꼭 포함해야 하는 중요한 요소로 지정되어 있습니다.
브라우저 탭 제목에 표시되며, 검색 결과나 즐겨찾기, 접근성 측면에서 매우 중요한 역할을 합니다.
아래 코드처럼 <title> .. </title> 안에 원하는 제목을 작성하면 됩니다.
%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 목록</title>
</head>이렇게 코드를 작성한 상태로 서버를 실행하면 탭 부분에 입력한 내용이 표시되는 것을 볼 수 있습니다.
💡 webapp 안에 있는 JSP 파일은 단독 실행이 되지 않기 때문에 index.jsp 페이지를 통해 간접적으로 접근해야 합니다.
🔍 이와 관련한 자세한 내용은 아래 글을 참고해주세요.
(2. jsp 파일 생성 : write.jsp / list.jsp / detail.jsp / edit.jsp)
https://silverji.tistory.com/257
[JAVA]8. 게시판 목록 화면 틀 잡기
드디어 본격적으로 게시판 만들기를 들어가겠습니다.방명록 느낌으로 간단한 CRUD 화면을 작업할 예정인데요.Spring 연동 없이 오리지널 Servlet 으로 작업할겁니다.Servlet 의 구조를 파악하면서 기
silverji.tistory.com
그런데 여기서 <title> 태그를 작성하지 않으면 어떻게 될까요?
아래 이미지는 <title> 태그를 제거한 상태로 실행한 결과입니다.
2-2. 페이지 내 메인 제목 : <h2> 태그
웹 브라우저의 탭 제목과는 별개로, 사용자에게 현재 페이지가 어떤 내용인지를 명확하게 알려주는 역할을 하는 것이 바로 메인 제목입니다.
HTML에서는 이를 위해 <h1> ~ <h6> 까지의 제목 태그를 제공하는데, 일반적으로 본문 내 주요 제목은 <h2>를 사용합니다.
아래는 <h2> 태그를 사용해서 게시판 목록 페이지의 메인 제목을 작성한 코드입니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 목록</title>
</head>
<body>
<h2 style="text-align:center;">게시판</h2>
</body>
</html>
이 상태로 실행하면 페이지의 가장 상단에 "게시판" 이라는 제목이 보입니다.
🔍 style="text-align:center;" 는 텍스트를 가운데로 정렬해주는 CSS 스타일 속성입니다.
3. 마무리
이처럼 이번 글에서는 HTML의 기본 구조와 메인 제목 작성 방법까지 함께 살펴보았습니다.
✅ 다음 글에서는 JSTL의 <c:forEach> 태그를 사용해서 게시글 목록을 반복 출력하는 방법을 알아보겠습니다.
수고하셨습니다.
📌 참고
3. JSP 화면 띄우기 : index.jsp
https://silverji.tistory.com/250
[JAVA]2. Eclipse 톰캣 연동과 JSP 화면 띄우기
이번엔 이클립스에 서버를 연동해서, 최종적으로는 JSP 화면을 띄워볼겁니다.1. 톰캣 설치 및 설정2. 이클립스 연동3. JSP 화면 띄우기 1. 톰캣 설치 및 설정1-1. 톰캣 다운로드1-2. 톰캣 설치와 설정1-
silverji.tistory.com
2. jsp 파일 생성 : write.jsp / list.jsp / detail.jsp / edit.jsp
https://silverji.tistory.com/257
[JAVA]8. 게시판 목록 화면 틀 잡기
드디어 본격적으로 게시판 만들기를 들어가겠습니다.방명록 느낌으로 간단한 CRUD 화면을 작업할 예정인데요.Spring 연동 없이 오리지널 Servlet 으로 작업할겁니다.Servlet 의 구조를 파악하면서 기
silverji.tistory.com
'개발 실습 > CRUD 게시판 만들기' 카테고리의 다른 글
| [JAVA]13. 게시판 작성 화면 구현 : 테이블 구조 수정 (34) | 2025.08.16 |
|---|---|
| [JAVA]12. 게시판 목록 화면 구현 : 테이블과 forEach를 활용한 게시글 출력 (22) | 2025.08.10 |
| [JAVA]10. MySQL Workbench를 활용한 ERD 기반 테이블 설계 (26) | 2025.07.11 |
| [JAVA]9. MySQL Workbench 설치 및 DB 연동 (16) | 2025.07.03 |
| [JAVA]8. 게시판 목록 화면 틀 잡기 (18) | 2025.06.27 |
