// 타임리프 레이아웃
implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '3.0.0'
config.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="configFragment">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테스트</title>
<meta name="description" content="">
<meta property="og:site_name" content="">
<meta name="keywords" content=" ">
<meta property="og:image" content="">
<!-- css -->
<link rel="stylesheet" th:href="@{css/style.css}">
<!-- js -->
<script th:src="@{js/jquery-1.12.4.min.js}"></script>
<script th:src="@{js/front_ui.js}"></script>
<script th:src="@{js/ui.js}"></script>
<script th:src="@{js/swiper.min.js}"></script>
<script th:src="@{js/template.js}"></script>
<!-- 각 컨텐츠페이지의 스크립트 영역이 들어감 -->
<!-- <th:block layout:fragment="script"></th:block>-->
</head>
</html>layout.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:replace="layout/config :: configFragment"></head>
<body>
<div layout:fragment="content"></div>
<!-- header나 footer도 th:replace 방식으로 하면됨-->
</body>
</html>페이지들.html
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="layout/layout"
>
<!-- index.html 고유 CSS 추가 -->
<!--<th:block layout:fragment="css">-->
<!-- <style>-->
<!-- .testDiv{-->
<!-- height: 500px;-->
<!-- background-color: gold;-->
<!-- }-->
<!-- </style>-->
<!--</th:block>-->
<!-- index.html 고유 스크립트 추가 -->
<!--<th:block layout:fragment="script"> </th:block>-->
<div layout:fragment="content">
<!-- <body> 태그대신에 위 div 로 감싸면됨 -->
</div>
<!--// layout fragment-->
<script>
$('.btn-state').on('click', function(){
$(this).toggleClass('on')
})
</script>
</html>
