1. 공통 부분을 fragment로 만들어서 사용하기
프로젝트 개발시 여러 HTML파일에서 공통적으로 사용하는 코드, 공통적으로 사용하는 라이브러리 임포트와 같이 반복되는 코드가 있다.
이런 반복되는 코드들은 th:fragment를 사용하여 하나의 파일로 묶고, 다른 파일에서 해당 fragment를 insert/replace하여 사용할 수 있다.
- 공통 head를 묶는 경우
공통 코드를 묶어 만든 fragment
/resources/templates/template/layout/base.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">레이아웃 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/
awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></
script>
<!-- 추가 -->
<th:block th:replace="${links}" />
</head>위에서 만든 fragment를 각 html파일에서 사용
/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})">
<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>결과
<!DOCTYPE html>
<html>
<head>
<title>메인 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>
<!-- 추가 -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head>
<body>
메인 컨텐츠
</body>
</html><head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
이 부분에서 기존 head를 common_header라는 이름의 fragment로 교체하면서 기존 head에 존재하는 title태그와 link태그를 common_header에 넘겨준다.
이로 인해 각 파일마다 별도의 제목이나 import도 사용할 수 있다.
2. 레이아웃 고정하기
작은 규모의 서비스일 경우 작은 fragment를 만들어서 각 화면마다 붙여서 사용하는 것이 편리할 수 있지만 만약 여러개의 페이지가 레이아웃이 동일할 경우 레이아웃을 고정하고 안에 들어가는 컨텐츠만 각 화면별로 개발하는 것이 편리하다.
1번과 같이 <head>를 변경하는 것이 아니라 <html>전체를 변경할 수 있다.
이렇게 레이아웃을 고정하게 되면 여러 같은 레이아웃 형태의 페이지에서 레이아웃을 수정할 경우 한번의 수정만으로 전체 페이지에 적용시킬 수 있다.
- 레이아웃 파일
/resources/templates/template/layoutExtend/layoutFile.html
<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://
www.thymeleaf.org">
<head>
<title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
<p>레이아웃 컨텐츠</p>
</div>
<footer>
레이아웃 푸터
</footer>
</body>
</html>- 실제 페이지
/resources/templates/template/layoutExtend/layoutExtendMain.html
<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title},
~{::section})}"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
</body>
</html>- 생성 결과
<!DOCTYPE html>
<html>
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
<footer>
레이아웃 푸터
</footer>
</body>
</html>※인프런의 스프링 MVC2편 강의를 보고 정리한 글이다.
