1) Gradle 의존성 추가하기
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
2) templates 폴더에 layout 폴더 만들고, 안에 layout.html 파일 생성
3) layout.html의 <html> 태그에 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns="http://www.w3.org/1999/html" 추가하기
4) layout.html 파일의 body에 아래와 같이 추가
<div th:replace="~{fragments/header :: header}"></div>
<div layout:fragment="content"></div>5) templates 폴더에 fragments 폴더를 만들고, 안에 header.html을 생성
6) header.html의 내용은 다음과 같다.
<div th:fragment="header">
<div class="my_header">
asdasd
</div>
</div>
th:fragment="header"가 핵심. 이걸 통해 layout.html에 연결된다.
7) layout.html의 layout:fragment="content"에 들어 갈 페이지를 작성하자. templates 폴더에 자유롭게 html 파일 생성하고 내용은 다음과 같다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/layout}">
<head>
<!--css,JS 추가영역-->
</head>
<div layout:fragment="content">
</div>
</html><html> 안의 xmlns:layout, decoration을 통해 레이아웃 페이지를 불러와 이 파일에 꾸며준다는걸 명시해주고, layout:fragment="countent" 안에 필요한 내용을 작성하자.
css나 js는 <head>안에 넣으면 된다.
'Spring boot' 카테고리의 다른 글
| tailwindcss 3버전에 flowbite 추가 하기 (0) | 2026.01.06 |
|---|---|
| Lombok 적용 (0) | 2026.01.05 |
| Spring boot + WebClient 적용 오류 (0) | 2025.12.17 |
| Spring boot + thymeleaf + tailwind css (0) | 2025.12.11 |
| gradle (0) | 2025.12.05 |