[Thymeleaf] 4. Thymeleaf 템플릿 만들기

WEB/기타

[Thymeleaf] 4. Thymeleaf 템플릿 만들기

silverline79 2024. 1. 19. 22:03

4. Thymeleaf 템플릿 만들기

[ https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#template-layout ]

◆ 템플릿 파일 위치 ( 확장자 : HTML )

[ 경로 ] src/main/resources/templates

※ src/main/resources( 기본 설정 ) ,

/templates ( application.yml 선언 prefix: classpath:/templates/ )

◆ 타임리프 파일 선언

레이아웃이 되는 파일 선언

레이아웃 안에 들어가는 조각(fragment) 선언

만들어진 레이아웃을 사용하는 파일 선언

◆ 레이아웃 생성 순서

1. head, header, footer 영역 include 파일 만들기 (참조 : 레이아웃 생성 예시1)

2. 레이아웃 틀 만들기(레이아웃 틀에 1번을 include) (참조 : 레이아웃 생성 예시2)

3. 2번의 만들어진 레이아웃 틀을 컨텐츠 페이지에 적용시키기

※ 1,2 번의 생성 순서는 변경되어도 상관 없음.

◆ 레이아웃 만들기 예시

레이아웃 생성 예시1. <footer.html> 하단에서 공통으로 사용할 코드를 작성한 레이아웃

★ th:fragment 옵션으로 아래 코드의 Fragment의 이름을 선언해주고 공통 레이아웃에서 해당 Fragment명을 호출하여 해당 코드를 불러와 사용
★ layout.html에서 th:replace="fragments/footer :: footerFragment"가 footer.html의 파일 경로, Fragment명을 호출하여 레이아웃을 구성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="footerFragment">
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © song gunho 2019</span>
</div>
</div>
</footer>
</th:block>
</html>

레이아웃 생성 예시2. <layout.html> 레이아웃의 전체적인 틀을 작성한 코드

상단에 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"으로 해당 파일이 레이아웃임을 선언
th:replace 각 레이아웃의 코드를 불러오는 소스 작성
layout:fragment 페이지 컨텐츠 바뀔 부분

★ th:replace="fragments/head :: headFragment" : include 부분
★ layout:fragment="content" : 페이지의 컨텐츠 출력부(내용이 바뀌는 유동적인 content 영역)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<th:block th:replace="fragments/head :: headFragment"></th:block>
<body id="page-top">
<div id="wrapper">

<th:block th:replace="fragments/sidebar :: sidebarFragment"></th:block>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">

<th:block th:replace="fragments/topbar :: topbarFragment"></th:block>

<th:block layout:fragment="content"></th:block>
</div>

<th:block th:replace="fragments/footer :: footerFragment"></th:block>
</div>
</div>

<th:block th:replace="fragments/script :: scriptFragment"></th:block>
</body>
</html>

◇ th:insert와 th:replace(과 th:include)의 차이점 ※ th:include, 3.0부터 권장하지 않음

th:replace	th:insert
th:replace는 태그 전체를 교체	th:insert는 해당 태그 내부에 fragment를 삽입
// index.html <head th:replace="fragments.html :: head"></head>	// index.html <div th:insert="fragments.html :: content"> </div>
head 태그 자체가 fragments.html의 head로 바뀜	div 태그 내부에 fragments.html의 content가 삽입
// fragments.html <head th:fragment="head"> <meta charset="UTF-8"> <title>StudyOlle </title> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"/> <style> .container { max-width: 100%; } </style> </head>
★ th:replace / th:insert 구분 없이 사용하려면 th:block 로 선언 → head나 div에 선언시에는 해당 태그가 포함됨 ex) <th:block th:insert="fragments.html :: content"></th:block>

◆ 만든 레이아웃 사용 예시

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="layout/layout">
<th:block layout:fragment="content">

<div class="container">...</div>
</th:block>
</html>

★ layout:decorate : 사용할 레이아웃 경로 및 명칭 선언
★ 고정적인 head, header, footer 영역은 [ layout.html ] 에서 작성한 레이아웃 출력됨.
★ layout:fragment="content" : 페이지의 컨텐츠 출력부

웹 문서 제목 출력하기(title)
레이아웃 문서	<title> <th:block layout:fragment="f-title">문서제목</th:block> </title>
레이아웃 문서 사용하는 문서	<th:block layout:fragment="f-title">문서제목</th:block>
★ 레이아웃 문서에 선언하고 해당 레이아웃을 사용하는 문서에는 선언하지 않을 경우 레이아웃에 선언된 타이틀이 기본으로 출력됨