[Thymeleaf] 공통 html 파일 분리하기 (header, footer)
프로젝트 진행하면서 점차 개발하는 화면들이 늘어났습니다.
모든 화면에서 <header>태그에서 메뉴를 보여주고 있었습니다.
메뉴를 수정함에 따라 모든 html 파일들을 수정해야 하다 보니 유지보수가 어려웠습니다.
그래서 파일을 분리하기로 결심했고 Thymeleaf에서 사용하는 방법을 정리해 보겠습니다.
1. 폴더 및 파일 생성
공통된 파일을 관리할 fragment 폴더를 생성하였습니다. 추후에 footer도 추가할 예정입니다.
2. header.html 파일 작성
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="headerFragment">
<header>
<div class="container">
<div class="logo" onclick="window.location.href='https://binary96.store/'">
<h1>뭐든지 만들어드립니다</h1>
</div>
<nav class="main-nav">
<ul>
<li><a href="https://binary96.store/lucky"><i class="fas fa-star"></i>오늘의 운세</a></li>
<li><a href="https://binary96.store/game"><i class="fas fa-gamepad"></i>게임</a></li>
<li><a href="https://binary96.store/voteList"><i class="fas fa-vote-yea"></i>익명 투표!</a></li>
<li><a href="https://kimchilotto.netlify.app/"><i class="fas fa-ticket-alt"></i>로또 추첨기</a></li>
<li><a href="https://godofdeath.pages.dev/"><i class="fas fa-skull-crossbones"></i>죽음 예측 테스트</a></li>
<li><a href="https://binary96.store/rsiSummary"><i class="fas fa-chart-line"></i>코인 RSI 정보</a></li>
<li><a href="https://binary96.store/getLotto"><i class="fas fa-medal"></i>로또 당첨 순위</a></li>
<li><a href="https://binary96.store/getLotto"><i class="fas fa-medal"></i>로그인</a></li>
</ul>
</nav>
<div class="hamburger" onclick="toggleMenu()">
<i class="fas fa-bars"></i>
</div>
</div>
</header>
</div>
</body>
</html>3. header.html 불러오는 html 수정
수정전
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>뭐든지 만들어드립니다</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" th:href="@{/css/common.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/header.css}">
</head>
<body>
<header>
<div class="container">
<div class="logo" onclick="window.location.href='https://binary96.store/'">
<h1>뭐든지 만들어드립니다</h1>
</div>
<nav class="main-nav">
<ul>
<li><a href="https://binary96.store/lucky"><i class="fas fa-star"></i>오늘의 운세</a></li>
<li><a href="https://binary96.store/game"><i class="fas fa-gamepad"></i>게임</a></li>
<li><a href="https://binary96.store/voteList"><i class="fas fa-vote-yea"></i>익명 투표!</a></li>
<li><a href="https://kimchilotto.netlify.app/"><i class="fas fa-ticket-alt"></i>로또 추첨기</a></li>
<li><a href="https://godofdeath.pages.dev/"><i class="fas fa-skull-crossbones"></i>죽음 예측 테스트</a></li>
<li><a href="https://binary96.store/rsiSummary"><i class="fas fa-chart-line"></i>코인 RSI 정보</a></li>
<li><a href="https://binary96.store/getLotto"><i class="fas fa-medal"></i>로또 당첨 순위</a></li>
</ul>
</nav>
<div class="hamburger" onclick="toggleMenu()">
<i class="fas fa-bars"></i>
</div>
</div>
</header>
<div>
// 다른 UI 생략
</div
<body>
수정후
<body>
<header th:replace="/fragment/header :: headerFragment"></header> // 이거 한줄로 변경
<div>
// 다른 UI 생략
</div
<body>
결론
공통으로 사용할 html 파일을 분리한다.
기존에 사용하던 html 파일에는 분리한 내용을 지우고 아래 한 줄을 추가한다.
<header th:replace="/fragment/header :: headerFragment"></header>
※ 파일 경로에 따라 위의 빨간색 부분을 수정하시면 됩니다.
※ 저의 파일 경로는 아래와 같습니다.
resources/template/fragment/header.html
'IT > Java' 카테고리의 다른 글
| MVC 패턴과 모델1, 모델2의 차이 (1) | 2024.09.18 |
|---|---|
| [JAVA] 프로세스와 스레드 (0) | 2024.06.14 |
| 총알 피하기 게임 (3) | 2024.06.02 |
| [JAVA] session 세션 유효시간 설정 (0) | 2024.05.22 |
| [JAVA] 시간 지연하는 방법 (0) | 2024.05.13 |