https://magicmk.tistory.com/31
spring boot 게시판 - 4 <spring security form login 구현>
https://magicmk.tistory.com/29 spring boot 게시판 - 3 https://magicmk.tistory.com/28 spring boot 게시판 - 2 https://magicmk.tistory.com/25 Spring boot 게시판 - 1 < 간단 회원 가입 구현> 시스템 구성 Spring boot 2.7.5 Gradle Java 11 Inte
magicmk.tistory.com
지난 시간에 열심히 삽질해서 login을 구현했으니 이번에는 쉬어가는 느낌으로 프론트 쪽
thymeleaf 템플릿의 layout을 적용 해봤다.
✅ thymeleaf 디렉토리 구조
templates 디렉토리 아래에 위와 같은 구조로 진행한다.
✅ layout 구성
⏹️ bulid.gradle
layout 구성 전에 라이브러리를 추가해야 사용할 수 있다. 아래 내용을 추가한다.
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
⏹️ default.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
th:with="lang=${#locale.language}" th:lang="${lang}">
<head>
<th:block th:insert="layout/fragments/head :: headFragment"></th:block>
</head>
<body>
<header th:replace="layout/fragments/header :: headerFragment"></header>
<div layout:fragment="content"></div>
<footer th:replace="layout/fragments/footer :: footerFragment"></footer>
</body>
</html>위와 같이 기본적으로 그려질 layout을 그려둔다.
⏹️ head.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headFragment">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
</html>default.html에서 작성한 fragment의 이름과 동일하게 맞춰주고 공통적으로 쓰일 head 부분을 작성한다.
body는 필요 없으니 생략
⏹️ 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>
</html>header와 footer도 마찬가지
이렇게까지만 작성하면 공통적으로 사용하는 layout은 완성이다.
⏹️ content.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default}">
<head>
<title>Home</title>
<!-- 원하는 내용을 더 넣어도 무방 -->
</head>
<body> <!-- body 없어도 무방 -->
<div layout:fragment="content">
이곳에 원하는 내용을~
</div>
</body>
</html>layout을 사용할 html에서 위와 같이 layout을 적용해주고 head와 body 부분에 개별적으로
원하는 내용을 작성하여 넣어준다.
✅ 끝
지금은 큰 내용이 없어서 layout을 적용해도 별 감흥이 없지만 나중에 디자인이 들어가면
layout이 빛을 발할 것 같다.
https://github.com/Kimmingki/board
GitHub - Kimmingki/board: 강의만 듣다 때려치우지 말고 조금씩이라도 개발해보자...!!
강의만 듣다 때려치우지 말고 조금씩이라도 개발해보자...!! Contribute to Kimmingki/board development by creating an account on GitHub.
github.com
'Java > Spring Boot 게시판' 카테고리의 다른 글
| spring boot 게시판 - 7 <회원 정보 수정 및 탈퇴> (2) | 2022.11.24 |
|---|---|
| spring boot 게시판 - 6 <bootstrap 적용하기> (0) | 2022.11.22 |
| spring boot 게시판 - 4 <spring security form login 구현> (0) | 2022.11.18 |
| spring boot 게시판 - 3 <패스워드 암호화, 회원 목록 조회> (0) | 2022.11.11 |
| spring boot 게시판 - 2 <회원 중복 체크 및 유효성 검사> (0) | 2022.11.11 |