8. Thymeleaf 템플릿

템플릿 레이아웃 (Layouts)

템플릿 레이아웃은 Thymeleaf에서 사용자 인터페이스의 일관성을 유지하고 코드 재사용성을 높이는 데에 중요한 역할을 합니다. 이번 챕터에서는 템플릿 레이아웃에 대해 자세히 알아보겠습니다.

1. 레이아웃 구성 요소

템플릿 레이아웃은 주로 공통적으로 사용되는 요소를 포함하는 템플릿입니다. 보통은 헤더, 푸터, 사이드바 등과 같은 요소가 포함됩니다. 이러한 구성 요소를 따로 관리하여 각 페이지에서 중복해서 작성할 필요가 없도록 합니다.

<!-- layout.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">Page Title</title>
</head>
<body>
    <header th:include="fragments/header"></header>

    <div th:replace="fragments/sidebar"></div>

    <main>
        <!-- 페이지 별 내용이 삽입될 자리 -->
        <div th:replace="~{${content}}"></div>
    </main>

    <footer th:include="fragments/footer"></footer>
</body>
</html>

2. 페이지 템플릿

각 페이지는 템플릿 레이아웃을 포함하여 작성됩니다. 페이지 템플릿은 템플릿 레이아웃에 페이지 별로 변경되는 내용을 삽입하는 역할을 합니다.

<!-- home.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
</head>
<body>
    <!-- layout.html을 포함 -->
    <div th:replace="fragments/layout :: layout(title='Home Page', content='content/home')"></div>
</body>
</html>

위의 예제에서 fragments/layout은 레이아웃 템플릿의 경로를 나타내며, layout() 함수를 호출하여 페이지의 제목과 컨텐츠를 지정합니다.

3. 코드 예제

다음은 템플릿 레이아웃과 페이지 템플릿을 사용하는 간단한 예제입니다.

<!-- layout.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">Page Title</title>
</head>
<body>
    <header th:include="fragments/header"></header>

    <div th:replace="fragments/sidebar"></div>

    <main>
        <!-- 페이지 별 내용이 삽입될 자리 -->
        <div th:replace="~{${content}}"></div>
    </main>

    <footer th:include="fragments/footer"></footer>
</body>
</html>

<!-- home.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
</head>
<body>
    <!-- layout.html을 포함 -->
    <div th:replace="fragments/layout :: layout(title='Home Page', content='content/home')"></div>
</body>
</html>

템플릿 레이아웃을 사용하면 페이지의 일관성을 유지하고 코드의 재사용성을 높일 수 있습니다. 이를 통해 웹 애플리케이션의 개발과 유지보수를 효율적으로 할 수 있습니다.

'Thymeleaf' 카테고리의 다른 글

12. Thymeleaf의 객체와 컨트롤러와의 상호작용 - 2 (0)	2024.02.24
11. Thymeleaf의 객체와 컨트롤러와의 상호작용 - 1 (0)	2024.02.24
10. Thymeleaf 템플릿 - 3 (0)	2024.02.24
9. Thymeleaf 템플릿 - 2 (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
4. Thymeleaf 기본 문법 - 2 (0)	2024.02.22