타임리프 기본 설정

728x90

타임리프 기본 설정

application.properties에 작성

#Thymeleaf
//템플릿의 위치와 확장자 정의
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
//true일시 정의된 위치에 템플릿이 없으면 에러 발생.
spring.thymeleaf.check-template-location=true
//개발용 설정. 정적 자원을 바로 반영하기 위함. 배포시엔 true
spring.thymeleaf.cache=false

#Hot loader
//true일시 정적 자원 실시간 반영
spring.devtools.livereload.enabled=true
//true일시 변화를 감지하고 자동으로 재시작
spring.devtools.remote.restart.enabled=true

레이아웃 작성하기

build.gradle에 작성

implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.4.1'

templates/layouts/layout.html 작성

thymeleaf + thymeleaf security + bootstrap 5.2 + fontawesome 5.8.2 + 한국어 폰트 설정

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.w3.org/1999/xhtml">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.98.0">

    <link rel="icon" href="data:;base64,iVBORw0KGgo=">

    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- font-awesome -->
    <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
    />
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">

    <style>
    input::-webkit-inner-spin-button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    }


    .font01 {
        font-family: 'Noto Sans KR', sans-serif;
      }

      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>
</head>

<body class="font01">
<div th:replace="fragments/navbar :: navbar"></div>

<div layout:fragment="content"></div>

<footer th:replace="fragments/footer :: footer"></footer>

<div th:replace="fragments/commonScript :: commonScript"></div>
</body>
</html>

templates/fragments/commonScript.html 작성

JS를 가장 마지막에 두어야 사용자 만족도가 높으므로 따로 분리해서 작성

footer, header, navbar 등도 이와 같이 작성하면 된다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<div th:fragment="commonScript">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
</div>

</body>
</html>

content에 들어갈 부분 작성

layout:fragment="content"라고 명시된 tag의 시작과 끝이 layout.html의 layout:fragment="content"에 들어가게 된다.

content라는 이름을 가질 필요는 전혀 없음

<!DOCTYPE html>
//layout 기능을 사용할것을 명시
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
//layout의 위치를 정의. 
      layout:decorate="~{layouts/layout.html}">
<head>
    <title>회원가입 완료</title>
</head>
<body>
//content 시작
<div layout:fragment="content">
<h1>회원가입이 완료되었습니다.</h1>
</div>
//content 끝
</body>
</html>

'etc > CHEAT SHEET' 카테고리의 다른 글

타임리프 문법 및 사용 방법 (0)	2022.05.24

일	월	화	수	목	금	토
			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	31

xor eax, eax

티스토리 뷰

타임리프 기본 설정

타임리프 기본 설정

레이아웃 작성하기

'etc > CHEAT SHEET' 카테고리의 다른 글

티스토리툴바