01. Thymeleaf 뷰 템플릿 사용
01) 타임리프의 특징
- *.html의 확장자를 사용.
- 별도의 레이아웃 프레임워크의 도움 없이 레이아웃을 관리할 수 있음.
- 스크립트릿이 아닌 HTML 문법으로 JAVA 데이터를 처리할 수 있음.
02) Thymeleaf prefix, suffix 정의
- Thymeleaf 파일을 어디서 관리할 것인지 application.properties에 정의해야 함.
03) 레이아웃 정의
- src/main/resources의 templates 패키지 안에 뷰 파일을 생성.
- 참고로 static 폴더에는 js, css 등과 같이 변하지 않는 정적 파일들을 관리함.
- tempaltes 패키지 안에 layout 패키지를 만들고, 안에 default_layout.html 파일을 생성함.
- default_layout.html에 다음 내용 작성.
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!--/* 이곳에 각 view가 위치합니다. */-->
<th:block layout:fragment="head"></th:block>
<div>
<div layout:fragment="header"></div>
<div layout:fragment="content"></div>
<div layout:fragment="footer"></div>
</div>
</html>
- 레이아웃은 head, header, content, footer로 이루어지도록 구현함.
- head에는 title 태그, css등을 포함할 예정.
- html에서 xmlns 정의가 없으면 타임리프 문법을 사용할 수 없음.
- 기존의 Spring에서의 tiles 프레임워크 같은 복잡한 절차가 필요하지 않음.
- 다음은 공통으로 사용될 header와 footer 파일 정의.
04) 공통 레이아웃 요소 정의
- templates 패키지에 fragments 패키지를 생성하고 header.html, footer.html 파일 생성 후 다음 코드 작성.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.w3.org/1999/xhtml">
<div class="header">
<h2>Header</h2>
</div>
</html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<div class="footer">
<h2>Footer</h2>
</div>
</html>
05) content 작성
- 초기 페이지 home.html을 작성하고 아래 내용 작성.
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml"
xmlns:sec="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<th:block layout:fragment="head">
<title>Home</title>
<!--/* css */-->
<link th:href="@{/css/common.css}" rel="stylesheet" />
</th:block>
<body>
<th:block layout:fragment="header" th:include="@{/fragments/header}">
<h1>Home Page</h1>
</th:block>
<div layout:fragment="content" class="content">
<h1>Content</h1>
</div>
<th:block layout:fragment="footer" th:include="@{/fragments/footer}"></th:block>
</body>
</html>
- 위 코드에서 가장 중요한 부분은 html 태그의 layout:decorate 요소임.
- 레이아웃 소스코드를 어떤 것으로 지정할 것인지를 정의하는 요소로, 위에서 사용하는 레이아웃 파일은 layout 폴더의 default_layout 파일이므로 layout/default_layout이라 정의함.
- 레이아웃에서 정의한 head, header, content, footer에 대한 정의를 <th:block layout:fragment="요소 명"></th:block> 형태로 작성함.
- header와 footer는 fragments에서 정의한 파일들을 include 하고 있음.
- 다음으로는 home.html를 요청하면 default_layout.html에서 정의한 형태로 view가 렌더링되어 브라우저에 출력됨. 그전에, 위에서 정의한 각 레이아웃 요소들을 구별하기 쉽게 간다한 CSS 파일 추가.
- static 폴더에 css 폴더를 생성하고 common.css라는 이름의 파일을 생성하고 다음 코드 작성.
body, html {
height: 100%;
}
.header {
background-color: Gray; height: 20%
}
.content {
height:60%;
}
.footer {
background-color: yellow; height: 20%
}
06) Controller 통해 실행하기
- 만들던 프로젝트에 home.html을 매칭 시켜놓고 페이지 접속하면 다음과 같이 레이아웃이 적용되어 있음.
