반응형
타임리프 HTML5 기본 구조
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:text="${pageTitle}">문서 제목</title>
<!-- 필요한 CSS 및 메타 정보 -->
<link rel="stylesheet" th:href="@{/css/styles.css}">
</head>
<body>
<!-- 문서의 콘텐츠 -->
<header>
<h1 th:text="${headerTitle}">헤더 제목</h1>
</header>
<nav>
<ul>
<li><a th:href="@{/home}" th:text="${homeLinkText}">Home</a></li>
<li><a th:href="@{/about}" th:text="${aboutLinkText}">About</a></li>
<li><a th:href="@{/contact}" th:text="${contactLinkText}">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2 th:text="${sectionTitle}">섹션 제목</h2>
<p th:text="${sectionContent}">섹션 내용</p>
</section>
</main>
<footer>
<p th:text="${footerContent}">푸터 내용</p>
</footer>
<!-- 필요한 JavaScript 파일들 -->
<script th:src="@{/js/scripts.js}"></script>
</body>
</html>
- xmlns:th="http://www.thymeleaf.org":
- HTML 태그에 타임리프 네임스페이스를 추가하여 타임리프 속성을 사용할 수 있게 합니다.
- th:text:
- 태그의 텍스트 내용을 동적으로 설정합니다. 예를 들어, <h1 th:text="${headerTitle}">헤더 제목</h1>는 headerTitle 변수가 가진 값으로 <h1> 태그의 텍스트를 대체합니다.
- th:href:
- 앵커 태그(<a>)의 href 속성을 동적으로 설정합니다. 예를 들어, <a th:href="@{/home}">Home</a>는 /home URL로 링크를 설정합니다.
- th:src:
- 스크립트 태그(<script>)의 src 속성을 동적으로 설정합니다. 예를 들어, <script th:src="@{/js/scripts.js}"></script>는 /js/scripts.js 파일을 포함합니다.
- th:href (링크 태그 <link>):
- 링크 태그의 href 속성을 동적으로 설정합니다. 예를 들어, <link th:href="@{/css/styles.css}">는 /css/styles.css 파일을 포함합니다.
타임리프를 사용하면 HTML 템플릿에서 서버 사이드 데이터를 쉽게 바인딩할 수 있어, 동적인 웹 페이지를 효율적으로 생성할 수 있습니다.
<body> 태그의 맨 아래에 <script> 태그를 두는 이유
- 렌더링 블로킹을 방지하고 페이지 로딩 성능을 향상시킵니다.
- DOM 요소 접근을 보장하여 자바스크립트 코드가 안정적으로 동작하게 합니다.
- 사용자에게 빠른 콘텐츠 표시를 통해 사용자 경험을 개선합니다.
따라서, 일반적인 모범 사례로 <script> 태그를 <body> 태그의 맨 아래에 두는 것이 권장됩니다.
반응형
'Programming > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 타임리프 레이아웃 분리 방법 (0) | 2024.06.16 |
|---|---|
| [Thymeleaf] 타임리프란? Spring Boot 타임리프 설정 방법 (1) | 2024.06.15 |
