@3/13/2023
목적
•
Navbar, footer 등 공통 부분을 레이아웃 파일로 만든 후 본문 내용만 바꿔끼도록 수정
BaseLayout
<!DOCTYPE html>
<html th:fragment="baseLayout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:replace="${title}">레이아웃 타이틀</title>
<!-- 공통 -->
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- Bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<style>
tr {
height: 55px;
}
</style>
</head>
<body>
<!-- NavBar -->
<div class="container col-md-12 mb-4">
...
</div>
<div th:replace="${content}">
레이아웃 본문
</div>
<!-- Footer -->
<footer class="container mt-5 border-top p-3 text-center text-lg-start">
...
</footer>
<!-- 공통 -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
Java
복사
postList.html
•
본문은 section 태그로 감싼 후 layout 파일로 title과 section 태그를 넘겨서 렌더링 후 html을 통째로 replace하는 방식
<!DOCTYPE html>
<html th:replace="~{/baseLayout :: baseLayout(~{::title}, ~{::section})}"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시글 목록</title>
</head>
<body>
<section style="max-width: 800px; margin: auto;">
...
</section>
</body>
</html>
Java
복사