-
[Spring Boot] Thymeleaf 반복되는 헤더, 푸터 레이아웃 적용하기Spring Boot 2022. 7. 6. 11:41
[Spring Boot/게시판 만들기] - 스프링 부트 프로젝트 생성하기
위의 과정을 통해 진행되는 프로젝트입니다.
📌 개발환경
IntelliJ Community, SpringBoot, Java 1.8, Gradle, Jar, Thymeleaf, JPA, MariaDB
Thymeleaf Layout
Header, Footer와 같이 공통적으로 반복되는 코드를 화면마다 작성하지 않고 레이아웃 처리를 통해 일괄 적용하며 본래의 콘텐츠 내용에 집중할 수 있게 도와준다.
Dependency 추가
build.gradle
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'HTML - /fragments/header.html
상단 부분에 반복적으로 들어갔던 영역을 작성한다.
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <th:block th:fragment="headerFragment"> <head> <title>Board List</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="/css/bootstrap.min.css"> <script src="/js/jquery-3.6.0.min.js"></script> <script src="/js/bootstrap.min.js"></script> </head> </th:block> </html>HTML - /fragments/footer.html
하단 부분에 반복적으로 들어갔던 영역을 작성한다.
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <th:block th:fragment="footerFragment"> <footer> <div class="mt-5"> <div class="text-center"> <p> <small class="text-muted">Copyright © Hnev.log Tistory Corp. All Rights Reserved.</small> </p> </div> </div> </footer> </th:block> </html>레이아웃 HTML - /layout/default_layout.html
분리한 화면들을 영역에 맞게 지정해준다.
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <th:block th:replace="fragments/header :: headerFragment"></th:block> <body> <th:block layout:fragment="content"></th:block> </body> <th:block th:replace="fragments/footer :: footerFragment"></th:block> </html>📌 본문 (적용하려는 HTML에 들어가는 내용)
1. html 태그에 레이아웃 설정을 해준다.
- xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
- layout:decorate="layout/default_layout"
2. th:block에 layout:fragment 설정을 한다.
- layout:fragment="content"
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="layout/default_layout"> <th:block layout:fragment="content"> [본문 작성 영역..] </th:block> </html>적용된 본문 HTML - /member/login.html
로그인 페이지 화면에 layout:fragment을 적용한다.
반복적으로 사용되었던 head 부분과 footer 부분이 layout으로 관리됨으로써 가독성이 좋아지고 유지보수성이 높아졌다.<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="layout/default_layout"> <th:block layout:fragment="content"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-5"> <div class="card shadow-lg border-0 rounded-lg mt-5"> <div class="card-header"> <h3 class="text-center fw-bold my-4">Login</h3> </div> <div class="card-body"> <form id="frmLogin" name="frmLogin" action="/login/action" method="post"> <div th:if="${param.error}"> <p th:text="${exception}" class="alert alert-danger"></p> </div> <div class="form-floating mb-3"> <input class="form-control" id="username" name="username" type="email" required> <label for="username">Email address</label> </div> <div class="form-floating mb-3"> <input class="form-control" id="password" name="password" type="password" required> <label for="password">Password</label> </div> <div class="form-check mb-3"> <input class="form-check-input" id="remember-me" name="remember-me" type="checkbox"> <label class="form-check-label" for="remember-me">Remember-me</label> </div> <div class="d-flex align-items-center justify-content-between mt-4 mb-0"> <a type="button" class="small" onclick="javascript:location.href='/member/join'">Sign up</a> <button type="submit" class="btn btn-primary">Login</button> </div> </form> </div> </div> </div> </div> </div> </th:block> </html>테스트
📁 Project Download
GitHub
'Spring Boot' 카테고리의 다른 글
[Java] jar 배포 시 File java.nio.file.NoSuchFileException (0) 2022.11.01 [Spring Boot] AOP(Aspect Oriented Programming) 적용하기 (0) 2022.10.24 [JAVA] 파일 첨부, 파일 업로드 구현하기 (0) 2022.07.11 [Spring Boot] 콘솔 쿼리 로그 출력 설정 (0) 2022.07.06 [Spring Boot] 로그인 처리 with Spring Security (0) 2022.06.28