공통 레이아웃 적용

Park JeaHyun·2022년 8월 28일

DAMDA 프로젝트

DAMDA

목록 보기

2/6

무료 템플릿 선정

https://designrevision.com/demo/shards-dashboard-lite/index.html

팀원들과 회의한 결과 위 템플릿이 가장 무난하여 위 템플릿을 선정하게 되었습니다.
(구현하고자 하는 기능에 적합하다고 생각했습니다. 카드 형태 포스트 / 리뷰 작성 / 다수의 컴포넌트 / 적절한 메뉴 형태)

CSS / JS / Image 파일

CSS / JS / 이미지 파일은 별다른 수정없이 다운로드 받은 파일들 모두를 프로젝트 폴더에 옮겨줬다.

타임리프 적용 레이아웃

layout

타임리프를 적용해서 가장 큰 틀의 레이아웃 형태를 만들었습니다.
- head.html : 표준 html에서 head에 해당하는 부분 (css 선언)
- sidebar.html : 무료 템플릿에서 사이드바 부분
- footer.html : 무료 템플릿에서 하단 부분
- script.html : 공통으로 쓰이는 script 파일 선언

<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

    <!-- 공통 헤드-->
    <th:block th:replace="/layout/fragments/head :: headFragment"></th:block>

    <body class="h-100">
        <div class="container-fluid">
            <div class="row">
                <!-- Main Sidebar -->
                <th:block th:replace="/layout/fragments/sidebar :: sidebarFragment"></th:block>

                <!-- 기본 템플릿 안에 삽입될 내용 Start -->
                <div class="main-content-container container-fluid px-4 my-3">
                    <th:block layout:fragment="content"></th:block>
                </div>
                <!-- 기본 템플릿 안에 삽입될 내용 End -->

                <!-- 공통 하단-->
                <th:block th:replace="/layout/fragments/footer :: footerFragment"></th:block>

            </div>
        </div>

        <!-- 공통 스크립트-->
        <th:block th:replace="/layout/fragments/script :: scriptFragment"></th:block>
    </body>
</html>

head

소스 파일 경로를 설정할 때 th:href="@{경로}" 이런 식으로 입력해야 한다.
(초반에 CSS 파일 적용이 안되서 고생했다.)

<link rel="stylesheet" type="text/css" th:href="@{/style.css}">

<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
  <!-- Head -->
  <th:block th:fragment="headFragment">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="description" content="A high-quality &amp; free Bootstrap admin dashboard template pack that comes with lots of templates and components.">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <link rel="stylesheet" id="main-stylesheet" data-version="1.1.0" th:href="@{/styles/shards-dashboards.1.1.0.min.css}">
      <link rel="stylesheet" th:href="@{/styles/extras.1.1.0.min.css}">
      <title>DAMDA</title>
      <script async defer src="https://buttons.github.io/buttons.js"></script>
    </head>
  </th:block>
</html>

sidebar.html / footer.html / script.html 또한 구현하고자 하는 부분별로 알맞게 작성했다.
프론트 소스 깃헙

Park JeaHyun

이전 포스트

DAMDA 프로젝트 시작

다음 포스트