[Spring Boot] 템플릿 상속 - 표준 HTML 구조

DANI·2023년 10월 3일
0
post-thumbnail

📕 표준 HTML 구조란?

표준 HTML 문서의 구조는 다음과 같아야 한다.

[표준 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>
(... 생략 ...)
</body>
</html>

표준 HTML 문서의 구조는 위의 예처럼 html, head, body 엘리먼트가 있어야 하며, CSS 파일은 head 엘리먼트 안에 링크 되어야 한다. 또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다.

❓ 태그와 엘리먼트


<table> (... 생략 ...) </table> <!-- table 엘리먼트 -->
<table>은 table 태그이고 <table> ~ </table> 처럼 table 태그로 시작해서 table 태그로 닫힌 구간(Block)은 table 엘리먼트이다.



📖 템플릿 상속


앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정해 보자. 그런데 템플릿 파일들을 모두 표준 HTML 구조로 변경하면 body 엘리먼트 바깥 부분(head 엘리먼트 등)은 모두 같은 내용으로 중복된다. 그러면 CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가될 때마다 모든 템플릿 파일을 일일이 수정해야 한다.

타임리프는 이런 중복의 불편함을 해소하기 위해 템플릿 상속 기능을 제공한다. 템플릿 상속은 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법이다.

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

<th:block layout:fragment="content"></th:block> layout.html을 상속한 템플릿에서 개별적으로 구현해야 하는 부분


💾 question_list.html 파일 수정하기

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
    <table class="table">
        (... 생략 ...)
    </table>
</div>
</html>

<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"> 삭제!
<html layout:decorate="~{layout}"></html> 템플릿의 레이아웃(부모 템플릿)으로 사용할 템플릿을 설정한다.
<div layout:fragment="content" class="container my-3"> 부모 템플릿의 <th:block layout:fragment="content"></th:block> 엘리먼트의 내용이 자식 템플릿의 div 엘리먼트의 내용으로 교체된다.


💾 question_detail.html 파일 수정하기

<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
    <h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
    (... 생략 ...)
    </form>
</div>
</html>

<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"> 삭제!
<html layout:decorate="~{layout}"></html> 템플릿의 레이아웃(부모 템플릿)으로 사용할 템플릿을 설정한다.
<div layout:fragment="content" class="container my-3"> 부모 템플릿의 <th:block layout:fragment="content"></th:block> 엘리먼트의 내용이 자식 템플릿의 div 엘리먼트의 내용으로 교체된다.


💾 style.css 파일 수정하기

textarea {
    width:100%;
}

input[type=submit] {
    margin-top:10px;
}

✅ 부트스트랩 적용으로 인해 style.css파일을 사용하지 않으므로 위 코드를 전부 지우고 공란으로 저장해둔다.

❓ 파일 삭제가 아닌 공란으로 두는 이유


부트스트랩으로 표현할 수 없는 스타일 지정이 있을 수 있기 때문에 내용만 지워둔다!

0개의 댓글