아래 그림과 같이 html들 생성하고 설정. 예전 사이드프로젝트 한걸 참고해서 진행해봤다.
안된다..
그냥 화면에 {} 라고만 뜨는 현상이 발생했다.
공식문서를 기반으로 아래와 같이 진행하게 되면 해결되니 혹여나 layout이 잘 안되는 사람이라면 아래 방법들을 확인하자.
1. decorator (X) / decorate (O)
렌더되는 html 에서 layout을 가져오는 부분에 보면 예전 방식은 다음과 같다.
<!DOCTYPE html>
<html lang="ko"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="~{layout/layout}">
....
</html>최신에 가까운 버전을 이용시엔 아래와 같이 수정하자
<!DOCTYPE html>
<html lang="ko"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
...
</html>2. th:replace 시 ~{} 문법
레이아웃 html 에서 특정 구간을 replace 하는 부분의 예전 방식은 다음과 같다.
...
<div th:replace="layout/fragments/header::headerFragment"></div>
...최신에 가까운 버전을 이용하려면 아래와 같이 수정하자
...
<div th:replace="~{layout/fragments/header::headerFragment}"></div>
...~ 는 thymeleaf에서만 쓰이는 경로키워드로 prefix를 의미한다고 봐도 무방하다.
3. configureViewResolvers 설정
spring boot는 yml이나 properties에서 설정만 하면 알아서 잘 되는데, 스프링 레거시를 사용하는 경우에는 설정이 필요한것으로 확인되었다.
관련 설정은 스프링 프레임워크 6 Thymeleaf 설정 포스팅에서 확인할 수 있다.
4. 오타
니 손이 문ㅈ...
전체 Html 설정 예시는 아래와 같다.
전체 코드 예시
page/layout/layout.html - 레이아웃
<!doctype html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
<meta charset="UTF-8">
<meta content="사이트" property="og:title">
<meta property="og:url" content="${urlInfo}"/>
<meta name="viewport" content="width=1100">
<title>사이트</title>
<link href="/css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="main_body">
<div th:replace="~{layout/fragments/header::headerFragment}"></div>
<div layout:fragment="content"></div>
<th:block th:replace="~{layout/fragments/footer::footerFragment}"></th:block>
</body>
</html>page/layout/fragments/header.html - 헤더
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!-- Header -->
<th:block th:fragment="headerFragment">
<section id="top-bar">
<div>
<img src="/images/logo.png" class="logo"/>
</div>
</div>
</th:block>
</html>page/layout/fragments/footer.html - 푸터
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<div class="footer" th:fragment="footerFragment">
<div class="foot">
<div class="in">
<div class="copyright">
<p>
<span id="agreementInfo">이용약관</span>
<span id="opensourceLicenses">오픈소스</span>
</p>
<p>Copyright 2023 © God-Logger, Inc. All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</html>page/login.html - 페이지
<!DOCTYPE html>
<html lang="ko"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
<head>
<script src="/js/login.js"></script>
</head>
<body>
<th:block layout:fragment="content">
<div class="space">
<h1>로그인</h1>
<div class="login-form">
<input type="text" class="input" id="login-id" placeholder="아이디를 입력해주세요" >
<input type="password" class="input" id="pw" placeholder="비밀번호를 입력해주세요 " >
</div>
<div class="button-wrapper">
<button id="login-btn">로그인</button>
</div>
</div>
</th:block>
</body>
</html>'자바 > Spring Framework' 카테고리의 다른 글
| lucy-xss-servlet-filter Spring 6 용 JAR 빌드/적용 (2) (0) | 2023.08.17 |
|---|---|
| lucy-xss-servlet-filter Spring 6 용 JAR 빌드/적용 (1) (2) | 2023.08.17 |
| lucy-xss-servlet-filter Spring 6 (jakarta servlet)에서 사용 (0) | 2023.08.11 |
| 스프링 프레임워크 6 thymeleaf 적용 (+ Tiles 제거 기록 로그) (0) | 2023.05.10 |
아래 그림과 같이 html들 생성하고 설정. 예전 사이드프로젝트 한걸 참고해서 진행해봤다.
안된다..
그냥 화면에 {} 라고만 뜨는 현상이 발생했다.
공식문서를 기반으로 아래와 같이 진행하게 되면 해결되니 혹여나 layout이 잘 안되는 사람이라면 아래 방법들을 확인하자.
1. decorator (X) / decorate (O)
렌더되는 html 에서 layout을 가져오는 부분에 보면 예전 방식은 다음과 같다.
<!DOCTYPE html>
<html lang="ko"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="~{layout/layout}">
....
</html>최신에 가까운 버전을 이용시엔 아래와 같이 수정하자
<!DOCTYPE html>
<html lang="ko"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
...
</html>2. th:replace 시 ~{} 문법
레이아웃 html 에서 특정 구간을 replace 하는 부분의 예전 방식은 다음과 같다.
...
<div th:replace="layout/fragments/header::headerFragment"></div>
...최신에 가까운 버전을 이용하려면 아래와 같이 수정하자
...
<div th:replace="~{layout/fragments/header::headerFragment}"></div>
...~ 는 thymeleaf에서만 쓰이는 경로키워드로 prefix를 의미한다고 봐도 무방하다.
3. configureViewResolvers 설정
spring boot는 yml이나 properties에서 설정만 하면 알아서 잘 되는데, 스프링 레거시를 사용하는 경우에는 설정이 필요한것으로 확인되었다.
관련 설정은 스프링 프레임워크 6 Thymeleaf 설정 포스팅에서 확인할 수 있다.
4. 오타
니 손이 문ㅈ...
전체 Html 설정 예시는 아래와 같다.
전체 코드 예시
page/layout/layout.html - 레이아웃
<!doctype html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
<meta charset="UTF-8">
<meta content="사이트" property="og:title">
<meta property="og:url" content="${urlInfo}"/>
<meta name="viewport" content="width=1100">
<title>사이트</title>
<link href="/css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="main_body">
<div th:replace="~{layout/fragments/header::headerFragment}"></div>
<div layout:fragment="content"></div>
<th:block th:replace="~{layout/fragments/footer::footerFragment}"></th:block>
</body>
</html>page/layout/fragments/header.html - 헤더
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!-- Header -->
<th:block th:fragment="headerFragment">
<section id="top-bar">
<div>
<img src="/images/logo.png" class="logo"/>
</div>
</div>
</th:block>
</html>page/layout/fragments/footer.html - 푸터
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<div class="footer" th:fragment="footerFragment">
<div class="foot">
<div class="in">
<div class="copyright">
<p>
<span id="agreementInfo">이용약관</span>
<span id="opensourceLicenses">오픈소스</span>
</p>
<p>Copyright 2023 © God-Logger, Inc. All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</html>page/login.html - 페이지
<!DOCTYPE html>
<html lang="ko"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
<head>
<script src="/js/login.js"></script>
</head>
<body>
<th:block layout:fragment="content">
<div class="space">
<h1>로그인</h1>
<div class="login-form">
<input type="text" class="input" id="login-id" placeholder="아이디를 입력해주세요" >
<input type="password" class="input" id="pw" placeholder="비밀번호를 입력해주세요 " >
</div>
<div class="button-wrapper">
<button id="login-btn">로그인</button>
</div>
</div>
</th:block>
</body>
</html>'자바 > Spring Framework' 카테고리의 다른 글
| lucy-xss-servlet-filter Spring 6 용 JAR 빌드/적용 (2) (0) | 2023.08.17 |
|---|---|
| lucy-xss-servlet-filter Spring 6 용 JAR 빌드/적용 (1) (2) | 2023.08.17 |
| lucy-xss-servlet-filter Spring 6 (jakarta servlet)에서 사용 (0) | 2023.08.11 |
| 스프링 프레임워크 6 thymeleaf 적용 (+ Tiles 제거 기록 로그) (0) | 2023.05.10 |
