2 min to read

[스프링부트 시리즈18] 표준 HTML 구조로 변경하기

Featured image

표준 HTML 구조로 변경하기

사실 지금까지 작성한 질문 목록(question_list.html), 질문 상세(question_detail.html) 템플릿은 표준 HTML 구조로 작성하지 않았다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동하게 하려면 반드시 웹 표준을 지키는 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>

layout.html은 모든 템플릿이 상속해야 하는 템플릿으로, 표준 HTML 문서 구조로 정리된 기본 틀이 된다. body 요소 안의 <th:block layout:fragment="content"></th:block>은 layout.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 된다. 즉, layout.html 템플릿을 상속하면 <th:block layout:fragment="content"></th:block> 영역만 수정해도 표준 HTML 문서로 작성된다.

question_list.html에 템플릿 상속하기

question_list.html 템플릿을 다음과 같이 변경하여 layout.html을 상속해 보자.

[파일명:/templates/question_list.html]

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

layout.html 템플릿을 상속하려고 <html layout:decorate="~{layout}">을 사용했다. 타임리프의 layout:decorate 속성은 템플릿의 레이아웃(부모 템플릿, 여기서는 layout.html)으로 사용할 템플릿을 설정한다. 속성값인 ~{layout}이 바로 layout.html 파일을 의미한다.

<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->

부모 템플릿에 작성된 이 부분을 자식 템플릿의 내용으로 적용될 수 있도록 다음과 같이 사용했다.

<div layout:fragment="content" class="container my-3">
    (... 생략 ...)
</div>

이렇게 하면 부모 템플릿의 th:block 요소의 내용이 자식 템플릿의 div 요소의 내용으로 교체된다.

question_detail.html에 템플릿 상속하기

question_deatail.html도 마찬가지 방법으로 layout.html을 상속해 보자.

[파일명: /templates/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>

question_list.html 템플릿과 동일한 방법으로 layout.html 템플릿을 상속하려고 <html layout:decorate="~{layout}">을 사용했다.

템플릿을 상속한 후, 질문 목록 또는 질문 상세 페이지를 확인해 보자. 화면에 보여 지는 것은 동일하지만 표준 HTML 구조로 변경되었다. 크롬 브라우저에서 마우스 오른쪽 버튼을 클릭하고 [페이지 소스 보기]를 클릭하면 HTML 코드를 확인할 수 있다.

확인

부트스트랩(Bootstrap)을 적용하여 style.css의 내용은 필요 없어졌으므로 기존에 작성한 내용을 모두 삭제하자. 부트스트랩으로 표현할 수 없는 스타일을 작성하기 위해 style.css 파일 자체를 삭제하지는 말고 내용만 삭제하자.