FE/html

[Thymeleaf] th:fragment | th:replace | th:insert

잔망루피 2022. 2. 14. 18:59
th:fragment 반복되는 코드를 재사용
ex) th:fragment="head(title)"
fragment 이름이 head(title)
th:replace 현재 태그를 fragment 태그로 교체
ex) th:replace="fragments/common :: head('게시판')"
fragments폴더의 common파일에서 head('게시판') fragment를 가져와 교체
th:insert 태그 안에 내용 삽입

 

 

<head th:fragment="head(title)">
    <!-- 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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>

        body {
    padding-top: 5rem;
}
.starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
}
    </style>
    <title th:text="${title}">Board</title>
</head>

fragments/common.html에서 fragment

이 fragment는 다른 html의 공통 head로 쓸것이다.

 

 

<head th:replace="fragments/common :: head('게시판')">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>Board</title>
    <style>
       html,body { height: 100%; }

       body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-register {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }

        .form-register .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-register .label{
            text-align : left;
            margin-bottom : 10px;
        }
    </style>
</head>

처음에는 이렇게 head에 th:replace를 쓰니까 이 head에 작성한 것들은 다 사라진다. (문제점)

th:replace는 말그대로 지정한 fragment로 바꿔치기

head 자체에 th:replace를 쓰면 가져온 것만 적용된다.

 

 

🐝 해결

<head>
    <div th:replace="fragments/common :: head('게시판')"></div>
    <style>
       html,body {
            height: 100%;
            box-sizing: border-box;
        }

        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        .form-find {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }

        .form-find .form-control {
            position: relative;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-find .group{
            width : 300px;
            text-align : left;
            margin-bottom : 10px;
        }
    </style>
</head>

head 태그 안에 <div th:replace="fragments/common :: head('게시판')"></div>를 쓰니까 해결

fragment와 추가한 내용 모두 반영할 수 있게 됨

 

 

<head>
    <head>
    <title>게시판</title>
    <!-- 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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        body {
    padding-top: 5rem;
}
.starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
}
    </style>
</head>
    <style>
       html,body {
            height: 100%;
            box-sizing: border-box;
        }

        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        .form-find {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }

        .form-find .form-control {
            position: relative;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-find .group{
            width : 300px;
            text-align : left;
            margin-bottom : 10px;
        }
    </style>
</head>

다음과 같은 HTML 소스 코드 결과가 나온다.

 

 

👇 참고

https://stackoverflow.com/questions/31451830/head-and-title-in-thymeleaf

 

Head and Title in Thymeleaf

I'm a Thymeleaf beginner. I started with a common layout page: fragments/layout.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:fragment="headerFragment"&g...

stackoverflow.com

 

https://www.baeldung.com/spring-thymeleaf-fragments

 

http://progtrend.blogspot.com/2019/05/thymeleaf.html

 

Thymeleaf 간단 매뉴얼

간략한 Thymeleaf 문법 설명과 예제 모음

progtrend.blogspot.com

 

반응형

'FE > html' 카테고리의 다른 글

[Error] 부트스트랩 dropdown이 안 될 때  (0) 2022.04.01
[Thymeleaf] 글 작성자에게만 수정, 삭제 버튼 보이기  (0) 2022.03.29
[Error] form 전송시 서버에 null이 들어온다  (0) 2022.02.08
[CSS] div 태그로 사각형 그리기  (0) 2022.02.07
form onsubmit  (0) 2022.01.20

'FE/html'의 다른글

  • 현재글[Thymeleaf] th:fragment | th:replace | th:insert

관련글

티스토리툴바