[SpringBoot] thymeleaf html 파일 include

Spring Boot

by dy8_8 2022. 12. 21. 23:33

728x90

페이지에 매번 동일하게 들어가는 부분인 header, footer를

include 하려고 하는데 잘 안 돼서 꽤 애 먹었다.

일단 header.html에서 css 부분이 길어서 스크롤 하기도 어렵고,

위/아래를 계속 왔다갔다 하면서 보는 것도 힘들어서 따로 빼고 싶었다.

먼저 static > css 폴더를 생성해서 css 파일을 만들어서 미리 빼 두었고,

html 을 작성한 부분의 header에 th:fragment 이름을 설정해 주었다.

<body>
  <div>
    <header id="header" th:fragment="fragment-header">
      <img id="homeLogo" src="static/img/logo2.jpg" onclick="location.href='/'">
      <nav id="hdNav">
        <ul id="hdUl">
          <th:block th:if="${session.userId == null}">
            <li><a id="joinBtn" href="/join" methods="GET">회원가입</a></li>
            <li><a id="loginBtn" href="/login" methods="POST">로그인</a></li>
          </th:block>
          <th:block th:if="${session.userId != null}">
            <li><a id="companionBtn" href="/companion">동행자 찾기</a></li>
            <li><a id="logoutBtn" href="/logout">로그아웃</a></li>
          </th:block>
        </ul>
      </nav>
    </header>
  </div>
</body>

header th:fragment="fragment-header" 요 부분을 설정해 주면 된다.

그러고, home.html 부분에 아래와 같이 따로 빼둔 css 파일 링크와

html 작성한 걸 include 해 주면 된다.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css 경로">
</head>

<body>
    <header th:replace="/thymeleaf/fragments/header.html :: fragment-header"></header>
</body>
</html>

위의 건 home.html

link 부분과 header 부분을 보면된다.

link의 href는 css의 경로를 작성하면 되고,

(경로는 IntelliJ : 파일 우클릭 > Copy Path/Reference... 클릭 하면 경로 나옴)

header의 th:replace="참고할 html 경로 :: fragment설정한 이름"을 작성해 주면 된다.

나는 이래저래 해 보다가 이 방법이 제일 편해서 이렇게 사용하고 있다.

처음에 css만 적용이 되고, html 작성한 게 안 보여서.. 너무 힘들었지만

적용하고 나니 정말 편해서 좋다!

'Spring Boot' 카테고리의 다른 글

[SpringBoot] "MultipartException: Current request is not a multipart request" 에러 해결 및 방법 (0)	2023.01.13
[SpringBoot] url의 jsessionid 붙어 오는 것 해결 (0)	2022.12.27
[SpringBoot] thymeleaf layout-dialect 에러 (0)	2022.12.22
[Spring Boot] mssql, mybatis 연동 및 에러 해결 (0)	2022.12.06
[IntelliJ] error: invalid source release: 17 에러 해결 방법 (0)	2022.10.14