개발 무지렁이

[Thymeleaf] Thymeleaf의 템플릿 상속 본문

Frontend/HTML

[Thymeleaf] Thymeleaf의 템플릿 상속

Gaejirang-e 2022. 11. 27. 11:43

템플릿 상속, layout

기본 틀이 되는 템플릿(layout.html)을 먼저 작성하고, 다른 템플릿에서 그 템플릿을 상속해서 사용

[build.gradle 🐘]

implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

[layout.html]

<!DOCTYPE html>
<html
        lang="ko"
        xmlns:th="http://thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <!-- 테일윈드 CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @font-face {
            font-family: 'GmarketSansMedium';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        html > body {
            font-family: "GmarketSansMedium";
            text-underline-position: under;
        }
    </style>
    <!-- style.css -->
    <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
    <title>Hello, shimmer</title>
</head>
<body>
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- 부트스트랩 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css">

<section layout:fragment="content">

</section>

<footer>

</footer>

</body>
</html>

[layout을 상속한 템플릿.html]

<html lang="ko"
      xmlns:th="http://thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout}"
> <!-- 부모템플릿으로 사용할 템플릿 설정 -->

<div layout:fragment="content" class="container my-3"> <!--th:block이 div로 교체-->
    ((내용))
</div>

'Frontend > HTML' 카테고리의 다른 글

[Thymeleaf] 오류 메세지 공통 템플릿  (0) 2022.11.28
'Frontend/HTML' Related Articles more
Comments