스프링mvc2편 타임리프 - 기본기능 : 템플릿 레이아웃2

Spring

스프링mvc2편 타임리프 - 기본기능 : 템플릿 레이아웃2

sami355 2022. 8. 10. 13:25

인프런 김영한님의 스프링mvc2편을 보고 정리한 글입니다.

무엇을 배웠나요?

레이아웃을 적용하는 것에 있어서 <head>정도에만 적용하는게 아니라 <html>전체에 적용할 수도 있다.
layoutFile.html 을 보면 기본 레이아웃을 가지고 있는데, <html> 에 th:fragment 속성이 정의되어 있다. 이 레이아웃 파일을 기본으로 하고 여기에 필요한 내용을 전달해서 부분부분 변경하는 것으로 이해하면 된다.
layoutExtendMain.html은 현재 페이지인데, <html>자체를 th:replace 를 사용해서 변경하는 것을 확인할 수 있다.
결국 latoutFile.html에 필요한 내용을 전달하면서 <html> 자체를 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>

<!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>