Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags
more
Archives
Today
Total
관리 메뉴

hy6

2-14 템플릿 상속 (실습 기록) 본문

점프 투 스프링 부트

2-14 템플릿 상속 (실습 기록)

rantinum 2023. 10. 25. 13:13

0. 들어가며

  • 지금까지 작성한 html의 모양은 표준 html 작성 규격을 따르지 않은 문서이다. 웹 페이지가 다른 컴퓨터 에서도 동일하게 보이게 하려면 웹 표준 html문서를 작성해야 한다.

1. 표준 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, head, body 엘리먼트가 있어야 하며, CSS 파일은 head 엘리먼트 안에 링크 되어야 한다. 또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다.

2. layout.html 작성

  • 표준 html 구조의 기본이 되는 layout파일을 다음과 같이 작성한다.

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

  • layout.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML 문서의 기본 틀이된다.

  • <th:block layout:fragment="content"> 영역이 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 된다.

  • 이는 layout.html 템플릿을 상속하면, <th:block layout:fragment="content"> 영역에 해당되는 부분만 작성해도 표준 HTML 문서가 되는 것이다.

3. question_list.html

  • question_list를 이제 수정해보자
<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.html에서 참조 하므로 여기서는 중복으로 작성 할 이유가 없으므로 삭제했다.

4. question_detail.html

  • 위와 마찬가지로 question_detail파일도 다음과 같이 수정을 거치자.
<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>

5. style.css

  • style.css는 부트스트랩 적용으로 인해 필요 없어졌으므로, 부트스트랩으로 표현할 수 없는 스타일 작성을 위해 파일은 없애지 않고 내용만 삭제한다.

'점프 투 스프링 부트' 카테고리의 다른 글

2-16 공통 템플릿 (실습 기록)  (2) 2023.10.26
2-15 질문 등록과 폼 (실습 기록)  (0) 2023.10.26
2-13 부트스트랩 (실습 기록)  (0) 2023.10.25
2-12 스태틱 디렉터리와 스타일 시트 (실습 기록)  (0) 2023.10.25
2-11 답변 등록 (실습 기록)  (0) 2023.10.24
'점프 투 스프링 부트' Related Articles more