코드 그라데이션

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
'Spring/Thymeleaf' Related Articles more
Comments