반응형
Fragment
Fragment는 레이아웃 작업 시, 공통적으로 사용하는 화면을 분리하여 재사용할 수 있게 하며, 필요시 파라미터 값을 전달할 수 있음
01. 화면 분리
🔻예시
: 페이지 하단을 모든 페이지에서 공통으로 쓰고싶을 때의 fragment 사용법
① 'footer.html'을 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>footer</title>
</head>
<body>
<footer th:fragment="copy">Copyright © 2024 PEAZH All rights Reserved.</footer>
</body>
</html>
② 사용하려는 페이지에 'insert', 'replace', 'include' 중 적합한 방식으로 코드 추가
<body>
<div th:insert="~{footer :: copy}"></div>
<div th:replace="~{footer :: copy}"></div>
<div th:include="~{footer :: copy}"></div>
</body>- 'footer.html' 파일을 찾아 Frament 이름이 'copy'인 부분 호출한다는 의미
- '~{}'는 상대적 또는 절대적 경로를 참조할 수 있어 정확한 위치에 있는 Fragment를 가져옴
③ 결과
<body>
<!-- insert -->
<div><footer>Copyright © 2024 PEAZH All rights Reserved.</footer></div>
<!-- replace -->
<footer>Copyright © 2024 PEAZH All rights Reserved.</footer>
<!-- include -->
<div>Copyright © 2024 PEAZH All rights Reserved.</div>
</body>- insert : 현재 태그 내부에 Fragment 삽입
- replace : 해당 태그 자체를 Fragment로 대체 (ex. div 태그가 사라짐)
- include : Fragment의 내용만 삽입 (ex. footer 태그는 제외하고 내용만 표시)
🔻실습
: menu와 footer를 공통 화면으로 생성
① 'common.html'을 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>footer</title>
</head>
<body>
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom" th:fragment="menu">
<a class="navbar-brand fs-4 d-flex align-items-center me-md-auto">Spring Boot : Thymeleaf</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" active>home</a>
</li>
<li class="nav-item">
<a class="nav-link">board</a>
</li>
<li class="nav-item">
<a class="nav-link" >About</a>
</li>
</ul>
</header>
<footer th:fragment="footer">Copyright © 2024 PEAZH All rights Reserved.</footer>
</body>
</html>- <header> 태그와 <footer> 태그 각각에 Fragment 이름 지정
② 'index.html'에서 Fragment 호출
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Spring Boot</title>
<link href="../style.css" rel="stylesheet" />
</head>
<body>
<main class="container">
<div th:replace="~{common :: menu}"></div>
<div class="template">
<h1>Hollo, Spring Boot</h1>
<p class="subtitle">Thymeleaf를 이용한 웹 페이지 제작</p>
</div>
</main>
<div th:replace="~{common :: footer}"></div>
</body>
</html>- common.html의 munu와 footer Fragment를 각각 호출하여 공통 레이아웃 적용
02. 파라미터 전달
: 공통 레이아웃에 파라미터 값을 전달하여 각각 페이지마다 다른 값 사용하기
① 'common.html'에 Fragment생성
<head th:fragment="head(title)">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title th:text="${title}"></title>
<link href="../style.css" th:href="@{/style.css}" rel="stylesheet" />
</head>- Fragment 정의 시, th:fragment="head(title)" 로 파라미터(title)를 설정
- <title> 태그 안에 ${title} 변수를 사용하여 동적으로 제목을 설정
② Fragment 호출
<div th:replace="~{common :: head('Spring Boot: board')}"></div>- 페이지에서 Fragment를 호출할 때, 문자열을 파라미터로 전달
반응형
댓글