반응형
조각 템플릿 (Fragments)
조각 템플릿은 Thymeleaf에서 재사용 가능한 HTML 조각을 의미합니다. 이번 챕터에서는 조각 템플릿에 대해 자세히 알아보겠습니다.
1. 조각 템플릿의 역할
조각 템플릿은 웹 페이지에서 반복적으로 사용되는 부분을 분리하여 관리하고 재사용할 수 있도록 합니다. 예를 들어, 헤더, 푸터, 사이드바와 같은 부분을 조각 템플릿으로 분리하여 필요한 곳에서 쉽게 삽입할 수 있습니다.
2. 조각 템플릿 작성 방법
조각 템플릿은 일반적인 HTML 파일과 유사하게 작성됩니다. 다만 Thymeleaf의 문법을 활용하여 동적 데이터를 삽입할 수 있습니다.
<!-- header.html -->
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>3. 조각 템플릿 사용 방법
조각 템플릿은 다른 템플릿 파일에서 삽입하여 사용할 수 있습니다. 이를 통해 중복되는 코드의 양을 줄이고 유지보수성을 높일 수 있습니다.
<!-- home.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<!-- header.html 조각 템플릿을 삽입 -->
<div th:replace="fragments/header"></div>
<h2>Welcome to our Home Page</h2>
<!-- footer.html 조각 템플릿을 삽입 -->
<div th:replace="fragments/footer"></div>
</body>
</html>
조각 템플릿을 사용하면 웹 페이지의 일부분을 쉽게 관리하고 재사용할 수 있습니다. 이를 통해 코드의 가독성을 높이고 개발 생산성을 향상시킬 수 있습니다.
반응형
'Thymeleaf' 카테고리의 다른 글
| 13. Thymeleaf의 객체와 컨트롤러와의 상호작용 - 3 (0) | 2024.02.24 |
|---|---|
| 12. Thymeleaf의 객체와 컨트롤러와의 상호작용 - 2 (0) | 2024.02.24 |
| 11. Thymeleaf의 객체와 컨트롤러와의 상호작용 - 1 (0) | 2024.02.24 |
| 10. Thymeleaf 템플릿 - 3 (0) | 2024.02.24 |
| 8. Thymeleaf 템플릿 - 1 (0) | 2024.02.22 |
| 7. Thymeleaf 기본 문법 - 5 (0) | 2024.02.22 |
| 6. Thymeleaf 기본 문법 - 4 (0) | 2024.02.22 |
| 5. Thymeleaf 기본 문법 - 3 (0) | 2024.02.22 |
