부트스트랩 fragment
부트스트랩의 fragment 기능으로 HTML의 조각들을 조합하여 레이아웃을 구성할 수 있습니다.
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
Thymeleaf, Bootstrap연결
thymeleaf 레이아웃 의존성 추가
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
thymeleaf 기능 사용을 위한 선언 추가
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
부트스트랩 css 연결
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
부트스트랩 js 연결
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
부트스트랩 레이아웃 구성
row, col을 지정하여 레이아웃을 구분할 수 있으며,
한 행을 기본적으로 12등분합니다.
col-8 col-4 이렇게 분할할 범위를 지정할 수 있습니다.
추가적인 기능은 부트스트랩 페이지에 많이 있습니다!
fragment 만들기
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- 파비콘 -->
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="shortcut icon" href="/img/favi/favicon.ico">
<link rel="manifest" href="/img/favi/manifest.json">
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="/css/common.css">
<th:block layout:fragment="content_css"></th:block>
</head>
<body>
<div class="container">
<!-- 컨텐츠 -->
<div class="row mt-5">
<th:block th:replace="~{/fragment/main_header :: mainHeaderFragment}"></th:block>
</div>
<div class="row mb-5">
<div class="col-11 main-fr">
<div class="inner-fr">
<th:block layout:fragment="content"></th:block>
</div>
</div>
<div class="col-1">
<th:block th:replace="~{/fragment/main_side :: mainSideFragment}"></th:block>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<th:block layout:fragment="content_js"></th:block>
</body>
</html>
고정시킬 HTML 조각을 레이아웃에 불러오기
header, footer와 같이 여러 페이지에 반복되는 부분을 하나의 layout.html에 fragment로 불러와서 고정시키는 것입니다.
고정시킬 HTML 조각들은
<th:block th:fragment="fragment명"></th:block>
레이아웃 HTML에는
<th:block th:replace="~{파일위치 :: fragment명}"></th:block>
변하는 컨텐츠영역을 레이아웃에 불러오기
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/fragment/main_layout}">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>layout:decorate="~{레이아웃파일명}"
컨텐츠 영역에 추가해줍니다.
바뀌는 부분은 replace가 아닌 layout:fragment로 넣어주면 됩니다.
