728x90
반응형
HTML 코드로 화면을 구현하다 보면 매 페이지마다 중복된 부분이나 정보등이 필요한 경우가 있다.
공통 메뉴나 정보 등을 매번 적지 않고 사용하고자 할 때 Thymeleaf에서 지원하는 도구가 Fragement 이다.
먼저 HTML파일을 만들고
Thymeleaf를 사용한다는 선언으로 html 태그에 xmlns:th="http://www.thymeleaf.org"를 추가한다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">fragment로 만들고 싶은 요소의 태그에
th:fragment="이름"
을 삽입한다.
<head>태그에 삽입한 예
<head th:fragment="fragment-head">
........
</head>
<div> 태그에 삽입한 예
<div th:fragment="fragment-nav">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-2">
....
</nav>
</div>
<footer>태그에 삽입한 예
<footer th:fragment="fragment-footer" class="footer">
<div class="col-md-12">
© 2020 BGSMM
</div>
</footer>
th:replace="[파일 경로 :: 조각 이름]"
<head th:replace="fragments/common :: fragment-head">
...........
</head>
<body>
<div class="container">
<div th:replace="fragments/common :: fragment-nav">-- thymeleaf header will be inserted here.</div>
........................
</div>
</body>
<footer th:replace="fragments/common :: fragement-footer"> thymeleaf footer will be inserted here. </footer>서버 렌더링의 과정을 거치며 th:replace가 있는 부분이 해당 이름의 조각으로 대체된다.
th:insert="[파일 경로 :: 조각 이름]"
태그내로 조각을 삽입하는 방법이다.
<div th:insert="~{/test/footer :: Fragment-footer}"></div>728x90
반응형
'JAVA > SPRINGBOOT' 카테고리의 다른 글
| [SPRINGBOOT] RequestBody / RequestParam (0) | 2022.08.08 |
|---|---|
| [SPRINGBOOT] 스프링부트의 구조 (0) | 2022.07.25 |
| [SPRINGBOOT] 스프링부트 도구 설치 (0) | 2022.07.08 |
| [SPRINGBOOT] 스프링부트 맛보기 (0) | 2022.07.07 |
| [SPRINGBOOT] 빌드관리도구 maven 과 gradle (0) | 2022.06.26 |