도담도담

Thymeleaf 레이아웃 본문

IT 공부/KH 정보교육원

Thymeleaf 레이아웃

Zinisang 2021. 7. 9. 19:53

레이아웃 두 가지 방법을 지원

 

1. JSP 의 include와 같이 특정 부분을, 가져와서 포함 시키는 형태

th:insert : th:~~ 의 바깥쪽 태그는 유지하면서 태그의 시작과 끝 내부에 삽입하는 방식
th:replace : 기존 내용을 대체하는 방식

 

2. 특정부분을 파라미터 형태로 전달하여 내용에 포함하는 형태.

th:fragment

 

그 외 

th:block : HTML 의 <div></div> 역할을 하는 Thymeleaf 지원 태그


*참고 : 기존 버전에는 th:include 가 있었지만, 3.0 버전 이후로는 사라진다.

 

include 방식

포함되는 쪽 HTML

1. 일부분만 포함되는 HTML
해당 시작 태그 내에
th:fragment="이름"
"이름"은 포함하는 HTML 쪽에서 사용할 이름

예) 밑의 내용을 기준으로 할때,

<div th:fragment="insert1">
	<a href="#">test</a>
</div>


일부분만 포함하는 HTML

<div th:replce="~{/포함되는 파일의 경로/포함되는 파일명} :: fragment이름"></div>

<div th:replce="~{/포함되는 파일의 경로/포함되는 파일명} :: insert1"></div>

 

fragment이름 : 포함되는 파일에 설정이 되어 있어야 한다.


=> 위의 태그가 아래 태그로 변경

<div th:fragment="insert1">
	<a href="#">test</a>
</div>


=> 위의 태그가 아래 태그에 삽입

<div>
	<div th:fragment="insert1">
		<a href="#">test</a>
	</div>
<div>



2. 전체가 포함되는 HTML

<!DOCTYPE html>
<html></html>
<head></head>
<style></style>
<script></script>
<body></body>

 

이 태그들을 포함하지 않는다!

삽입 또는 대체를 결정

<th:block th:replce="~{/포함되는 파일의 경로/포함되는 파일명}"></th:block>

또는

<div th:replce="~{/포함되는 파일의 경로/포함되는 파일명}"></div>

 

파라미터 처리 방식

 

파라미터 선언

<th:fragment="target(파라미터1,파라미터1)">

 

파라미터 사용

<th:replace="~{/경로/파일명} :: target( 전송할 태그 아이디, 전송할 태그 아이디 )}">

 

파라미터를 전송 하는 HTML 

=> 전송 

    => 파라미터를 전송 받는 HTML 

        => 전송받은 내용 수정 

            => 파라미터를 전송 하는 HTML

 

 

'IT 공부 > KH 정보교육원' 카테고리의 다른 글

파이널 프로젝트 시작  (0) 2021.07.14
쿼리메서드  (0) 2021.07.10
thymeleaf 내용정리  (0) 2021.07.08
Spring Data JPA 개념  (0) 2021.07.07
프레임워크 구분  (0) 2021.07.02
'IT 공부/KH 정보교육원' Related Articles more
Comments