![[Thymeleaf] fragment, layout 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdA2YLI%2FbtsjZyXNLtg%2FAAAAAAAAAAAAAAAAAAAAAOuRqY6rRiQ_R-DudOKSgEud3F8GRLw6vU1Cuaj6Hpis%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DVBe%252FSRtl4ziUBZpNf3RIcU184bs%253D)
Thymeleaf 에서 지원해주는
fragment(조각) 과 layout(영역) 을 쉽게 정리해서 붙여넣는 방법을 정리해본 것이다
headerFrag.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="main-head">
<!--Common Head-->
<meta charset="UTF-8">
<!--모바일 환경 meta 태그-->
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no,initial-scale=1"/>
<!--모든 IE 버전중 가장 최신 표준 모드 Edge 로 보여주겠다-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--Common links-->
<link rel="stylesheet" th:href="@{/css/default.css}" />
<link rel="stylesheet" th:href="@{/css/common.css}" />
<!--Common scripts-->
<script defer th:src="@{/js/function.js}"></script>
<script defer th:src="@{/js/jquery-3.6.0.min.js}"></script>
<script defer th:src="@{/js/common.js}"></script>
</head>
</html>
footerFrag.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="main-footer">
copyright
</footer>
</html>
base.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!-- 모든 <block> 과 <head> , <body> 등 사용할 태그들은 기본이 될 layout 에서 존재하여야 -->
<!-- 실제 사용할 페이지(content.html)에서 내용이 layout 으로 추가된다. -->
<!-- 태그가 존재하지 않으면 content 페이지의 태그 내용이 증발한다-->
<th:block th:replace="fragments/headerFrag :: main-head"></th:block>
<!-- 태그의 위치도 위냐 아래냐에 따라서 head 태그안에 추가될 때 순서대로 추가된다.-->
<head>
<!-- layout 페이지에 <head>태그가 존재하지 않으면 content 페이지의 <head> 내용이 증발한다 -->
<!-- 렌더링시 content의 title 태그에 의해 덮어씌워짐 -->
<title>Default Layout Title</title>
</head>
<body>
<div id="container">
<!--/* 가운데 정렬 영역 */-->
<div class="center">
<!--/* 페이지별 컨텐츠 */-->
<th:block layout:fragment="content"></th:block>
</div>
</div> <!--/* // #container */-->
<th:block th:replace="fragments/footerFrag :: main-footer"></th:block> <!-- 푸터 -->
</body>
<!-- 추가되는 script 역시 layout 에서 fragment 가 존재하여야 실제페이지에 쓰일때 내용이 들어온다.-->
<th:block layout:fragment="javascript"></th:block>
</html>
content.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/base}">
<head>
<!-- base.html 에서의 head 영역을 따라가서
headerFrag.html 안에 들어간다.-->
<!--main-head 부분의 title 과 대체-->
<title>Photo Box - View</title>
<link rel="stylesheet" th:href="@{/css/content.css}" />
<link rel="stylesheet" th:href="@{/css/button.css}" />
<script defer src="https://kit.fontawesome.com/79613ae794.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
</head>
<!-- main-body 부분의 content 와 대체-->
<th:block layout:fragment="content">
<div class="content">
<section>
<p class="img_center">
<!--사진 이미지-->
<img src="/my_picture/booth_horizontal_box.png" alt="my_img">
</p>
<p class="img_center">
<!--/* 다운로드 버튼 */-->
<img src="/photoimages/photobooth/booth_down_bt.png" class="photobooth_down_image_btn" alt="down_bnt_img">
</p>
</section>
</div> <!--/* .content */-->
</th:block>
<th:block layout:fragment="javascript">
<script th:inline="javascript">
console.log("script part");
</script>
</th:block>
</html>
추가내용 1.
사용할 태그는 반드시 layout 에 존재해야한다. 무슨말이냐면.
content.html 의 body 제일 아래부분 script 태그 1, 2
렌더링 결과 화면
추가내용 2
공통으로 사용될 layout 에 태그 순서에 따라 추가되는 위치도 바뀐다.
위치에 따라 바뀌므로 먼저 읽혀야할 부분은 미리 layout 에서 순서를 정해두고 배치 해놓아야 한다.