Spring Boot 04 템플릿 페이지

Kang.__.Mingu·2024년 10월 7일

Spring Boot

목록 보기

4/8

템플릿 페이지 라이브러리

thymeleaf-layout-dialect
Tiles 라이브러리처럼 Spring Boot에서 사용할 수 있게 하는 라이브러리
build.gradle에 implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' 추가

layout.html

fragment 속성

다른 HTML 문서에 태그를 제공하기 위한 Thymeleaf 속성
속성값으로 태그를 구분하기 위한 식별자를 속성값으로 설정

<title>BOOT</title>
<style th:fragment="styles">
div {
	margin: 10px;
}

#header {
	height: 150px;
	border: 1px solid red;
	text-align: center;
}

#content {
	min-height: 600px;
	border: 1px solid green;
	text-align: center;
}

#footer {
	height: 150px;
	border: 1px solid blue;
	text-align: center;
}	
</style>
</head>
<body>
	<!-- fragment 속성 : 다른 HTML 문서에 태그를 제공하기 위한 Thymeleaf 속성 -->
	<!-- => 속성값으로 태그를 구분하기 위한 식별자를 속성값으로 설정 -->
	<div id="header" th:fragment="header">
		<h2>페이지 머릿부</h2>
	</div>	
	
	<div id="footer" th:fragment="footer">
		<h2>페이지 꼬릿부</h2>
	</div>	
</body>
</html>

style, header, footer 다 다른 HTML 문서에 태그를 제공함

fragment.html

replace 속성

fragment 속성으로 설정된 태그를 제공받아 태그를 변경하는 Thymeleaf 속성
~{HTML 문서 경로 :: Fragment 식별자} 형식으로 속성값을 설정해 태그를 제공받아 사용
insert 속성 또는 include 속성으로 fragment 속성으로 설정된 태그를 제공받아 사용 가능

insert 속성

fragment 속성으로 설정된 태그를 제공받아 태그의 하위태그로 변경하는 Thymeleaf 속성

include 속성

fragment 속성으로 설정된 태그를 제공받아 태그의 하위태그로 포함하는 Thymeleaf 속성

<title>BOOT</title>
<style type="text/css" th:replace="~{/layout :: styles}"></style>
</head>
<body>
  <div th:insert="~{/layout :: header}"></div> 
	<div id="content">
		<h2>페이지 몸체부</h2>
	</div>
  <div th:replace="~{/layout :: footer}"></div> 
</body>
</html>

layout.html에서 fragment 속성으로 설정해준 식별자를 가지고 설정된 값을 가져와서 사용할 수 있다.

template.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>BOOT</title>
<style type="text/css" th:replace="~{/layout :: styles}"></style>
</head>
<body>
	<div id="header" th:replace="~{/layout :: header}"></div>

	<!-- content 이름의 태그를 포함되도록 설정 -->
	<div id="content" layout:fragment="content"></div>

	<div id="footer" th:replace="~{/layout :: footer}"></div>
</body>
</html>

layout.html 페이지에 있는 fragment로 설정된 식별자를 가져와서 적용.

content1.html

decorate 속성

응답 처리될 템플릿 페이지의 HTML 문서의 파일을 설정

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
	layout:decorate="~{template}">
<head>
<meta charset="UTF-8">
<title>BOOT</title>
</head>
<body>
	<div id="content" layout:fragment="content">
		<h2>첫번째 요청 페이지</h2>	
	</div>
</body>
</html>

content2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{template}">
<head>
<meta charset="UTF-8">
<title>BOOT</title>
</head>
<body>
	<div id="content" layout:fragment="content">
		<h2>두번째 요청 페이지</h2>	
	</div>
</body>
</html>