th:classappend
Thymeleaf 문법 중 th:classappend를 통해서 조건부로 태그에 class를 설정할 수 있습니다.
th:classappend는 기존에 있는 클래스들과 함께 쓰일 수 있으며, 새로운 클래스를 추가하는 데 사용됩니다. 만약 클래스가 이미 존재한다면 기존 클래스와 함께 추가하며, 클래스가 존재하지 않은 경우에는 새로운 클래스를 추가하여 설정값을 사용합니다.
예시로 th:classappend를 사용하여 페이징 처리 부분에서 버튼을 활성화하거나 비활성화 기능을 구현해 보겠습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Page</title>
</head>
<body>
<h1>Page Content</h1>
<!-- Page Buttons -->
<div>
<!-- First Page Button -->
<a th:href="@{${url}(page=1)}" th:classappend="${pageable.first} ? 'disabled' : 'active'">First</a>
<!-- Last Page Button -->
<a th:href="@{${url}(page=${pageable.totalPages})}" th:classappend="${pageable.last} ? 'disabled' : 'active'">Last</a>
</div>
</body>
</html>
th:classappend="${pageable.first} ? ‘disabled' : 'active'"를 통해 페이지가 첫 번째 페이지인 경우 이전 버튼을 비활성화, 첫 번째가 아닌 경우는 활성화시킵니다.
th:text, th:utext
Thymeleaf 문법 중 th:text는 텍스트를 나타낼 때 사용하며, th:utext는 Unescaped Text를 표시할 때 사용할 수 있습니다.
text는 출력할 문자열에 태그가 포함되어 있는 경우, 태그를 반영하지 않고 문자 그대로 출력합니다. 태그를 반영할 경우에는 utext를 사용하여 이미지나 코드와 같은 데이터를 나타낼 수 있습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>컨텐츠에 데이터 출력하기</h1>
<ul>
<li>th:text 사용 <span th:text="${data}"></span></li>
<li>th:utext 사용<span th:utext="${data}"></span></li>
</ul>
</body>
</html>@Controller
@RequestMapping("/basic")
public class BasicController {
@GetMapping("/text-unescaped")
public String textUnescaped(Model model) {
model.addAttribute("data", "Hello <b>Spring</b>!");
return "basic/text-unescaped";
}
}
th:if - th:unless
Thymeleaf 문법 중 th:if와 th:unless를 통해 자바에서 if-else 제어문을 구현할 수 있습니다.
HTML 요소를 조건에 따라 표시하거나 숨길 때 주로 사용합니다.
th:if는 조건이 참인 경우에만 해당 요소를 표시하고, th:unless는 조건이 거짓인 경우에만 해당 요소를 표시합니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome, User!</h1>
<!-- Conditional Button Display -->
<a th:if="${condition}" href="/admin">Admin Panel</a>
<a th:unless="${condition}" href="/user">User Panel</a>
</body>
</html>th:if=”${condition != null}” or condition == null과 같이 비교 연산자도 사용할 수 있습니다.
th:if와 th:unless를 사용하여 조건에 따라 요소를 동적으로 표시하거나 숨길 수 있습니다.
'Spring Framework > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 타임리프 @{..}, |리터럴| 경로 설정, form th:action, img th:src 설정 문법 (0) | 2023.12.21 |
|---|
