Spring/Spring Boot

[spring Boot] Thymeleaf 페이지 레이아웃

읽히는 블로그 2024. 8. 6. 12:34

▤ 목차

     

     

     

    ✔ Thymeleaf Layout Dialect dependency 추가 ***

    ⌨ build.gradle > dependencies 설정

    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

     

    반드시 넣어줘야한다. dependency를 추가하고 나면 프로젝트를 refresh 해줘야한다.

     

     

    👻 Refresh Gradle Project

     

     

    해당 파일 우클릭 > gradle > Refresh Gradle Project 을 눌러 프로젝트를 리플레쉬해준다.

     

     

     

     

    ✔컨트롤러 작성

    ✨ 형식

    
@Controller
@RequestMapping(value="thleaf")
public class TestController {
	@GetMapping("/ex5")
	public String method5() {
		return "show5";
	}
}

     

    👏 중요

    spring 에서 해당 컨트롤러를 빈으로 등록하고 Controller(component)로 인지하고 viewResorve가 해당 파일명.html을 resources/templates에서 찾는다.

     

    즉, resources/templates 하위에 show5.html 파일을 만들어준다.!

     

     

     

     

    ✔ header, footer 만들기

    🔹header

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<div th:fragment="header">
		머리글!!!
	</div>
</html>

    🔹footer

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<div th:fragment="footer">
		footer영역!
	</div>
</html>

     

     

     

    ✔ layout 파일 만들기

    🔸 이미지

     

    이런 식으로 들어가는 것이다. 

     

    💻 코드로 보기

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>😉🧐😉</title>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
	<!-- th:block 마땅한 태그가 없는 경우 사용할 수 있다. -->
	<th:block th:replace="fragments/header::header"></th:block>
    <div layout:fragment="content" class="content"></div>
    <th:block th:replace="fragments/footer::footer"></th:block>
</body>
</html>

     

     

     

     

     

    ✔ view 파일

    🔷 layout : decorate

    🔹 코드로 보기

    <!DOCTYPE html>
<html xmlns:th="http//www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layouts/layout1}">
<head>
<meta charset="UTF-8">
<title>(❁´◡`❁)</title>
</head>
<body>
	<h2>show5 문서(레이아웃 결과)</h2>
	<div layout:fragment="content">
		<table border="1">
			<tr>
				<th>번호</th><th>종류</th>
			</tr>
			<tr>
				<td>1</td><td>짱구</td>
			</tr>
			<tr>
				<td>2</td><td>유리</td>
			</tr>
			<tr>
				<td>3</td><td>철수</td>
			</tr>
		</table>
	</div>
</body>
</html>

    👏 중요

    layout으로 묶인 부분만 들어간다.

    즉, 위의 코드의 h2 태그는 layout에 포함되지 않기에 들어가지 않는다.

     

     

    😊결과