목차
1. 상세보기 화면(detail.jsp) 구성 소개
2. 중요 정보 강조 : <strong> 태그 활용
2-1. <strong> 태그란?
2-2. 코드 예시
3. ${ } 표현식
3-1. ${ } 표현식이란?
3-2. ${ } 표현식의 주요 기능
3-3. 코드 예시
4. 삭제 버튼 구현 : onclick 이벤트 활용
4-1. onclick 이벤트란?
4-2. 코드 예시
5. 그 외의 요소들
6. 최종 코드 정리
1. 상세보기 화면(detail.jsp) 구성 소개
상세보기 화면은 게시글의 상세 내용을 확인할 수 있는 화면입니다.
전체적인 화면 구조는 다음과 같이 구성되어 있습니다.
- 상단 : 게시글 제목, 작성자, 작성일 등 기본 정보 표시
- 본문 영역 : 게시글 내용 출력
- 하단 버튼 영역 : 수정, 삭제 버튼, 목록 화면 이동 등의 기능 제공
이 글에서는 위 구조에 맞춰 순차적으로 화면 요소와 기능을 살펴보겠습니다.
2. 중요 정보 강조 : <strong> 태그 사용
2-1. <strong> 태그란?
<strong> 태그는 화면에서 중요한 정보를 강조할 때 사용합니다.
주로 게시글 작성자, 제목 등 핵심 정보를 강조해서 사용자의 가독성을 높이기 위해 사용합니다.
2-2. 코드 예시
<div class="info">
<p><strong>작성자 : </strong> ${post.userNm}</p>
<p><strong>작성일 : </strong> ${post.regDt}</p>
<p><strong>조회수 : </strong> ${post.viewCnt}</p>
</div>
이렇게 하면 아래와 같이 굵은 색으로 텍스트가 표시됩니다.
3. ${ } 표현식
3-1. ${ } 표현식이란?
${ } 표현식은 JSP에서 서버로부터 전달받은 파라미터나 데이터를 화면에 출력하거나
EL(Expression Language) 기능을 활용해서 값을 참조할 때 사용합니다.
이 표현식을 활용하면 다양한 데이터를 JSP 화면에서 간편하게 표시할 수 있습니다.
3-2. ${ } 표현식의 주요 기능
1. 변수 출력
서버에서 전달된 객체나 값을 화면에 표시할 수 있습니다.
<p>작성자: ${post.userNm}</p>
<p>제목: ${post.title}</p>
2. 속성 가져오기 / 값에 접근하기
JavaBean, Map, request / session / application 속성 등에서 값을 가져올 수 있습니다.
3. 값 설정 / 기본값 지정
EL 자체로 직접 변수를 선언하거나 수정할 수는 없지만, <c:set>태그와 함께 사용하면 값을 설정할 수 있습니다.
<c:set var="author" value="${post.userNm}" />
<p>작성자: ${author}</p>
4. 간단한 연산 및 조건 처리
${ } 안에서 기본적인 연산이나 null 체크, 기본값 지정 등이 가능합니다.
<p>조회수: ${board.viewCount + 1}</p>
<p>작성자: ${post.userNm != null ? post.userNm : '익명'}</p>
4. 삭제 버튼 구현 : onclick 이벤트 활용
4-1. onclick 이벤트란?
onclick 이벤트는 버튼 클릭 시 사용자 액션을 처리할 수 있도록 하는 HTML 속성입니다.
삭제 버튼에 적용하면, 버튼 클릭 시에 확인용 메시지를 보여주며 실수를 방지할 수 있습니다.
4-2. 코드 예시
<div class="buttons">
<button type="submit" name="action" value="delete" onclick="return confirm('정말 삭제하시겠습니까?');">삭제</button>
</div>
이렇게 하면 삭제 버튼을 눌렀을 때 어래와 같이 팝업이 뜨면서 정말로 삭제할 것인지를 다시 한번 확인합니다.
5. 그 외의 요소들
이 글에서 설명하지 않은 요소들은 이전 게시글에 나와 있으니, 참고 부탁드립니다.
태그 (form / label / input / textarea)
[개발 실습/CRUD 게시판 만들기] - [JAVA]15. 게시판 작성 화면 구현 : JSP 입력 폼(form) 구성
[JAVA]15. 게시판 작성 화면 구현 : JSP 입력 폼(form) 구성
[목차]1. JSP 입력 폼(form) 구성 소개2. 글 입력 및 전송 영역 : 태그 2-1. 태그란? 2-2. 기본 코드 형식3. 태그 3-1. 태그란? 3-2. 코드 예시4. 태그 4-1. 태그란? 4-2. 코드 예시5. 태그 5-1. 태그란? 5-2. 코드 예
silverji.tistory.com
<div> 태그
[개발 실습/CRUD 게시판 만들기] - [JAVA]14. 게시판 작성 화면 구현 : 영역 나누기(div)
[JAVA]14. 게시판 작성 화면 구현 : 영역 나누기(div)
[ 목차 ]1. 글쓰기 화면 (write.jsp) 1-1. 글쓰기 화면의 역할 1-2. 글쓰기 화면에서 작성할 내용2. 화면 영역 나누기 : 태그 2-1. 태그란? 2-2. 코드 예시 2-3. 적용된 화면3. 마무리 1. 글쓰기 화면이전 글에
silverji.tistory.com
태그 (thead, tbodt, forEach, c:if)
[개발 실습/CRUD 게시판 만들기] - [JAVA]12. 게시판 목록 화면 구현 : 테이블과 forEach를 활용한 게시글 출력
[JAVA]12. 게시판 목록 화면 구현 : 테이블과 forEach를 활용한 게시글 출력
[ 목차 ]1. 게시판 목록 화면 1-1. 게시판 목록을 표로 구성하는 이유2. 게시판 표 기본 구성 2-1. 표 제목 만들기 : 태그 2-2. 게시글 데이터의 반복 출력 : + forEach3. 게시글이 없을 때 표시하기 3-1. 빈
silverji.tistory.com
태그 (title, h2)
[개발 실습/CRUD 게시판 만들기] - [JAVA]11. 게시판 목록 화면 구현 : 제목 태그(title, h2)
[JAVA]11. 게시판 목록 화면 구현 : 제목 태그(title, h2)
[ 목차 ]1. 게시판 목록 화면 1-1. 게시판 목록 화면의 역할2. 페이지 기본 제목 구성 2-1. 브라우저 탭 제목 : 태그 2-2. 페이지 내 메인 제목 : 태그3. 마무리 1. 게시판 목록 화면이번 글에서는 CRUD 게
silverji.tistory.com
6. 최종 코드 정리
지금까진 배운 내용들을 모두 합쳐 게시판 상세 화면의 최종 코드인 detail.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>
<style>
.container { width: 70%; margin: auto; }
.info { margin-bottom: 10px; }
.buttons { text-align: right; margin-top: 20px; }
textarea { width: 100%; height: 200px; resize: none; }
</style>
</head>
<body>
<div class="container">
<h2>${post.title}</h2>
<form method="post" action="${pageContext.request.contextPath}/visit/detail">
<input type="hidden" name="postId" value="${post.postId}" />
<div class="info">
<p><strong>작성자 : </strong> ${post.userNm}</p>
<p><strong>작성일 : </strong> ${post.regDt}</p>
<p><strong>조회수 : </strong> ${post.viewCnt}</p>
<p><strong>제목 : </strong> <input type="text" name="title" value="${post.title}" />
</div>
<div class="content">
<textarea name="content">${post.content}</textarea>
</div>
<div class="pw-check" style="margin-top: 10px;">
<label for="userPw">비밀번호:</label>
<input type="password" id="userPw" name="userPw" required />
</div>
<div class="buttons">
<button type="submit" name="action" value="edit">수정</button>
<button type="submit" name="action" value="delete" onclick="return confirm('정말 삭제하시겠습니까?');">삭제</button>
<a href="${pageContext.request.contextPath}/visit/list">목록으로</a>
</div>
</form>
</div>
</body>
</html>
'개발 실습 > CRUD 게시판 만들기' 카테고리의 다른 글
| 18. 게시판 백엔드 기초 : board-mapper.xml로 매핑 구조 이해하기 (7) | 2025.11.01 |
|---|---|
| 17. 게시판 백엔드 기초 : BoardVo.java로 데이터 객체 이해하기 (12) | 2025.10.25 |
| [JAVA]15. 게시판 작성 화면 구현 : JSP 입력 폼(form) 구성 (28) | 2025.08.30 |
| [JAVA]14. 게시판 작성 화면 구현 : 영역 나누기(div) (20) | 2025.08.24 |
| [JAVA]13. 게시판 작성 화면 구현 : 테이블 구조 수정 (34) | 2025.08.16 |