코드 그라데이션
Thymeleaf (8) 속성 값 설정 본문
속성 값 설정
타임리프 태그 속성(Attribute)
- 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다.
- th:* 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다.
BasicController 추가
@GetMapping("/attribute")
public String attribute() {
return "basic/attribute";
}
/resources/templates/basic/attribute.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>속성 설정</h1>
<!-- 사용자 입력 필드에 이름 속성 설정 -->
<input type="text" name="mock" th:name="userA"/>
<h1>속성 추가</h1>
<p>th:attrappend, th:attrprepend 및 th:classappend를 사용하여 클래스 속성 추가</p>
<!-- th:attrappend를 사용하여 클래스 속성에 'large'를 추가 -->
- th:attrappend = <input type="text" class="text" th:attrappend="class='large'"/><br/>
<!-- th:attrprepend를 사용하여 클래스 속성에 'large'를 추가 -->
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large'"/><br/>
<!-- th:classappend를 사용하여 클래스 속성에 'large'를 추가 -->
- th:classappend = <input type="text" class="text" th:classappend="large"/><br/>
<h1>checked 처리</h1>
<p>체크박스의 checked 속성을 설정</p>
<!-- th:checked를 사용하여 체크박스를 체크 상태로 설정 -->
- checked o <input type="checkbox" name="active" th:checked="true"/><br/>
<!-- th:checked를 사용하여 체크박스를 체크 해제 상태로 설정 -->
- checked x <input type="checkbox" name="active" th:checked="false"/><br/>
<!-- checked 속성을 직접 설정하여 체크박스 상태를 제어 -->
- checked=false <input type="checkbox" name="active" checked="false"/><br/>
</body>
</html>
속성 설정
속성 추가
checked 처리
실행하면
728x90
'Spring > Thymeleaf' 카테고리의 다른 글
Thymeleaf (10) 주석 (0) | 2023.11.16 |
---|---|
Thymeleaf (9) 반복 (0) | 2023.11.15 |
Thymeleaf (7) 연산 (0) | 2023.11.13 |
Thymeleaf (6) 리터럴(Literals) (1) | 2023.11.12 |
Thymeleaf (5) URL 링크 (0) | 2023.11.10 |
Comments