Thymeleaf (14) 템플릿 레이아웃 01

티스토리 뷰

[개발] - Spring/Thymeleaf

Thymeleaf (14) 템플릿 레이아웃 01

완벽한 장면 2023. 11. 21. 19:49

템플릿 레이아웃 01

템플릿 레이아웃

이전에는 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에
넘겨서 사용하는 방법에 대해서 알아보자.

예를 들어서 <head> 에 공통으로 사용하는 css , javascript 같은 정보들이 있는데,

이러한 공통 정보들을 한 곳에 모아두고, 공통으로 사용하지만,

각 페이지마다 필요한 정보를 더 추가해서 사용하고 싶다면 다음과 같이 사용하면 된다.

BasicController 추가

@GetMapping("/layout")
public String layout() {
	return "template/layout/layoutMain";
}

/resources/templates/template/layout/base.html

<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
    <!--
        이 코드는 Thymeleaf 템플릿에서 공통 헤더 부분을 정의하는 부분입니다.
        템플릿 프래그먼트로 common_header라는 이름을 가지며, title과 links라는 파라미터를 받습니다.

        title 파라미터:
        - title 파라미터로 전달받은 값으로 웹 페이지의 타이틀을 설정합니다.
        - <title th:replace="${title}"> 태그를 사용하여 웹 페이지의 타이틀을 동적으로 설정합니다.

        공통 스타일 및 스크립트:
        - 공통 CSS 스타일 시트, favicon, JavaScript 스크립트를 로드합니다.
        - 이러한 공통 리소스는 모든 웹 페이지에서 공유되며, 
          여기서는 Thymeleaf의 URL 표현식(th:href, th:src)을 사용하여 경로를 지정하고 있습니다.

        추가적인 링크:
        - 파라미터로 전달받은 links를 th:block을 통해 동적으로 추가합니다.
    -->
    <title th:replace="${title}">레이아웃 타이틀</title>
    <!-- 공통 CSS 스타일 시트 -->
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
    <!-- 공통 favicon -->
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    <!-- 공통 JavaScript 스크립트 -->
    <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
    <!-- 추가적인 링크 (파라미터로 전달받은 links를 삽입) -->
    <th:block th:replace="${links}" />
</head>

Thymeleaf 템플릿에서 공통 헤더 부분을 정의하는 템플릿 프래그먼트다.
이 템플릿은 common_header라는 이름을 가지며, title과 links라는 두 개의 파라미터를 받는다.
title 파라미터는 웹 페이지의 타이틀을 동적으로 설정한다.
이를 위해 <title th:replace="${title}"> 태그를 사용.
공통 CSS 스타일 시트, favicon, JavaScript 스크립트는 모든 웹 페이지에서 공유되며,
th:href와 th:src를 사용하여 경로를 지정한다.
links 파라미터는 추가적인 링크를 동적으로 삽입한다.
th:block과 th:replace를 사용하여 파라미터로 전달된 내용을 삽입할 수 있다.

이렇게 작성된 템플릿 프래그먼트는
다른 웹 페이지 템플릿에서 부분을 재사용하고 필요한 타이틀 및 링크를 동적으로 설정할 수 있도록 도와주는 역할.

/resources/templates/template/layout/layoutMain.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
    <!--
        이 코드는 Thymeleaf 템플릿에서 기본 레이아웃 템플릿을 사용하는 예제입니다.
        기본 레이아웃 템플릿인 "template/layout/base"의 "common_header" 템플릿 프래그먼트를 
        현재 페이지의 헤더로 대체합니다.
        
        title:
        - "메인 타이틀"로 설정된 현재 페이지의 타이틀을 설정합니다.

        link:
        - "/css/bootstrap.min.css"와 "/themes/smoothness/jquery-ui.css" 
        두 개의 스타일 시트를 로드합니다.
    -->
    <title>메인 타이틀</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
메인 컨텐츠
</body>
</html>

여기서 중요한 부분은 <head> 부분을 대체(th:replace)하는 부분이다.
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
이 부분은 template/layout/base 템플릿에서 common_header 템플릿 프래그먼트를 현재 페이지의 <head>로 대체한다.
~{::title}은 현재 페이지의 타이틀을 의미하며, "메인 타이틀"로 설정된다.
~{::link}는 현재 페이지에서 로드해야 하는 스타일 시트(stylesheet)를 지정하며, /css/bootstrap.min.css와 /themes/smoothness/jquery-ui.css를 로드

결과는

정리.

이렇게 기본 레이아웃 템플릿과 함께 Thymeleaf를 사용하면
공통된 헤더, 푸터, 사이드바 등의 요소를 한 번 정의하고,
다른 페이지에서 필요한 내용을 쉽게 삽입하거나 대체할 수 있다.

이는 웹 애플리케이션의 일관된 디자인과 레이아웃을 구현하는 데 유용하다.

이 방식은 사실 앞서 배운 코드 조각을 조금 더 적극적으로 사용하는 방식이다.
쉽게 이야기해서 레이아웃 개념을 두고, 그 레이아웃에 필요한 코드 조각을 전달해서 완성하는 것으로 이해하면 된다.

728x90

'[개발] - Spring > Thymeleaf' 카테고리의 다른 글

타임리프 스프링 통합 (1)	2023.11.26
Thymeleaf (15) 템플릿 레이아웃 02 (0)	2023.11.24
Thymeleaf (13) 템플릿 조각 (0)	2023.11.20
Thymeleaf (12) 자바스크립트 인라인 (0)	2023.11.18
Thymeleaf (11) 블록 (0)	2023.11.17

공유하기 링크

Comments

Related Articles more

최근에 올라온 글

최근에 달린 댓글

TAG more

Total

Today

Yesterday

250x250

코드그라데이션

티스토리 뷰