[ 목차 ]
1. 글쓰기 화면 (write.jsp)
1-1. 글쓰기 화면의 역할
1-2. 글쓰기 화면에서 작성할 내용
2. 화면 영역 나누기 : <div> 태그
2-1. <div> 태그란?
2-2. 코드 예시
2-3. 적용된 화면
3. 마무리
1. 글쓰기 화면
이전 글에서는 게시판 목록 화면을 구현해보았습니다.
이번 글에서는 사용자가 직접 글을 작성할 수 있는 글쓰기 화면을 만들어보겠습니다.
이 화면은 게시판의 핵심 기능으로, 글을 작성하고 등록하는 과정이 이루어지는 곳입니다.
1-1. 글쓰기 화면의 역할
글쓰기 화면은 게시판에서 새로운 글을 시작하는 출발점입니다.
여기서 필요한 내용들을 입력하면서 글을 등록할 준비를 하게 됩니다.
완성된 글은 이후 목록 화면에서 확인할 수 있으며, 필요하다면 수정하거나 삭제할 수도 있습니다.
💡 글쓰기 화면과 수정하는 화면은 따로 만드는 것이 좋습니다. 다만, 상황에 따라 하나의 화면을 공용으로 사용할 수도 있습니다.
1-2. 글쓰기 화면에서 작성할 내용
제가 작업할 게시판 글쓰기 화면에 들어가는 내용을 간단히 분류하면 다음과 같습니다.
- 작성자 : 글을 쓴 사람의 이름을 적는 곳
- 비밀번호 : 로그인 기능이 없기에, 글을 수정하거나 삭제할 때 본인임을 확인하기 위한 번호
- 제목 : 글의 제목
- 내용 : 글의 본문
- 조회수 : 글이 조회된 횟수
- 작성일자 : 글을 작성한 일자
- 수정일자 : 글을 수정한 일자
이 중에서 조회수, 작성일자, 수정일자는 사용자가 직접 입력하는 것이 아니라 시스템을 통해 자동으로 관리할 값입니다.
따라서 글쓰기 화면에서는 작성자, 비밀번호, 제목, 내용 네 가지를 입력하는 칸만 구성할 것입니다.
아래는 최종적으로 완성된 write.jsp 의 전체 코드입니다.
이후에는 코드 안에 사용된 태그들을 하나씩 차례대로 살펴보겠습니다.
<%@ 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>
<div class="container">
<h2 style="text-align: center;">글쓰기</h2>
<form action="${pageContext.request.contextPath}/visit/write" method="post">
<div class="board_group">
<label for="userNm">작성자</label>
<input type="text" name="userNm" id="userNm" required>
</div>
<div class="board_group">
<label for="userPw">비밀번호</label>
<input type="text" name="userPw" id="userPw" required>
</div>
<div class="board_group">
<label for="title">제목</label>
<input type="text" name="title" id="title" required>
</div>
<div class="board_group">
<label for="content">내용</label>
<textarea name="content" id="content" rows="30" required></textarea>
</div>
<div class="board_actions" style="margin-top: 20px;">
<button type="submit" class="btn btn-submit">등록</button>
<a class="btn btn-cancel" href="${pageContext.request.contextPath}/visit/list">취소</a>
</div>
</form>
</div>
</body>
</html>
2. 화면 영역 나누기 : <div> 태그
2-1. <div> 태그란?
<div> 태그는 화면에서 관련된 요소들을 하나로 묶는 역할을 합니다.
글쓰기 화면에서는 작성자를 입력하는 영역, 제목을 입력하는 영역 등으로 화면에서 각 부분을 나누기 위해 사용할 수 있습니다.
2-2. 코드 예시
예를 들어, 작성자 이름을 입력하는 칸은 다음과 같이 <div> 태그로 감싸서 하나의 영역으로 나눌 수 있습니다.
<div class="board_group">
<label for="userNm">작성자</label>
<input type="text" name="userNm" id="userNm" required>
</div>
<div> 태그 안에는 <label>, <input>, <textarea> 등과 같은 다양한 태그들이 함께 들어갈 수 있습니다.
이렇게 영역을 구분해서 묶어주면 화면 구성이 더 명확해지고, 유지보수하기도 수월해집니다.
2-3. 적용된 화면
아래 코드를 실행하면 글쓰기 화면에서 각각의 입력 영역이 <div> 태그로 구분되어 표시됩니다.
<%@ 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>
<div class="container">
<h2 style="text-align: center;">글쓰기</h2>
<div class="board_group">
<label for="userNm">작성자</label>
<input type="text" name="userNm" id="userNm" required>
</div>
<div class="board_group">
<label for="userPw">비밀번호</label>
<input type="text" name="userPw" id="userPw" required>
</div>
<div class="board_group">
<label for="title">제목</label>
<input type="text" name="title" id="title" required>
</div>
<div class="board_group">
<label for="content">내용</label>
<textarea name="content" id="content" rows="30" required></textarea>
</div>
</div>
</body>
</html>
3. 마무리
오늘은 글쓰기 화면에서 영역을 나누느 <div> 태그를 살펴보았습니다.
각 입력 칸을 <div>로 묶어서 화면의 구성을 명확하게 하는 것이 핵심입니다.
다음 글에서는 <form> 태그를 중심으로 글 입력 폼 구성과 전송 방법을 자세히 다뤄보겠습니다.
수고하셨습니다.
감사합니다.
'개발 실습 > CRUD 게시판 만들기' 카테고리의 다른 글
| 16. 게시판 상세보기 화면 구현 : 버튼, 삭제, 필수입력(required), 강조(strong) 활용 (8) | 2025.10.18 |
|---|---|
| [JAVA]15. 게시판 작성 화면 구현 : JSP 입력 폼(form) 구성 (28) | 2025.08.30 |
| [JAVA]13. 게시판 작성 화면 구현 : 테이블 구조 수정 (34) | 2025.08.16 |
| [JAVA]12. 게시판 목록 화면 구현 : 테이블과 forEach를 활용한 게시글 출력 (22) | 2025.08.10 |
| [JAVA]11. 게시판 목록 화면 구현 : 제목 태그(title, h2) (28) | 2025.08.03 |
