반응형
Fragment 이용하기
Html을 이용해 화면을 그리다 보면 항상 중복된 메뉴나 정보등을 나타내고자 하는 경우가 생깁니다.
위의 그림과 같이 중복된 메뉴나 정보등을 나타낼때 Thymeleaf에서 지원하는 도구가 "Fragment" 입니다.
먼저 menu.html에 화면 상단에 들어갈 코드를 준비합니다.
<body>
<div th:fragment="header">
<a href="www.a.com">a Page</a>
<a href="www.b.com">b Page</a>
</div>
</body>이후에 info.html에 들어갈 코드도 준비합니다.
<body>
<div th:fragment="info">
이 페이지는 관리자 페이지 입니다.
</div>
</body>이 후에 view1.html에 menu 부분과 info 부분을 작성합니다.
<body>
<div>
<div th:replace="fragment/menu :: menu">여기는 menu</div>
<div>
여기는 view1.html 페이지 입니다.
</div>
<div th:replace="fragment/info :: info">여기는 info</div>
</div>
</body>여기서 th:replace란?
현재 페이지에 작성된 dom의 내용을 치환 한다는 의미입니다.
fragment/info :: info를 해석해 보겠습니다.
fragment/info는 info.html을 이야기 합니다. 그리고 "::" 뒤에 오는 info는 info.html에서 th:fragment="info"를 이야기 합니다.
그럼 응용 해서 만약 info.html에 th:fragment="info_user"가 있고 이 dom을 fragment로 정의 하고 싶다면 어떻게 될까요?
<body>
<div>
<div th:replace="fragment/menu :: menu">여기는 menu</div>
<div>
여기는 view1.html 페이지 입니다.
</div>
<div th:replace="fragment/info :: info_user">여기는 info_user</div>
</div>
</body>이렇게 간단하게 위에 예시로 나와있는 그림과 동일한 구조를 만들 수 있습니다.
감사합니다.
반응형
'Spring Boot > Thymeleaf' 카테고리의 다른 글
| Thymeleaf #1 [문법 정리] (0) | 2020.06.17 |
|---|---|
| Thymeleaf #0 (0) | 2020.06.16 |