Thymeleaf Layout Dialect로 웹 페이지 레이아웃 깔끔하게 관리하기 ✨
웹 개발에서 레이아웃 관리는 필수죠! 매번 페이지마다 헤더, 푸터, CSS, JS 파일을 복붙하는 건 너무 귀찮잖아요. 😫 Thymeleaf의 Layout Dialect를 사용하면 이런 반복 작업을 줄이고 깔끔하고 효율적인 레이아웃 관리를 할 수 있습니다. 👍
1. Thymeleaf Layout Dialect란? 📚
Thymeleaf Layout Dialect는 Thymeleaf 템플릿 엔진의 확장 기능으로, 웹 페이지의 공통 레이아웃을 정의하고 재사용할 수 있도록 도와줍니다. 즉, 헤더, 푸터, 메뉴 등 자주 사용되는 요소들을 한 곳에 모아 관리하고, 각 페이지에서는 콘텐츠 부분만 작성하면 됩니다. 덕분에 코드 중복을 줄이고 유지보수성을 높일 수 있죠! 🧹
2. 레이아웃 HTML 파일 만들기 🏗️
먼저, 공통 레이아웃을 정의하는 HTML 파일을 만들어 봅시다. 이 파일에는 헤더, 푸터, CSS, JS 파일 등 모든 페이지에 공통으로 들어갈 요소들을 포함합니다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Title</title>
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<header th:fragment="header">
<h1>My Website</h1>
<nav>
</nav>
</header>
<main layout:fragment="content">
</main>
<footer th:fragment="footer">
© 2023 My Website
</footer>
<script th:src="@{/js/script.js}"></script>
</body>
</html>
- layout:title-pattern: 레이아웃 제목과 콘텐츠 제목을 조합하여 페이지 제목을 설정합니다.
- th:fragment: 각 영역(헤더, 콘텐츠, 푸터)을 fragment로 정의하여 다른 템플릿에서 재사용할 수 있도록 합니다.
3. 콘텐츠 HTML 파일 만들기 📝
이제 페이지별 콘텐츠를 담을 HTML 파일을 만들어 봅시다. 이 파일에는 layout:decorator 속성을 사용하여 레이아웃 파일을 지정하고, layout:fragment 속성을 사용하여 콘텐츠 영역을 채웁니다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout">
<head>
<title>Main Page</title>
</head>
<body>
<th:block layout:fragment="content">
<h2>메인 페이지 콘텐츠</h2>
<p>여기에는 메인 페이지의 내용을 작성합니다.</p>
</th:block>
</body>
</html>
- layout:decorator="layout": layout.html 파일을 레이아웃으로 사용하도록 지정합니다.
- layout:fragment="content": 이 파일의 내용이 레이아웃 파일의 content fragment에 삽입됩니다.
4. 실행 결과 확인 🚀
이제 웹 브라우저에서 콘텐츠 페이지를 열어보면, 레이아웃 파일의 헤더, 푸터, CSS, JS 파일이 적용된 것을 확인할 수 있습니다. 각 페이지에서는 콘텐츠 부분만 신경 쓰면 되니 정말 편리하죠? 😊
추가 팁 💡
- 다양한 레이아웃: 여러 개의 레이아웃 파일을 만들어 페이지 유형별로 다른 레이아웃을 적용할 수 있습니다.
- 레이아웃 상속: 레이아웃 파일끼리 상속 관계를 만들어 더욱 효율적인 레이아웃 관리가 가능합니다.
- Thymeleaf Fragment 표현식: 레이아웃 파일의 특정 fragment만 가져와서 사용할 수 있습니다.
마무리
Thymeleaf Layout Dialect를 사용하면 웹 페이지 레이아웃을 효율적으로 관리하고 코드 중복을 줄일 수 있습니다. 이제 Thymeleaf Layout Dialect를 활용하여 멋진 웹 페이지를 만들어 보세요! 🎉
'Coding 공부 > HTML+CSS' 카테고리의 다른 글
| [CSS] 스타일 적용 우선순위 (0) | 2024.06.21 |
|---|---|
| [HTML+CSS_Summary] 총 정리 (0) | 2024.02.16 |
| [HTML+CSS_Summary] 웹 호스팅, 닷홈, Filezila, Just홈쇼핑 연습문제 (2) | 2024.02.08 |
| [HTML+CSS] 리트리버 과제, just쇼핑몰 예제, position 추가부분 (2) | 2024.02.05 |
| [HTML+CSS_Summary] position, 이미지 삽입, 로고 삽입, i class, 동영상 삽입 (0) | 2024.01.29 |
댓글