안녕하세요,
오늘은 Layout기능을 이용하여 화면구성을 해보려고 합니다.
보통 프로젝트를 하다 보면 페이지별로 디자인을 모두 새로하지는 않으실 겁니다.
하지만 페이지별로 복붙을 통해 구현하기에는 추후에 관리가 너무 힘들어지죠..
이럴때 쓰는게 공통양식을 만들어 놓고 불러오는 방식을 활용하게 됩니다.
JSP에서는 include를 이용하면 되는데 Thymeleaf에서는 또 다르더라고요.
그래서 그 방법에 대해 정리해보려고 합니다.
1. 레이아웃을 위한 Dependency 추가
implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect')
저번에 타임리프를 위한 Dependency외에 위의 gradle을 추가해 줍니다.
2. 공통 양식 페이지 제작
만약 공통 레이아웃이 그림과 같은
상단 레이아웃 및 사이드바가 들어가는 형태라고 가정하고 만들어보겠습니다
관리자 페이지가 주로 저런형태를 띄우곤 하는데
상단 레이아웃과 사이드바를 공통으로 매 페이지마다 띄우고
본문을 각 페이지에 맞게 적어주고 싶은 경우입니다.
그러면 아래와 같이 공통양식 코드를 짜시면 됩니다.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="mainHeader">
...Title 등의 헤더 코드 넣기
</head>
<body>
<div class="container-fluid">
<!--상단 바 -->
..필요한 코드 넣기
<!--사이드 바-->
..필요한 코드 넣기
<div layout:fragment="content">
공통 레이아웃
</div>
</div>
</body>
</html>공통양식 레이아웃 페이지 작성 과정을 정리하면 다음과 같습니다.
2.1 NameSpace를 정의
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">먼저 최상단 html태그 안에 namespace를 정의해줍니다.
2.2 공통양식 코드 작성
필요한 코드들을 작성하고 본문 영역을 따로 남겨놓습니다.
(이 단계에서 head태그 안에 부트스트랩이나 JQuery CDN 등의 작업을 해놓으면 다른 페이지에서 일일이 적어주지 않아도 되니 편리합니다)
<div layout:fragment="content">
공통 레이아웃
</div>
저의 경우에는 위 부분이 매 페이지마다 내용이 교체될 본문영역이 되겠습니다.
3. 본문 페이지 작성
본문페이지의 경우 아래와 같이 진행하시면 됩니다.
3.1 html 태그에 layout:decorate 추가
layout:decorate="~{cmmn/adminLayout}"html 태그에 위와 같이 작성하여 방금 만들었던 공통양식의 경로를 적습니다.
저의 경우 공통 레이아웃 파일명이 adminLayout.html이고 경로가
프로젝트 폴더/src/main/resources/templates/cmmn/adminLayout.html
이렇게 되있어서 저렇게 적었지만 여러분들은 자신의 경로명에 맞게 적어주시면 됩니다.
(기본적으로 따로 설정을 해주지 않는다면 thymeleaf는 resources밑의 templates 폴더 하위부터 경로를 탐색합니다)
3.2 본문영역 추가
<div layout:fragment="content">
본문입니다
</div>본문 내용을 이제 맞게 적어주시면 됩니다.
단 이 때, 2.2에서 작성했던 교체할 프래그먼트의 이름이 같아야합니다!
위 과정을 종합한 본문 페이지는 다음과 같습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{cmmn/adminLayout}">
<body>
<div layout:fragment="content">
본문입니다
</div>
</body>
</html>
4. 결과 페이지
공통 양식과 본문페이지를 만들었다면
Controller 로직을 만든 뒤(해당 포스팅에서는 생략합니다) 돌려보면 다음과 같이 결과물이 뜨게됩니다.
이상으로 Thymeleaf Layout만들기 포스팅을 마치겠습니다.
잘 안되시는 부분이나 지적할 부분이 있으시면 알려주시면 감사드리겠습니다!:D
'Backend > Thymeleaf' 카테고리의 다른 글
| Thymeleaf를 이용한 웹 개발 소개 및 기능 (0) | 2023.02.27 |
|---|---|
| [Thymeleaf]게시판 Table에서 Paging 적용하기(SpringBoot) (2) | 2020.08.04 |
| [Thymeleaf]ajax 사용법 및 예제(SpringBoot) (7) | 2020.07.23 |
| [Thymeleaf] Thymeleaf의 기본 문법 정리(SpringBoot) (0) | 2020.07.20 |
| [Thymeleaf] SpringBoot에 Thymeleaf 적용하기 (1) | 2020.07.17 |
