타임리프에서 레이아웃과 디자인 관리는 웹 페이지의 일관성과 재사용성을 높이는 데 중요하다.
공통 레이아웃의 재사용을 통해 개발 시간을 단축시키고, 동적으로 디자인을 조정함으로써 사용자 경험을 향상시킨다.
(즉, 웹 애플리케이션의 유지보수성과 확장성을 향상시킨다)
공통 레이아웃 생성 >>
여러 페이지에 걸쳐 공통적으로 사용되는 레이아웃(예: 헤더, 푸터, 사이드바)을 만든다.
별도의 HTML 파일로 공통 레이아웃을 작성한 후, 다른 페이지에서 재사용하면 된다.
<!-- base.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 예시</title>
</head>
<body>
<header>
<h1>웹사이트 헤더</h1>
</header>
<div th:replace="fragments/content"></div>
</body>
</html>
----
<!-- content.html -->
<section>
<h2>컨텐츠 섹션</h2>
<p>이 섹션은 내용을 보여주는 섹션입니다.</p>
</section>
'th:replace' 는 현재 요소를 완전히 대체하는 데 사용된다.
(현재 요소가 사라지고 지정된 템플릿의 내용으로 대체된다)
위 예시에서 th:replace 를 사용해서 base.html 의 div 요소를 content.html 로 대체한다.
결과는 아래 코드와 같다.
<div> 요소는 완전히 대체되었고 원래의 내용은 사라졌다.
<!DOCTYPE html>
<html>
<head>
<!-- 헤더 내용 생략 -->
</head>
<body>
<header>
<h1>웹사이트 헤더</h1>
</header>
<section>
<h2>컨텐츠 섹션</h2>
<p>이 섹션은 내용을 보여주는 섹션입니다.</p>
</section>
</body>
</html>
th:insert
th:insert는 지정된 템플릿의 내용을 현재 요소 내부에 삽입하는 데 사용된다
(현재 요소는 유지되고, 템플릿의 내용이 추가된다)
<!-- base.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 예시</title>
</head>
<body>
<header>
<h1>웹사이트 헤더</h1>
</header>
<div th:insert="fragments/sidebar"></div>
</body>
</html>
<!-- sidebar.html -->
<aside>
<h2>사이드바</h2>
<p>추가 정보</p>
</aside>위 코드에서, th:insert 를 사용하여 base.html 의 <div> 요소에 sidebar.html 을 삽입한다.
<div> 요소 내에 sidebar.html 의 내용이 추가되었고, 원래의 내용은 그대로 유지된다.
결과는 아래 코드와 같다.
<!DOCTYPE html>
<html>
<head>
<!-- 헤더 내용 생략 -->
</head>
<body>
<header>
<h1>웹사이트 헤더</h1>
</header>
<div>
<aside>
<h2>사이드바</h2>
<p>추가 정보</p>
</aside>
</div>
</body>
</html>
디자인 속성(th:class, th:style) >>
조건에 따라 HTML 요소에 CSS 클래스나 스타일을 동적으로 적용한다.
th:class 는 조건에 따라 클래스를 적용한다.
th:style 은 조건에 따라 인라인 스타일을 적용한다.
<div th:class="${someCondition ? 'class-true' : 'class-false'}"></div>
<div th:style="${someCondition ? 'display:block;' : 'display:none;'}"></div>
위 코드에서, someContidion 이 참이면 div 에 특정 클래스를 적용하거나 dispaly:block; 스타일을 적용한다.
거짓이면 다른 클래스나 display:none; 스타일을 적용한다.
---
24년 1월 23일 작성된 글입니다
'JAVA > SpringBoot' 카테고리의 다른 글
| SpringBoot 사용자 인증 구현: 인증 과정과 BCryptPasswordEncoder 활용 (0) | 2024.03.26 |
|---|---|
| 타임리프의 인라인 표현식과 국제화:동적 웹 개발과 다국어 지원 (0) | 2024.03.26 |
| 스프링부트 + 타임리프: 폼 바인딩과 유효성 검사 (0) | 2024.03.26 |
| 타임리프의 표현식과 예제 (0) | 2024.03.26 |
| 타임리프(Thymeleaf)로 동적 웹 페이지 생성: 기본 설정 (0) | 2024.03.26 |
