반응형
타임리프 - 템플릿 레이아웃(1)
이번에는 코드 조각을 레이아웃에 넘겨 사용하는 방법에 대해 공부한다.
강의 자료에서 예를 잘 들어 주었는데 <head>에 공통으로 사용되는 css, JS 정보 중 공통되는 부분을 모아두고 필요에 따라 추가해 사용하는 것이다.
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">레이아웃 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}">
</script>
<!-- 추가 -->
<th:block th:replace="${links}" />
base.html이다.
공통적인 부분은 이렇다.
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>메인 타이틀</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
layoutMain.html이다.
여기에서 넘겨주는 것이다.
template/layout/base :: common_header(~{::title},~{::link}) 이 라인이 핵심인데 common_header를 불러주면서 옆에 title와 link를 담아 전달한다. 그러면 base.html에서 받고 렌더링하고 추가되는 부분도 맞추어 값을 전달하게 된다.
이렇게 되면 메인 타이틀이 전달한 부분으로 교체되고 공통 부분은 유지되며 추가 부분에 전달한 <link>들이 포함되는 것을 확인할 수 있다.
즉, 레이아웃 개념을 두고 그 레이아웃에 필요한 코드 조각을 전달해 완성한다고 보면 된다.
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 참고하여 공부하였습니다.
반응형
'Framework & Library > Spring Boot' 카테고리의 다른 글
| [Spring Boot] : 타임리프 스프링 통합 메뉴얼 및 스프링에서 사용하기 (0) | 2022.02.08 |
|---|---|
| [Spring Boot] : 타임리프 템플릿 레이아웃(2) (0) | 2022.02.07 |
| [Spring Boot] : 타임리프 템플릿 조각 사용 (0) | 2022.02.07 |
| [Spring Boot] : 타임리프 JavaScript inline 사용 (0) | 2022.02.07 |
| [Spring Boot] : 타임리프 block 사용 (0) | 2022.02.07 |
댓글