템플릿 상속 ?

 

템플릿 상속은 기본 툴이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 사용하는 방법이다.

 

layout.html 생성

<!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> 부분이 바로 layout.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 된다. 

 

question_list.html 수정

<!-- <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">  << 이부분 삭제 -->
<!-- 상속할 템플릿 추가 -->
<html layout:decorate="~{layout}"> <!-- 추가 -->
<div layout:fragment="content" class="container my-3"> <!-- 변경 -->
    <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>
</html> <!-- 추가 -->

타임리프의 layout:decorate 속성은 템플릿의 레이아웃(부모 템플릿)으로 사용할 템플릿을 설정한다.

속성의 값인 ~{layout}은 layout.html 파일을 의미한다.

 

question_detail.html 수정

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
    <!-- 질문 -->
    <h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;" th:text="${question.content}"></div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2 text-start">
                    <div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 답변의 갯수 표시 -->
    <h5 class="border-bottom my-3 py-2" 
        th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
    <!-- 답변 반복 시작 -->
    <div class="card my-3" th:each="answer : ${question.answerList}">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;" th:text="${answer.content}"></div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2 text-start">
                    <div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 답변 반복 끝  -->
    <!-- 답변 작성 -->
    <form th:action="@{|/answer/create/${question.id}|}" method="post" class="my-3">
        <textarea name="content" id="content" rows="10" class="form-control"></textarea>
        <input type="submit" value="답변등록" class="btn btn-primary my-2">
    </form>
</div>
</html>

 

style.css 수정

 

부트스트랩 적용으로 인해 style.css의 내용은 필요가 없어졌으므로 기존 내용을 모두 삭제한다.

 - 부트스트랩으로 표현할 수 없는 스타일 작성을 위해 파일 자체를 삭제하지는 말고 내용만 삭제

 

 

 

출처 : 점프 투 스프링부트 https://wikidocs.net/161523

'Backend > Spring Boot' 카테고리의 다른 글

[Spring Boot] 공통 템플릿  (0) 2022.08.25
[Spring Boot] 질문 등록 / 폼(form)  (0) 2022.08.24
[Spring Boot] 스태틱 디렉터리와 스타일시트 / 부트스트랩  (0) 2022.08.23
[Spring Boot] 답변 등록(2/2)  (0) 2022.08.23
[Spring Boot] 답변 등록(1/2)  (0) 2022.08.22

+ Recent posts

티스토리툴바