반응형

 

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

+ Recent posts

티스토리툴바