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
'FRONT' 카테고리의 다른 글
| [React] 리액트 컴포넌트 만들기(기본) (0) | 2023.07.17 |
|---|---|
| [React] Git Bash를 이용하여 리엑트 실행 및 리엑트 파일 만들기 (0) | 2023.07.14 |
| [Thymeleaf] 타임리프 란? (0) | 2023.07.10 |
| [JavaScript 자바스크립트] - 현재 날짜, 시간 가져오기 (2) | 2022.09.23 |
| [JavaScript 자바스크립트] let, const, var의 모든 것 (0) | 2022.08.09 |