티스토리 뷰

화면 템플릿/타임리프(Thymeleaf)

화면 Template Layout 설정

토마's 2017. 2. 12. 22:29

안녕하세요.

지난 시간 타임리프 화면 템플릿 설정 방법에 대해서 알아봤습니다. 그것을 토대로 오늘은 화면 레이아웃을 설정하는 법을 포스팅 하겠습니다.

타임리프( Thymeleaf )에서 Page 레이아웃을 만드는 방법은 몇 가지 방법이 있는데 오늘 사용하는 방법은 Thymeleaf Layout Dialect를 이용해서

레이아웃을 만들어보겠습니다.

먼저, Views 폴더 밑에 layout 폴더와 fragments 폴더를 만들어줍니다.

그리고 만들어진 layout 폴더 밑에 default.html을 다음과 같이 생성해줍니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:replace="fragments/config :: configFragment"></head>
  <header th:replace="fragments/header :: headerFragment"></header>
  <div layout:fragment="content"></div>
  <footer th:replace="fragments/footer :: footerFragment"></footer>
</html>

 

그리고 fragments 폴더 밑에 다음과 같이 config.html, hearder.html, footer.html을 생성하고, home.html을 수정합니다.

 

 

== confing.html 영역 ==

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head th:fragment="configFragment">
  <meta charset="UTF-8" />
  <!-- 공통으로 쓰이는 css파일을넣는다.-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <!-- 사용자 CSS 영역이 들어감 -->
  <th:block layout:fragment="css"></th:block>
  <!-- 공통으로 쓰이는 css파일을넣는다.-->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- 사용자 스크립트 영역이 들어감 -->
  <th:block layout:fragment="script"></th:block>
  </head>
</html>

 

 

== header.html 영역 ==

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <header th:fragment="headerFragment">
  헤더 영역입니다.
  </header>
</html>

 

== footer.html 영역 ==

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <footer th:fragment="footerFragment">
    Footer영역입니다.
  </footer>
</html>

 

== home.html을 다음과 같이 수정합니다. ==

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/default">
  <head>
  <meta charset="UTF-8" />
  <title>Insert title here</title>
  </head>

  <!-- 사용자 CSS 추가 -->
  <th:block layout:fragment="css">
  </th:block>

  <!-- 사용자 스크립트 추가 -->
  <th:block layout:fragment="script">
  </th:block>

  <div layout:fragment="content">
    Hello World..!!
    <br />
    <th:block th:text="${serverTime}"></th:block>
  </div>
</html>

 

그러면 다음과 같은 파일 구조를 확인할 수 있습니다.

 

그리고 나서 제대로 설정이 되었는지 확인하기 위해서 서버를 켜고 localhost:8080/example로 접속하면 다음과 같은 화면이 나오면 잘 설정하신겁니다.

 

이상으로 타임리프 레이아웃을 설정하는 포스팅을 마치도록하겠습니다. :)