thymeleaf layout. 머릿글 바닥글. th:block.
Thymeleaf Layout Dialect를 이용하면 하나의 레이아웃을 여러 페이지에 똑같이 적용할 수 있다. 공통적으로 적용되는 레이아웃을 미리 만들어놓고 현재 작성 중인 페이지만 레이아웃을 끼워넣으면 된다.
대표예시가 머릿글 바닥글이 있다.
파일의 흐름은 다음과 같다.
index.html
타임리프연습. test5 하이퍼링크
>>>
testcontroller.java로 이동
@getmapping 작업.
>>>
show5.html로 이동.
layout 링크 호출.
header, footer.html을 다음의 위치에 만들어준다.
layout1.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<th:block th:replace="fragments/header::header"></th:block>
<div layout:fragment="content" class="content"></div>
<th:block th:replace="fragments/footer::footer"></th:block>
</body>
</html>
머릿글 바닥글은 <th:block>으로 처리해주었고, 본문은 <div>로 설정해두었다.
<th: block>
머릿글, 바닥글용도. 고정. 정적.
th:block은 타임리프에서 템플릿 조각을 생성하는 데 사용된다. 이 태그는 렌더링 시 아무것도 출력하지 않고, 템플릿의 다른 부분에서 이 블록을 참조할 수 있게 해준다.
- 용도: 주로 프래그먼트를 삽입하거나 템플릿의 일부분을 재사용할 때 사용
- 특징: HTML의 유효성을 유지하면서 내용을 포함할 수 있다. 이 태그는 렌더링 시에 아무것도 출력하지 않지만, 다른 템플릿에서 th:replace나 th:include로 사용할 수 있다.
<th:replace>
replace는 말 그대로 '대체'하는 방법이다. 현재 태그를 템플릿 조각에 있는 태그로 대체하는 방법
<th:insert>
insert는 현재 태그를 유지하면서 템플릿 조각을 가져오는 방법
<div>
본문 용도. 유동적. 동적.
layout:fragment
layout:fragment는 레이아웃 템플릿의 구조를 정의하는데 사용된다. 이 태그는 상속받은 템플릿에서 내용을 동적으로 채울 수 있습니다.
- 용도: 템플릿의 본문 부분을 동적으로 채우기 위해 사용.
- 특징: content라는 이름의 레이아웃 조각을 정의하고, 다른 템플릿에서 이 조각에 내용을 삽입할 수 있게 합니다.
++ 머릿글 바닥글이 출력되지 않았던 이유
Gradle에 라이브러리를 추가하지 않았었다.
그리고 꼭 리프레시를 해주자!
전체 소스코드는 깃허브의 sprweb7th를 참고하자.
https://github.com/yoonah0327/spring_source.git
GitHub - yoonah0327/spring_source
Contribute to yoonah0327/spring_source development by creating an account on GitHub.
github.com
Thymeleaf 페이지 레이아웃
Thymeleaf Layout Dialect를 이용하면 하나의 레이아웃을 여러 페이지에 똑같이 적용할 수 있습니다. 공통적으로 적용되는 레이아웃을 미리 만들어놓고 현재 작성 중인 페이지만 레이아웃을 끼워넣으
velog.io
Spring MVC - 타임리프(Thymeleaf) 템플릿 조각과 레이아웃 (th:fragment, th:insert, th:replace)
타임리프(Thymeleaf) 템플릿 조각과 레이아웃 웹 페이지를 개발할 때는 공통 영역이 많이 들어있다. 예를 들어 상단 메뉴, 하단 홈페이지 정보, 좌측 카테고리 등 여러 페이지에서 공통으로 사용하
jddng.tistory.com
https://ddururiiiiiii.tistory.com/397
[개발일지#018] 타임리프 레이아웃 적용하기(Thymeleaf Layout)
[참고] 김영한님 스프링 강의를 바탕으로 진행되는 토이프로젝트의 과정을 기록하는 글입니다. 둥근 피드백은 언제나 환영입니다. [오늘의 개발내용] 1. 타임리프 레이아웃 적용하기 전체 타임
ddururiiiiiii.tistory.com
https://devfoxstar.github.io/java/thymeleaf-layout-dialect/
타임리프 레이아웃 구조 설정 (thymeleaf-layout-dialect)
뷰페이지 구조를 잡기 위해서는 먼저 레이아웃을 설정해야 합니다. Thymeleaf 에는 Dialect…
devfoxstar.github.io