템플릿 조각은 미리 만들어 놓은 특정 태그를 불러다 쓸 수 있는거. 왜 웹페이지마다 같은 사이트라면 nav, main menu, footer 등 중복되는 부분이 있는데 그걸 미리 그 부분만 정의해둔다음에 가져다 쓰는거임.
@Controller
@RequestMapping("/template")
public class TemplateController {
@GetMapping("/fragment")
public String template(){
return "/template/fragment/fragmentMain";
}
}그냥 호출
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
</body>
</html><div th:insert="~{경로 :: 조각이름}">
insert는 안에다 넣는거, replace는 대체.
div th:insert면 이 div 안쪽으로 넣는거임.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>
</body>
</html>저렇게
<태그명 th:fragment="copy">
~~
<닫는태그>
이렇게 하면 다른 곳에서
<div th:insert="~{저footer있는경로 :: copy}">
쓰면 저거 가져다 쓰는거임.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div><footer>
푸터 자리 입니다.
</footer></div>
<h2>부분 포함 replace</h2>
<footer>
푸터 자리 입니다.
</footer>
<h2>부분 포함 단순 표현식</h2>
<footer>
푸터 자리 입니다.
</footer>
<h1>파라미터 사용</h1>
<footer>
<p>파라미터 자리 입니다.</p>
<p>데이터1</p>
<p>데이터2</p>
</footer>
</body>
</html>실행 후임.
insert로 안에 들어간거 확인,
replace는 교체된걸로 확인.
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>이렇게 인자도 받을 수 있음.
<태그명 th:fragment="조각명(변수명1, 변수명2)">
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div><태그명 th:조각메소드="~{경로 :: 조각명(값1, 값2)}">
~{경로 :: 조각이름(인자)}
이게 조각 표현식임 ~{ }
'스프링 > 4. 스프링 MVC-2' 카테고리의 다른 글
| 16. 레이아웃 템플릿 확장 (0) | 2023.08.26 |
|---|---|
| 15. 템플릿 레이아웃 (0) | 2023.08.25 |
| 13. 타임리프 상에서 자바스크립트 사용 (0) | 2023.08.24 |
| 12. 타임리프 블록 (0) | 2023.08.23 |
| 11. 타임리프 주석 (0) | 2023.08.23 |