728x90
보통 웹사이트를 만드려면 header , footer, menu 등 공통적인 페이지 구성 요소들이 있다.
이런 공통 요소들을 모든 html 에 넣는다면 수정 시 전부다 찾아서 바꿔줘야 한다.
이러한 문제점을 해결하기 위해 페이지 레이아웃을 이용하여 공통 요소 관리를 쉽게 할 수 있다.
의존성 추가하기 - gradle
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
예제를 위한 파일 생성
footer.html 와 header.html 에 th:fragment 를 이용하여 선언해준다.
footer.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="footer">
footer 영역입니다.
</div>
</html>
header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="header">
header 영역입니다.
</div>
</html>
layout1.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
<th:block layout:fragment="script"></th:block>
<th:block layout:fragment="css"></th:block>
</head>
<body>
<!-- fragments 폴더 아래의 header.html 파일의 th:fragment=header 영역을 가지고 온다 -->
<div th:replace="fragments/header::header"></div>
<!-- layout 에서 변경되는 영역을 fragment 로 설정 -->
<div layout:fragment="content">
</div>
<!-- fragments 폴더 아래의 footer.html 파일의 th:fragment=footer 영역을 가지고 온다 -->
<div th:replace="fragments/footer::footer"></div>
</body>
</html>
thymeleafEx07.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout1}">
<!-- layouts 폴더 아래에 있는 layout1.html 을 적용하기 위해서 네임스페이스 추가 -->
<!-- layout1.html 파일의 layout:fragment="content" 영역에 들어간다. -->
<div layout:fragment="content">
본문 영역입니다!
</div>
</html>
출력 시
728x90
'Spring > Thymeleaf' 카테고리의 다른 글
| th:href 예제 (0) | 2022.09.13 |
|---|---|
| th:switch & th:case 예제 (0) | 2022.09.13 |
| th:if & th:unless 예제 (0) | 2022.09.13 |
| th:each 예제 (0) | 2022.09.13 |
| th:text 예제 (0) | 2022.09.13 |
댓글