타임리프 레이아웃 다이얼렉트

•

타임리프 레이아웃 다이얼렉트 의존성 

◦

build.gradle

•

프래그먼트

•

레이아웃

타임리프 레이아웃 다이얼렉트 의존성

// 타임리프 다이얼렉트 레이아웃
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
Java
복사

build.gradle

plugins {
	id 'java'
	id 'war'
	id 'org.springframework.boot' version '3.2.5'
	id 'io.spring.dependency-management' version '1.1.4'
}

group = 'com.aloha'
version = '0.0.1-SNAPSHOT'

java {
	sourceCompatibility = '17'
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	annotationProcessor 'org.projectlombok:lombok'
	providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'

	// 타임리프 다이얼렉트 레이아웃
	implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

}

tasks.named('test') {
	useJUnitPlatform()
}
Java
복사

프래그먼트 (Fragment)

타임리프 레이아웃의 공통적으로 사용할 부분

UI 에서 공통적으로 사용되는 구성 요소들을 별도의 HTML 파일로 만든다. 주로 헤더, 푸터, 사이드바 등을 관리할 수 있습니다.

프래그먼트 실습파일

•

~/fragment/header.html

•

~/fragment/footer.html

•

~/fragment/link.html

•

~/fragment/script.html

~/fragment/header.html

<!-- 프래그먼트 : 레이아웃에서 공통적으로 사용할 UI -->
<!-- th:fragment="프래그먼트 명" -->
<th:block th:fragment="header">
    <header>
        <ul>
            <li><a href="/user">사용자</a></li>
            <li><a href="/admin">관리자</a></li>
        </ul>
        
        <ul>
            <li><a href="/login">로그인</a></li>
            <li><a href="/join">회원가입</a></li>
        </ul>
    </header>
</th:block>
HTML
복사

~/fragment/footer.html

<th:block th:fragment="footer">
    <footer>
        <p>copyright ALL RIGHT RESERVED</p>
    </footer>
</th:block>
HTML
복사

~/fragment/link.html

<th:block th:fragment="link">
    <link rel="stylesheet" href="/css/style.css">
</th:block>
HTML
복사

~/fragment/script.html

<th:block th:fragment="script">
    <!-- js 가져오는 순서-->
    <!-- jQuery -->
    <!-- jQuery 기반 라이브러리 -->
    <!-- 자바스크립트 라이브러리 -->
    <!-- 사용자 정의 자바스크립트 -->
    <script src="/js/script.js" ></script>
</th:block>
HTML
복사

레이아웃 (Layout)

특정 페이지에 UI를 하나의 템플릿으로 미리 구성 해놓은 영역

레이아웃 템플릿을 프래그먼트로 구성하고, 각 페이지마다 다르게 보여줄 컨텐츠 영역을 지정해서 미리 짜여진 레이아웃을 만들기 위해 사용하는 요소

~/layout/main_layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- link -->
    <th:block th:replace="~{fragment/link::link}"></th:block>
</head>
<body>
    <!-- header -->
    <th:block th:replace="~{fragment/header::header}"></th:block>

    <!-- ⭐ content -->
    <!-- layout:fragment="레이아웃의 프레그먼트 영역 이름" -->
    <th:block layout:fragment="content"></th:block>
    
    <!-- footer -->
    <th:block th:replace="~{fragment/footer::footer}"></th:block>

    <!-- script -->
    <th:block th:replace="~{fragment/script::script}"></th:block>
</body>
</html>
HTML
복사

index.html

여기서는 프래그먼트를 가져와서 공통 레이아웃을 적용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <th:block th:replace="~{fragment/link::link}"></th:block>
</head>
<body>
    <!-- th:replace : 프래그먼트를 가져오는 속성 -->
    <!-- th:replace="~{폴더명/파일명::프래그먼트명}" -->
    <th:block th:replace="~{fragment/header::header}"></th:block>

    <div class="container">
        <h3>CONTENT</h3>
    </div>
    
    <th:block th:replace="~{fragment/footer::footer}"></th:block>

    <th:block th:replace="~{fragment/script::script}"></th:block>
</body>
</html>
HTML
복사

main.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{/layout/main_layout}"
      >
<!-- ⭐ layout:decorate="~{/레이아웃 경로/레이아웃 파일명}" -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메인 화면</title>
</head>
<!-- ⭐ layout:fragment="레이아웃 프레그먼트 이름" -->
<body layout:fragment="content">
    <div class="container">
        <h3>CONTENT</h3>
    </div>
</body>
</html>
HTML
복사

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: black;
    text-decoration: none;
}
ul { list-style-type: none; }
header {
    height: 80px;
    background-color: lightslategray;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header ul {
    display: flex;
    height: 100%;
    padding: 0 20px;
}

header ul li { min-width: 100px; }

header ul li a {
    display: inline-block;
    min-width: 120px;
    line-height: 80px;
    text-align: center;
    color: white;
}

header ul li a:hover {
    font-weight: bold;
}

.container {
    border: 1px solid black;
    max-width: 1024px;
    min-height: 300px;
    margin: 0 auto;
    padding: 12px;
}

footer {
    background-color: black;
    color: white;
    min-height: 100px;
    text-align: center;
}

footer p {
    line-height: 100px;
}
CSS
복사