반응형
실제 서비스에서는 여러 화면에 공통 레이아웃(상단, 하단, CSS 등)을
템플릿으로 분리하여 코드 중복을 줄이고, 디자인 일관성을 유지합니다.
Thymeleaf의 레이아웃 기능과 Bootstrap CSS를 활용하면
적은 코드로도 전문적인 게시판 화면을 만들 수 있습니다.
📌 예제 코드
(1) 기본 레이아웃 템플릿 - layout.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<!-- sbb CSS -->
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
<title>게시판</title>
</head>
<body>
<!-- 기본 템플릿 안에 삽입될 내용 시작 -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 종료 -->
</body>
</html>(2) 게시판 리스트 페이지 - question_list.html
<html layout:decorate="~{layout}">
<center layout:fragment="content">
<h1>자유게시판</h1>
<div class="container my-5">
<table class="table">
<thead class="table-dark">
<tr>
<th align="center">번호</th>
<th align="center">제목</th>
<th align="center">작성일자</th>
</tr>
</thead>
<tbody>
<tr th:each="question, loop : ${questionList}">
<td th:text="${loop.count}" align="center"></td>
<td>
<a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
</td>
<td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd')}" align="center"></td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-end">
<a class="btn btn-primary" th:href="@{/question/create}">글작성</a>
</div>
</div>
</center>💬 코드 설명
- layout.html
: 전체 사이트에 적용할 공통 구조(머리글, CSS, 바디 등)를 정의합니다.
<th:block layout:fragment="content"></th:block>는
각 페이지별로 실제 내용이 삽입될 영역입니다. - question_list.html
- layout:decorate="~{layout}"
: 위에서 정의한 레이아웃 템플릿을 상속받습니다. - <center layout:fragment="content">
: 본문 내용이 layout.html의 fragment 영역에 삽입됩니다. - Bootstrap 테이블과 버튼
: 부트스트랩 클래스를 활용해 테이블을 예쁘게 꾸미고,
글작성 버튼도 스타일이 적용됩니다. - th:each="question, loop : ${questionList}"
: questionList를 반복 출력하며, loop.count로 번호를 표시합니다. - #temporals.format(question.createDate, 'yyyy-MM-dd')
: 작성일을 '년-월-일' 형식으로 출력합니다.
- layout:decorate="~{layout}"
💡포인트 정리
- Thymeleaf 레이아웃(템플릿 상속)으로
공통 구조와 디자인을 손쉽게 유지할 수 있다. - Bootstrap을 적용해
별도 CSS 없이도 반응형, 세련된 화면을 만들 수 있다. - fragment와 decorate를 조합하면
각 화면마다 필요한 내용만 추가하면 된다.
📌정리하자면, 공통 레이아웃 분리, 부트스트랩 적용, 리스트 반복 출력까지
실제 서비스에서 자주 쓰이는 화면 구조를
Thymeleaf와 Bootstrap을 이용해 구현했습니다.
이렇게 작업하면,
전체 사이트 디자인과 코드를 일관성 있게 유지할 수 있습니다.
'Spring > 실습 정리' 카테고리의 다른 글
| Spring Boot 18강 - Validation을 활용한 답변 입력 검증과 에러 처리 (0) | 2025.07.07 |
|---|---|
| Spring Boot 17강 - 질문 등록(글쓰기) 기능 구현하기 (1) | 2025.07.03 |
| Spring Boot 16강 - Bootstrap 카드 레이아웃으로 질문 상세/댓글 화면 꾸미기 (0) | 2025.07.03 |
| Spring Boot 14강 - 상세 페이지에서 답변(댓글) 목록 출력하기 (1) | 2025.07.02 |
| Spring Boot 13강 - 답변 등록 로직 구현하기 (1) | 2025.07.02 |
| Spring Boot 12강 - 상세 페이지에서 질문 내용 출력과 답글 작성 폼 만들기 (0) | 2025.07.02 |