[참고]
김영한님 스프링 강의를 바탕으로 진행되는 토이프로젝트의 과정을 기록하는 글입니다.
둥근 피드백은 언제나 환영입니다.
[오늘의 개발내용]
1. 타임리프 레이아웃 적용하기
전체 타임라인의 화면이 얼추 구성이 되었다.
그런데 최 하단에 위치한 footer의 경우 모든 화면에서 따라다니는 footer라서 모든 html 에 footer를 넣는 것은 아주 비효율적임. (하나 만들어 놨으니 매번 넣으려면 넣을 수 있지만..! 나중에 footer에 무언갈 수정해야 한다면? 모든 Html 의 footer를 수정해야 함. 생각만해도 끔찍...!)
예전에 Spring, JSP 조합을 쓸 때는 타일즈(Tiles) 라는 레이아웃 프레임워크를 썼어서 그걸 그대로 사용해볼까 했지만, 타임리프의 경우 '타임리프 레이아웃' 기능으로 충분히 구현 가능하다길래 이번엔 '타임리프 레이아웃'을 사용해보기로 함!
1. 타임리프 레이아웃 사용할 수 있게끔 적용하기
1) build.gradle 화면을 연다.
2) dependencies 에 아래와 같이 추가함!
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'- 첫번째 줄은 타임리프 적용이고, 두번째 줄은 타임리프의 레이아웃 적용이다.
- 나는 기존에 타임리프는 적용한 상태라 두번째 줄만 추가해주긴 했음.
(+) 입력하고 저장만 하지 말고 Gradle을 Reload 해주자!
여기까지 한다면 타임리프 레이아웃을 사용할 준비 끝!
2. footer, layout, config 디렉토리 및 Html 생성
먼저 기본적인 디렉토리 및 Html 부터 생성해줌.
참고로 타임리프를 적용하면 templates 가 루트 디렉토리로 지정되어 타임리프 관련된 경로를 적을 때는 templates 아래로 작성해주면 된다.
그래서 나도 Templates 아래로 common이라는 디렉토리를 만들어 config, footer, layout이라는 빈 html을 먼저 만들었는데
- config : 공통적으로 Import 되는 CSS, JS 등을 넣어둘 곳
- footer : 말 그대로 푸터의 내용.
- layout : 전체적인 레이아웃을 잡아주는 곳.
그럼 여기서 layout이 어떤 역할을 하는지 조금 더 들여다보자면
layout.html 안에 화면을 어떤식으로 구성할지 지정을 해주는 것임. 내가 그릴 레이아웃은 대충 이런 구조로 되어있는데
상단에 config.html 이 들어갈 거고, 본문이 중간, 하단에 Footer가 들어갈 것이라고 전체적인 레이아웃을 짜주는 곳이라고 생각하면 됨.
3. footer.html 만들기
나는 footer만 사용할 거라서 footer만 만들지만, header가 있으면 footer와 똑같은 방식으로 해주면 됨!
<html xmlns:th="http://www.thymeleaf.org" th:fragment="footer">Footer는 다른건 다 기존의 푸터와 동일하게 만들어주되, 맨 첫줄 html 부분을 윗 줄 처럼 추가해준다. 각각의 의미는 아래와 같다.
xmlns:th="http://www.thymeleaf.org" - 이 페이지에 타임리프 적용할거야
th:fragment="footer"- 이 페이지 전체를 footer라는 이름으로 정의 할거야
(+) 다른 분들이 적용하신 걸 많이 찾아봤는데 Div 에 th:fragment 를 주거나 하는 경우가 많았는데 나는 그냥 이 푸터 전체에 fragment를 주는 방법을 선택했다. Footer만 들어가는 css나 스크립트가 있다면 그것도 자유롭게 수정하고 싶어서!
3. content 만들기
content란 본문이 될 영역을 말하는데 본문이 될영역이 여러 개일테니까 일단 하나를 기준으로 만들어 보려고 함. 나의 경우는 전체 타임라인 목록이 되겠음.
1) 먼저 footer나 config에 들어갈 내용들을 모두 빼주고 (실수할수도 있으니 원본은 백업하자..!) 상단만 이렇게 바꿔주면 된다.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{common/layout}"
layout:fragment="content">
<head>
<title>timeline</title>
</head>
의미를 좀 뜯어보자면
xmlns:th="http://www.thymeleaf.org"- 이 페이지에 타임리프 쓸거야
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"- 타임리프 레이아웃도 쓸거야
layout:decorate="~{common/layout}"- 우리가 쓸 레이아웃 경로는 여기야.
layout:fragment="content">- 이 페이지는 content라고 명명할거야.
정도가 되겠다.
본문 페이지 역시 html 전체에 Fragment를 지정해주었음!
4. layout.html 만들기
이제 이모든 것을 조합할 layout이 있어야 겠지! layout.html 은 짧아서 전체 소스 다 가져옴.
<!DOCTYPE html>
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:replace="common/config :: config">
<!-- <title layout:title-pattern="$LAYOUT_TITLE : $CONTENT_TITLE">공통 타이틀</title>-->
</head>
<body>
<!-- content -->
<th:block layout:fragment="content"></th:block>
<!-- footer -->
<footer th:replace="common/footer::footer"></footer>
</body>
</html>
<head th:replace="common/config :: config">- common/config 위치에 있는 파일의 fragment가 config인 걸 head에 Import 할거야.
- (아까 config.html 파일에서 명명한 이름을 여기다가 쓰는 것.)
<th:block layout:fragment="content"></th:block>이 위치에다가 fragment가 content인 걸 head에 Import 할거야.
<footer th:replace="common/footer::footer"></footer>- common/config 위치에 있는 파일의 fragment가 footer인 걸 footer에 Import 할거야.
이렇게 맞춰주면 본문영역을 열어도 head와 Footer가 붙어 나옴!
[구현화면]
전 개발일지와 화면상으로 달라진건 없지만 앞으로 화면 작업할 때 훨씬 편리하게 작업할 수 있따~!
도움받은 블로그
https://oingdaddy.tistory.com/118#google_vignette
[Thymeleaf 시작 #4] Thymeleaf Layout 적용하기
이전 포스팅까지는 Thymeleaf 의 문법을 위주로 보았다면 이번에는 layout 을 구성하는 방법에 대해서 알아보겠다. 기존에는 tiles를 활용하여 이런 layout을 구성하고는 했는데 Thymeleaf를 사용해서도
oingdaddy.tistory.com
[Java/Library] Thymeleaf, Thymeleaf Layout 적용하기
해당 글에서는 Spring Boot에서 Thymeleaf에 대한 환경 구성을 하고 Thymeleaf Layout을 적용하기 위한 방법에 대해서 공유합니다. 1) 개발환경 💡 Thymeleaf Template / Thymeleaf Template Layout을 구성을 위한 개발환
adjh54.tistory.com
'💻 뚝딱뚝딱 > 북북클럽' 카테고리의 다른 글
| [개발일지#020] 타임리프 템플릿 레이아웃 이용하여 페이지마다 title 변경되도록 수정 (0) | 2024.03.05 |
|---|---|
| [개발일지#019] 타임라인의 최신수정일 컬럼 수정하기 (2) | 2024.03.04 |
| [개발일지#017] 하단 footer bar 만들기 (0) | 2024.02.01 |
| [개발일지#016] 전체타임라인 화면에 부트스트랩 템플릿 커스텀 및 적용하기 (0) | 2024.01.31 |
| [개발일지#015] 부트스트랩 템플릿 적용 준비하기 (0) | 2024.01.30 |
