Colin's Blog
[java] Thymeleaf에서 공통 레이아웃을 어떻게 구성하나요?

프래그먼트(fragment)를 사용하는 방법

Thymeleaf의 프래그먼트 기능을 사용하면 공통 레이아웃을 관리할 수 있습니다. 먼저, 공통 레이아웃으로 사용할 HTML 파일을 생성합니다. 이 파일에는 공통으로 사용되는 요소들이 포함되어야 합니다. 예를 들어, layout.html 파일을 생성하고 다음과 같이 작성할 수 있습니다:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>My Website</title>
    <!-- 공통적으로 사용되는 스타일시트 및 스크립트 파일들 -->
</head>

<body>
    <!-- 공통적인 헤더 영역 -->
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <!-- 컨텐츠 영역 -->
    <section th:fragment="content">
        <!-- 개별 페이지의 컨텐츠 -->
    </section>

    <!-- 공통적인 푸터 영역 -->
    <footer>
        &copy; 2022 My Website. All rights reserved.
    </footer>
</body>

</html>

이제 개별 페이지에서 이 공통 레이아웃을 사용할 수 있습니다. 개별 페이지의 HTML 파일에서 다음과 같이 th:replace 속성을 사용하여 프래그먼트를 포함시킬 수 있습니다:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 개별 페이지의 헤더 정보 -->
</head>

<body>
    <!-- 공통 레이아웃을 포함 -->
    <div th:replace="layout :: content">
        <!-- 개별 페이지의 컨텐츠 -->
    </div>
</body>

</html>

이렇게 하면 개별 페이지의 컨텐츠가 layout.html의 section 프래그먼트 영역에 포함되어 공통 레이아웃이 적용됩니다.

레이아웃 타일(Thymeleaf Layout Dialect)을 사용하는 방법

Thymeleaf Layout Dialect는 Thymeleaf에서 레이아웃을 관리하기 위한 확장 기능입니다. 이를 사용하면 더욱 쉽게 공통 레이아웃을 구성할 수 있습니다.

먼저, 프로젝트의 의존성에 Thymeleaf Layout Dialect를 추가합니다. Maven을 사용하는 경우 pom.xml 파일에 다음을 추가합니다:

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

그리고, application.properties 파일에 다음과 같이 설정합니다:

spring.thymeleaf.mode=HTML
spring.thymeleaf.prefixclasspath:/templates/
spring.thymeleaf.suffix=.html

# Layout Dialect 설정
spring.thymeleaf.enabled=true
spring.thymeleaf.dialects=xxx.layout.MyLayoutDialect

이제 공통 레이아웃을 정의할 수 있는 mylayout.html 파일을 생성합니다:

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

<head>
    <title>My Website</title>
    <!-- 공통적으로 사용되는 스타일시트 및 스크립트 파일들 -->
    <link rel="stylesheet" href="/path/to/styles.css" />
</head>

<body>
    <!-- 공통 레이아웃의 구성 -->
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <section layout:fragment="content">
        <!-- 개별 페이지의 컨텐츠 -->
    </section>

    <footer>
        &copy; 2022 My Website. All rights reserved.
    </footer>
</body>

</html>

마지막으로, 개별 페이지에서 공통 레이아웃을 사용하도록 설정합니다. 개별 페이지의 HTML 파일에서 다음과 같이 layout:decorate 속성을 사용하여 공통 레이아웃을 포함시킬 수 있습니다:

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

<head>
    <!-- 개별 페이지의 헤더 정보 -->
</head>

<body>
    <div layout:decorate="~{mylayout}">
        <!-- 개별 페이지의 컨텐츠 -->
    </div>
</body>

</html>

이렇게 하면 개별 페이지의 컨텐츠가 mylayout.html의 section 프래그먼트 영역에 포함되어 공통 레이아웃이 적용됩니다.

Thymeleaf에서 공통 레이아웃을 구성하는 방법과 그 예제를 알아보았습니다. 이를 통해 웹 애플리케이션의 유지보수성과 개발 생산성을 높일 수 있습니다. 자세한 내용은 Thymeleaf 공식 문서를 참조하십시오.

© 2018 Colin. All rights reserved.