안녕하세요. hia의 개발 story입니다.
홈페이지를 만들기에 앞서 페이지를 조각내 보려고 합니다.
프런트를 만들 때 보통 공통으로 들어가는 페이지가 있습니다.
특히나 header, footer 파일이 가장 대표적입니다.
쉽게 말해서 홈페이지의 어느 페이지를 들어가더라도 떠있어야 하는 파일을 따로 만들어두는 것입니다.
그러면 페이지마다 같은 부분을 고칠 필요 없이 조각난 파일만 수정을 하면 되기 때문에 선택이 아닌 필수 사항입니다.
Thymeleaf에 들어가면 이렇게 공식 문서를 볼 수가 있습니다.
이제 이 문서를 사용해서 fragment 조각들을 만들어봅시다.
Thymeleaf Page Layouts - Thymeleaf
Summary In this article, we described many ways of achieving the same: layouts. You can build layouts using Thymeleaf Standard Layout System that is based on include-style approach. You also have powerful Layout Dialect, that uses decorator pattern for wor
www.thymeleaf.org
이전 글에서 썼듯이 저는 템플릿을 가져와서 쓰는데 모든 페이지가 다 다르게 되어있어 하나씩 수정해야 하는 불편함이 있습니다.
그래서 우선은 가장 상단에 페이지의 메뉴 부분을 header로 만들어줬습니다.
Thymeleaf를 사용하기 위해서는 파일의 위치도 중요합니다.
물론 변경해줄 수도 있겠지만 기본에 맞춰서 만들어보려고 합니다.
resources에서 이미지와 css 파일은 static에 html 파일들은 templates에 넣어줍니다.
그리고 공통조각으로 들어가는 부분들은 templates 아래 fragment라는 폴더를 만들어서 넣어줍니다.
이제 header로 쓸 파일을 하나 만들어야 합니다.
이름은 header.html로 하겠습니다.
header로 사용할 코드를 가져온 후 최상단의 div 태그에 th:fragment="header"를 적어줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>육십령 펜션&캠핑</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="/assets/css/main.css"/>
</head>
<body>
<div th:fragment="header">
<!-- Header -->
<section id="header">
<!-- Logo -->
<h1><a href="/"><img id="logoImg" th:src="@{/images/logo.png}" alt="로고" width="200"></a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><a href="/">메인</a></li>
<li><a href="/intro">소개</a></li>
<li><a href="">예약</a></li>
<li><a href="/">숙박</a></li>
<li><a href="no-sidebar.html">문의</a></li>
</ul>
</nav>
</section>
</div>
</body>
</html>이것으로 header는 다 만들었습니다.
이 header파일을 index파일에 적용해보도록 하겠습니다.
방법은 아주 간단합니다.
index 파일에 header를 넣고 싶은 위치에 아래 소스를 삽입하면 끝!
<div th:replace="fragment/header.html :: header"></div>마찬가지로 footer, left-menu, right-menu 등 공통으로 사용할 코드들을 만들어서 replace 대체해 줄 수 있습니다.
'Springboot' 카테고리의 다른 글
| [Spring Boot] MariaDB와 Spring JPA 사용하기 (0) | 2023.03.14 |
|---|---|
| [Spring Boot] header 메뉴 선택 시 jquery로 class 값 변경하기 (0) | 2022.12.22 |
| [Spring Boot] 무료 템플릿을 이용한 홈페이지 제작 (0) | 2022.12.07 |
| [Spring Boot] 스프링 부트 프로젝트 Welcome Page 만들기 (0) | 2022.11.29 |
| [Spring Boot] Intellij에 스프링 부트 프로젝트 생성하기 (0) | 2022.11.26 |