728x90

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

티스토리툴바