[스프링 부트] 게시판 만들기 프로젝트 - 5. 게시판 템플릿 적용하기
2023. 4. 2. 19:53ㆍ스프링부트 프로젝트
1. 부트스트랩
HTML, CSS, JavaScript를 사용하여 반응형 웹 페이지를 쉽게 개발할 수 있도록 도와주는 오픈 소스 프론트엔드 웹 프레임워크
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
아래 코드를 모든 html에 붙이지 않고 header.html와 footer.html만 적용
// css
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
// js
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
// icon
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
사용한 부스트트랩 템플릿
https://startbootstrap.com/previews/blog-home
2. th:replace
th:replace: 타임리프(Thymeleaf)에서 사용되는 속성(attribute) 중 하나로, 다른 HTML 템플릿 파일의 내용으로 현재 요소(element)를 대체하는 기능을 제공
<!-- example -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf th:replace Example</title>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
<h1>Hello, World!</h1>
<div th:replace="fragments/footer :: footer"></div>
</body>
</html>타임리프(Thymeleaf): 자바(JAVA) 기반의 서버 측 웹 템플릿 엔진(Template Engine)으로, HTML, XML, XHTML, JSP 등의 웹 문서를 동적으로 생성
<th:if>, <th:each>, <th:text> 등의 문법이 있음
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="main-head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<th:block layout:fragment="title"></th:block>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
<th:block layout:fragment="add-css"></th:block>
<style type="text/css">
a {
text-decoration: none;
}
a:link {
color : black;
}
a:visited {
color : black;
}
a:hover {
color : green;
}
</style>
</head>
</html>△header.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="main-head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<th:block layout:fragment="title"></th:block>
<th:block layout:fragment="add-css"></th:block>
</head>
<body>
<!-- Footer-->
<footer class="py-5 bg-dark ">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Your
Website 2023</p>
</div>
</footer>
<!-- Bootstrap core JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
crossorigin="anonymous"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>△footer.html
'스프링부트 프로젝트' 카테고리의 다른 글
| [스프링 부트] 게시판 만들기 프로젝트 - 7. DTO, Mapper (0) | 2023.04.13 |
|---|---|
| [스프링 부트] 게시판 만들기 프로젝트 - 6. MySQL 연결 (0) | 2023.04.13 |
| [스프링 부트] 게시판 만들기 프로젝트 - 4. 프로젝트 실행 (0) | 2023.04.02 |
| [스프링 부트] 게시판 만들기 프로젝트 - 3. Git 연결 (0) | 2023.04.02 |
| [스프링 부트] 게시판 만들기 프로젝트 - 2. 프로젝트 생성 (0) | 2023.04.02 |