FRONT

[Thymeleaf] header footer side 나누기 (타임리프 기반)

dbelleloper 2023. 7. 13. 13:48
728x90

 

1. 타임리프와 레이아웃을 위한 Dependency gradle에 추가

    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.0.0'

 

 

2. 각각 footer.html, header.html, side.html 에 원하는 UI를 코딩

 

 

3. layout.html을 만들어 공통적으로 사용하는 레이아웃 만듬

 

 -- <div th:replace="~{layouts/header :: header}"></div>

     : ~{경로 :: 템플릿조각 이름}와 같이 사용하면 된다.

      (ex) th:fragment="footerFragment" -> 템플릿조각이름 : footerFragment)

 

 -- <div layout:fragment="content"> 공통 레이아웃 </div>

     : layout:fragment="content"는 해당 layout을 사용하는 content의 내용을 불러오겠다는 의미

 

 --  최상단 html태그 안에 namespace 정의

    : <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="ko">

 

 

4. 본문 페이지 작성

 -- html태그에 layout:decorate 추가

    : layout:decorate="~{layouts/layout}"

 

ex) <html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layouts/layout}"
 >

 

728x90