[HTML]header, footer / fragments 이용하여 layouts 분리하기
2023. 12. 23. 17:51ㆍHTML + CSS+JS
반응형
layouts 폴더
layout.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- 자바스크립트 jQuery : 스크립트를 이용한 효과 -->
<th:block layout:fragment="css"></th:block>
<th:block layout:fragment="script"></th:block>
</head>
<body>
<!-- header 영역 -->
<div th:replace="~{fragments/header::header}"></div>
<!-- content 영역 -->
<div layout:fragment="content"></div>
<!-- footer 영역 -->
<div th:replace="~{fragments/footer::footer}"></div>
</body>
</html>
fragments 폴더
▪️ header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>header</title>
</head>
<body>
<div th:fragment="header"> </div>
</body>
</html>
👉 상단고정 ( fixed-top)
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
▪️ footer.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<div th:fragment="footer"> </div>
</body>
</html>
templates 폴더
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}">
<body>
<div layout:fragment="content">
본문 내용
</div>
</body>
</html>반응형
'HTML + CSS+JS' 카테고리의 다른 글
| [JavaScript] 이벤트 리스너 종류 (1) | 2023.12.22 |
|---|---|
| [JavaScript] Document 정의 및 사용 방법 (0) | 2023.12.22 |
| [HTML/CSS/JS] 역할과 기능 (1) | 2023.12.22 |