템플릿을 작성할 때 템플릿 상속을 이용하면 공통으로 필요한 부분을 재사용 할 수 있어 템플릿 파일마다 중복으로 작성하지 않아도 된다.
레이아웃을 먼저 작성하고, 빈 칸을 뚫어놓아 각각 파일의 내용을 채워넣는 개념으로 생각할 수 있다.
👉🏻레이아웃은 웹 페이지의 공통 요소를 정의하는 템플릿으로, 들어 헤더, 푸터, 사이드바 등과 같은 요소를 포함할 수 있다.
다음은 점프 투 스프링부트의 레이아웃 파일의 코드이다.
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<!-- sbb CSS -->
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
<title>Hello, sbb!</title>
</head>
<body>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>이 파일의 body 태그 사이의 <th:block layout:fragment="content"></th:block> 부분이 다른 파일의 내용으로 대체된다. 즉, html과 head는 공통되는 부분이고, body 파트 내에 원하는 내용을 삽입할 수 있다.
그리고 다른 템플릿 파일은 다음과 같은 태그로 감싸 작성하면 된다.
<html layout:decorate="~{layout}">
<div layout:fragment="content">
...
</div>
</html>layout:decorate는 페이지의 레이아웃을 정의하는 데 사용된다. 주로 전체 웹 페이지의 레이아웃을 지정하는 데 사용되며, layout:decorate를 사용하면 여러 페이지에서 동일한 레이아웃을 공유하고 관리할 수 있다.
layout:fragment는 레이아웃 템플릿 내에서 구성 요소를 정의하는 데 사용된다. layout:fragment는 레이아웃 템플릿 안에서 특정 위치에 삽입될 컨텐츠를 정의하는 역할을 한다. 예를 들어 헤더 영역이나 사이드바 영역에 들어갈 내용을 layout:fragment로 정의하고, 이를 layout:decorate에서 참조하여 해당 위치에 동적으로 삽입할 수 있다.
👉🏻템플릿 표현식 ~{}은 템플릿 참조 시에 사용되는 문법이다.
