JSP에서 include를 써보았다면 같은 맥락으로 이해하면 좋은 라이브러리,
thymeleaf template layout를 통해 편리하게 구역을 나눌 수 있다.
이 템플릿엔진을 통해 구역을 나눠주면 화면을 관리하기에 훨씬 편해서 사용해보기로 했다.
1. 디렉토리 구성과 전체 구상도
전체 디렉토리 구조 :
이런식으로 폴더를 추가해주는데
자신의 용도에 따라 레이아웃을 구분하고 구현 할 수 있으며
쓰는 용도에 따라 nav 등을 추가할 수 있다.
전체 구상도 :
이렇게 세가지 구역으로 나눌 것이고,
header와 footer는 고정하고, content영역만 바꿔낄 수 있게 해줄 예정이다.
2. 디펜던시 추가
<!-- thymeleaf layout -->
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
2. 전체 코드 및 설명
** 참고로 Thymeleaf template layout 예제에서 자주 나오는 config.html을 추가하면 에러가 나는 것 같다.
이대로 진행해보는 것을 추천TT
footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footerFragment">
<div>
Footer
</div>
</footer>
</html>
header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:fragment="headerFragment">
<div>
header.html
</div>
</header>
</html>
content.html
<!DOCTYPE html>
<html
xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="~{layout/layout}">
// 해당 html페이지에서만 사용할 css, script
<th:block layout:fragment="css"> </th:block>
<th:block layout:fragment="script"> </th:block>
<div layout:fragment="content">
<div>
content.html
</div>
</div>
</html>해당 content페이지에서만 사용할 css와 script가 있는 경우는 저렇게 추가하면 된다.
layout:fragment="content"를 통해서 '이 부분이 content영역이야.' 라고 인식시키는 것 같다.
layout.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.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>
// 전체적으로 사용할 css, script
<link rel="stylesheet" type="text/css" href="/css/project.css">
<script src="/js/project.js" defer></script>
</head>
<header th:replace="fragment/header :: headerFragment"></header>
<div layout:fragment="content"></div>
<footer th:replace="fragment/footer :: footerFragment"></footer>
</html>
유심히 보면 해당 라이브러리의 전체 구조는
layout (content, header, footer) 이렇게 layout 안으로 맞춰들어가는 구조이다.
<header th:replace="fragment/header :: headerFragment"></header>
<div layout:fragment="content"></div>
<footer th:replace="fragment/footer :: footerFragment"></footer>
fragment/header, fragment/footer를 치환한다고 replace가 쓰여져 있는 구문을 보니,
우리가 만들어진 header.html과 footer.html가 이 자리에 들어간다고 이해하면 될 것같다.
그리고 content는 앞선 content.html의 layout:fragment="content"가 자리잡는다.
전체적으로 사용할 css, js파일도 추가해주었다.
** 근데 한글깨짐 현상이 일어났다.
layout.html에만 추가하면 당연히 되는 부분인데 깨지길래 결국 전체파일에 UTF-8을 추가했다.
<head>
<meta charset="UTF-8"/>
</head>
혹시 한글이 지속적으로 깨진다면 이 부분을 추가
초기세팅2까지 완료한 소스는 여기에서 확인 !
github.com/yulfsong/tistory-code/tree/master/second
yulfsong/tistory-code
Contribute to yulfsong/tistory-code development by creating an account on GitHub.
github.com
'프로그래밍 > 프론트엔드 방랑기' 카테고리의 다른 글
| [ Vanilla JS] 자바스크립트만으로 To do List 만들기 (0) | 2021.01.16 |
|---|---|
| [Spring boot+css+html(Thymeleaf)+Js] 초기 세팅하기1 (0) | 2021.01.10 |
