템플릿 레이아웃 적극 활용
이전 글에서 배운 템플릿 코드조각을 적극 활용하는 템플릿 레이아웃을 배울 수 있었는데, 이번에는 템플릿 레이아웃을 적극 활용하여 어떻게 처리할 수 있는지 예제를 통해서 알아보자.
이전 글의 예제에서는 <head>에 들어갈 내용들이 모여있는 파일을 현재 페이지의 <head> 에 replace를 하여(바꾸어) 활용했다면, 이번에는 <html> 태그에 replace를 활용하여 각 부분을 대체할 수 있도록 한다. 개념은 이전과 동일하기 때문에 이해하기 쉬울 것이다.
예제 - 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><html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title}, ~{::section})}" xmlns:th="http://www.thymeleaf.org">을 이용해 <html> 태그 전체를 템플릿 조각을 이용해 대체할 것임을 알 수 있다.- 더불어, <title>, <section> 두 개 태그를 파라미터로 넘겨줄 것임을 알 수 있다.
예제 - layoutFile.html
아래 예제 코드를 보면 th:fragment를 <html> 태그에 템플릿 조각 이름을 붙이고, 두 개 파라미터를 받아서 활용하도록 되어 있음을 알 수 있다.
<!DOCTYPE html>
<html th:fragment="layout (title1, content)" xmlns:th="http://www.thymeleaf.org">
<head>
<title th:replace="${title1}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
<p>레이아웃 컨텐츠</p>
</div>
<footer>
레이아웃 푸터
</footer>
</body>
</html><html th:fragment="layout (title1, content)" xmlns:th="http://www.thymeleaf.org">를 통해 두 개 파라미터를 받아서 태그를 대체할 것을 알 수 있다.- 파라미터로 받은 값들은
title1,content라는 이름으로 활용할 것임을 알 수 있다. - 따라서
title1에는<title>메인 페이지 타이틀</title>태그가 들어간다. - 동일하게
content에는<section> 내용생략 </section>태그가 들어간다. - 위 파일은 레이아웃이 즉, 기본 골조가 짜여져 있다고 생각하고, 파라미터로 내용만 바뀌도록 처리한다고 생각한다.
결과
이와 같이 처리하면 layoutExtendMain.html을 호출 할 때, <html>태그가 전부 치환되면서 layoutfile.html에 지정한 레이아웃(골조, 틀)에 맞추어 내용이 출력되게 된다.
- layoutFile.html 은 틀
- layoutExtendMain.html 은 틀에 들어갈 내용
안녕하세요. 백엔드 개발자가 되고 싶은 Kade 입니다.