반응형
1. dependency thymeleaf 추가
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
2. dependency thymeleaf 레이아웃 가능하게하도록 추가
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
이제 환경설정이 끝났으니, 레이아웃 제작
이런 루트로 생될 예정임.
3. footer.html 생성
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<!--footerFragment 선언-->
<div th:fragment="footerFragment">
<style>
.admin-footer {
background-color: aliceblue;
padding-left: 10%;
min-height: 150px;
}
</style>
<div class="admin-footer">
<h3>footer area</h3>
</div>
</div>
</html>th:fragment 설정으로 fooerFragment 매핑시켜줌
4.header.html 생성
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<!--headerFragment 선언-->
<div th:fragment="headerFragment">
<style>
ul {
list-style-type: none;
margin: -19px -9px -9px -7px;
width: 10%;
padding:50px 0 0 0;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #555;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
<ul>
<li><a href="/admin">대시보드</a></li>
<li><a href="/admin/statistics/list">방문 통계</a></li>
<li><a href="/admin/user/list">회원 관리</a></li>
<li><a href="/admin/menu/list">메뉴 관리</a></li>
<li><a href="/admin/expo/list">일정 관리</a></li>
<li><a href="/admin/tag/list">태그 관리</a></li>
<li><a href="/admin/event/list">이벤트 관리</a></li>
</ul>
</div>
</html>th:fragment 설정으로 headerFragment매핑시켜줌
5. default_layout.html 생성
<!DOCTYPE html>
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8" />
<title>타이틀/title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0" />
<!-- 공통 css -->
<link rel="stylesheet" th:href="@{/content/css/common.css}" >
<th:block layout:fragment="css"></th:block>
<!-- 공통 script -->
<th:block layout:fragment="script"></th:block>
</head>
<body>
<!-- header -->
<th:block th:replace="~{fragments/header :: headerFragment}"></th:block>
<!-- content -->
<th:block layout:fragment="content"></th:block>
<!-- footer -->
<th:block th:replace="~{fragments/footer :: footerFragment}"></th:block>
</body>
</html>만약!!
~{flagments 이게 활성화되어있지않고 녹색으로 죽어있다면(인텔리제이 기준)
gradle 새로고침 해줘야함
6.index.html 생성
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" <!-- 레이아웃을 쓴다는 설정-->
layout:decorate="~{layouts/default_layout}"> <!-- 레이아웃을 쓴다는 설정-->
<!-- index.html에서만 사용할 CSS -->
<th:block layout:fragment="css">
<!--<link rel="stylesheet" th:href="@{/css/common.css}" >-->
</th:block>
<!-- index.html 에서만 사용할 스크립트 -->
<th:block layout:fragment="script">
<!-- <script th:src="@{/js/page/home.js}"></script>-->
</th:block>
<!-- Content -->
<div layout:fragment="content">
<div class="container">
<h3>대시보드</h3>
<img th:src="@{/content/image/dash1.PNG}"/>
<img th:src="@{/content/image/dash2.PNG}"/>
</div>
</div>
</html>
이제 빌드하면 레이아웃 정상적으로 보일것임!!!
그리고.. 만약 안된다면 build.gradle 새로고침~~
728x90
'과거 게시글' 카테고리의 다른 글
| nuxt js 페이지 이동, 레이아웃 (0) | 2023.05.09 |
|---|---|
| nuxt + spring boot + jpa + h2 게시판 만들기 (0) | 2023.05.09 |
| JPA N+1 이슈, 서브쿼리, sorting, join (0) | 2023.02.23 |
| 최빈값구하기 (0) | 2023.02.20 |
| 대소문자 변환 (0) | 2023.02.20 |