반응형
타임리프(Thymeleaf)를 사용하여 공통적인 레이아웃을 분리하는 방법은 여러 파일로 나누어 유지보수성과 재사용성을 높이는 데 매우 유용합니다.
이를 위해 타임리프의 레이아웃 기능을 사용할 수 있습니다. 가장 일반적인 접근 방식은 "프래그먼트" 기능을 사용하는 것입니다.
1. 공통 레이아웃 파일 생성
먼저, 공통 레이아웃 파일을 생성합니다. 이 파일은 헤더, 푸터 등 공통 요소를 포함합니다.
layout.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!--공통 JS / CSS 영역을 관리하는 환경 영역-->
<head th:replace="fragments/config :: config">
<title layout:title-pattern="$LAYOUT_TITLE : $CONTENT_TITLE">공통 타이틀</title>
</head>
<body>
<!--Header 영역을 참조합니다.-->
<header th:replace="fragments/header :: header"></header>
<!--Content 내용 영역을 참조합니다-->
<th:block layout:fragment="content"></th:block>
<!--Footer 영역을 참조합니다.-->
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>
config.html
이 파일은 공통 css 및 js를 포함합니다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" th:fragment="config">
<head>
<!--Common Head-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport"
content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0"/>
<title></title>
<!--Common CSS -->
<link th:inline="css" th:href="@{/css/common.css}" rel="stylesheet"/>
<!--Common JS-->
<script th:inline="javascript" type="text/javascript" th:src="@{/js/common.js}"></script>
</head>
</html>
2. 헤더와 푸터 프래그먼트 파일 생성
헤더와 푸터 부분을 별도의 파일로 분리합니다.
fragments/header.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" th:fragment="header">
<header>
<h1>
<a href="javascript:void(0)" onclick="scrollToSection('top')">
<img th:src="@{/img/vennygo.png}" alt="Profile Picture">
</a>
</h1>
<nav>
<ul>
<li><a href="javascript:void(0)" onclick="scrollToSection('about')">About</a></li>
<li><a href="javascript:void(0)" onclick="scrollToSection('skills')">Skills</a></li>
<li><a href="javascript:void(0)" onclick="scrollToSection('career')">Career</a></li>
<li><a href="javascript:void(0)" onclick="scrollToSection('archiving')">Archiving</a></li>
<li><a href="javascript:void(0)" onclick="scrollToSection('projects')">Projects</a></li>
</ul>
</nav>
</header>
</html>
fragments/footer.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" th:fragment="footer">
<footer>
<div class="footer_copyright">
© 2024. vennygo.com. All rights reserved.
</div>
</footer>
</html>
3. 컨텐츠 파일 생성
각 페이지마다 컨텐츠 부분을 별도의 파일로 생성하고, 레이아웃을 적용합니다.
about.html (페이지 이름)
<!DOCTYPE html>
<!-- Default Layout Import-->
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}"
layout:fragment="content"
>
<main>
<!-- 콘텐츠 시작 -->
<section id="top">
<p><span th:text="${introduction}">소개말</span></p>
<button onclick="scrollToSection('about')">더 알아보기 ↓</button>
</section>
<section id="about">
<p>이름 <span th:text="${name}">이름</span><br/><span th:text="${nickname}">nickname</span></p>
</section>
<section id="skills">
</section>
<section id="career">
</section>
<section id="archiving">
</section>
<section id="projects">
</section>
</main>
<script th:src="@{/js/about.js}"></script>
</html>
4. 컨트롤러에 연결
AboutController.java
package com.vennygo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class AboutController {
@GetMapping("/about")
public String about(Model model) {
model.addAttribute("pageTitle", "About Page");
model.addAttribute("introduction", "안녕하세요.");
model.addAttribute("name", "베니고");
model.addAttribute("nickname", "venny");
return "about";
}
}
th:replace와 th:fragment 속성을 활용하여 타임리프 프래그먼트를 동적으로 포함시키는 것이 핵심입니다.
이 방식으로 공통 레이아웃을 분리하면, 각 페이지의 레이아웃을 쉽게 관리하고 유지보수할 수 있습니다. 각 페이지에서 공통적인 헤더, 푸터, 그리고 레이아웃을 재사용할 수 있어 코드 중복을 줄이고 일관성을 유지할 수 있습니다.
반응형
'Programming > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 타임리프 HTML5 기본 구조 (0) | 2024.06.16 |
|---|---|
| [Thymeleaf] 타임리프란? Spring Boot 타임리프 설정 방법 (1) | 2024.06.15 |
반응형
타임리프(Thymeleaf)를 사용하여 공통적인 레이아웃을 분리하는 방법은 여러 파일로 나누어 유지보수성과 재사용성을 높이는 데 매우 유용합니다.
이를 위해 타임리프의 레이아웃 기능을 사용할 수 있습니다. 가장 일반적인 접근 방식은 "프래그먼트" 기능을 사용하는 것입니다.
1. 공통 레이아웃 파일 생성
먼저, 공통 레이아웃 파일을 생성합니다. 이 파일은 헤더, 푸터 등 공통 요소를 포함합니다.
layout.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!--공통 JS / CSS 영역을 관리하는 환경 영역-->
<head th:replace="fragments/config :: config">
<title layout:title-pattern="$LAYOUT_TITLE : $CONTENT_TITLE">공통 타이틀</title>
</head>
<body>
<!--Header 영역을 참조합니다.-->
<header th:replace="fragments/header :: header"></header>
<!--Content 내용 영역을 참조합니다-->
<th:block layout:fragment="content"></th:block>
<!--Footer 영역을 참조합니다.-->
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>
config.html
이 파일은 공통 css 및 js를 포함합니다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" th:fragment="config">
<head>
<!--Common Head-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport"
content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0"/>
<title></title>
<!--Common CSS -->
<link th:inline="css" th:href="@{/css/common.css}" rel="stylesheet"/>
<!--Common JS-->
<script th:inline="javascript" type="text/javascript" th:src="@{/js/common.js}"></script>
</head>
</html>
2. 헤더와 푸터 프래그먼트 파일 생성
헤더와 푸터 부분을 별도의 파일로 분리합니다.
fragments/header.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" th:fragment="header">
<header>
<h1>
<a href="javascript:void(0)" onclick="scrollToSection('top')">
<img th:src="@{/img/vennygo.png}" alt="Profile Picture">
</a>
</h1>
<nav>
<ul>
<li><a href="javascript:void(0)" onclick="scrollToSection('about')">About</a></li>
<li><a href="javascript:void(0)" onclick="scrollToSection('skills')">Skills</a></li>
<li><a href="javascript:void(0)" onclick="scrollToSection('career')">Career</a></li>
<li><a href="javascript:void(0)" onclick="scrollToSection('archiving')">Archiving</a></li>
<li><a href="javascript:void(0)" onclick="scrollToSection('projects')">Projects</a></li>
</ul>
</nav>
</header>
</html>
fragments/footer.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" th:fragment="footer">
<footer>
<div class="footer_copyright">
© 2024. vennygo.com. All rights reserved.
</div>
</footer>
</html>
3. 컨텐츠 파일 생성
각 페이지마다 컨텐츠 부분을 별도의 파일로 생성하고, 레이아웃을 적용합니다.
about.html (페이지 이름)
<!DOCTYPE html>
<!-- Default Layout Import-->
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}"
layout:fragment="content"
>
<main>
<!-- 콘텐츠 시작 -->
<section id="top">
<p><span th:text="${introduction}">소개말</span></p>
<button onclick="scrollToSection('about')">더 알아보기 ↓</button>
</section>
<section id="about">
<p>이름 <span th:text="${name}">이름</span><br/><span th:text="${nickname}">nickname</span></p>
</section>
<section id="skills">
</section>
<section id="career">
</section>
<section id="archiving">
</section>
<section id="projects">
</section>
</main>
<script th:src="@{/js/about.js}"></script>
</html>
4. 컨트롤러에 연결
AboutController.java
package com.vennygo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class AboutController {
@GetMapping("/about")
public String about(Model model) {
model.addAttribute("pageTitle", "About Page");
model.addAttribute("introduction", "안녕하세요.");
model.addAttribute("name", "베니고");
model.addAttribute("nickname", "venny");
return "about";
}
}
th:replace와 th:fragment 속성을 활용하여 타임리프 프래그먼트를 동적으로 포함시키는 것이 핵심입니다.
이 방식으로 공통 레이아웃을 분리하면, 각 페이지의 레이아웃을 쉽게 관리하고 유지보수할 수 있습니다. 각 페이지에서 공통적인 헤더, 푸터, 그리고 레이아웃을 재사용할 수 있어 코드 중복을 줄이고 일관성을 유지할 수 있습니다.
반응형
'Programming > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 타임리프 HTML5 기본 구조 (0) | 2024.06.16 |
|---|---|
| [Thymeleaf] 타임리프란? Spring Boot 타임리프 설정 방법 (1) | 2024.06.15 |
