반응형
1️⃣ 상속하는(부모) 템플릿
여기서 중요할 점은 2개다.
- 부모 html 파일 이름, 여기서는 layout.html
- <th:block ~ > 태그안에 있는 layout:fragment의 키값이다. 여기서는 content
<!-- layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<!--부트스트랩 연결-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<!-- 로컬 CSS 연결-->
<link rel="stylesheet" th:href="@{/style.css}">
</head>
<body>
<!-- 상속받은 html 내용 -->
<th:block layout:fragment="content"></th:block>
<!--부트스트랩 연결-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>
2️⃣ 상속받는(자식) 템플릿
- html 태그, layout:decorate="~{상속받을 html파일}"을 넣어준다.
- 위 th:block 태그의 layout:fragment 값과 실제 본문을 연결해준다.
<!DOCTYPE html>
<!-- layout.html을 상속받겠다. -->
<html lang="en" layout:decorate="~{layout}">
<head>
<meta charset="UTF-8">
<title>Hello Template</title>
</head>
<body>
<!-- layout.html의 fragment="content" 쪽에 삽입되겠다-->
<div layout:fragment="content" class="container my-3">
<div class ="table">
<table class="table">
<thead class="table-dark">
<tr>
<th>번호</th>
<th> 제목 </th>
<th> 작성 일시</th>
</tr>
</thead>
<tbody>
<tr th:each="question, loop : ${questionList}">
<td th:text="${loop.count}"></td>
<td> <a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a></td>
<td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
출처
반응형