[Thymeleaf] 타임리프 속성 설정, 추가, checkbox

타임리프

태그 속성

타임리프는 HTML 태그에 th:* 속성을 넣어서 동작한다. *에 들어간 속성을 기존 속성을 대체한다. 기존 속성이 없다면 새로 만들어 사용한다.

 

속성 설정

th:* 에서 *에 name 속성이 들어갔기 때문에 기존 name의 값이 타임리프 렌더링 후 name="userA"로 대체가 될 것이다. 만일 기존 name의 값이 없다면 새로 만들게 된다.

<input type="text" name="mock" th:name="userA" />

<!-- 렌더링 후 결과 -->
후 <input type="text" name="userA" />

 

속성 추가

th:attrappend	속성 값의 뒤에 값을 추가한다.
th:attrprepend	속성 값의 앞에 값을 추가한다.
th:classappend	class 속성에 자연스럽게 추가한다.

- th:attrappend = <input type="text" class="text" th:attrappend="class='large'" /><br/>
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large'" /><br/>
- th:classappend = <input type="text" class="text" th:classappend="large" /><br/>

 

Checked 처리

- checked o <input type="checkbox" name="active" th:checked="true" /><br/>
- checked x <input type="checkbox" name="active" th:checked="false" /><br/>

<!-- HTML checked -->
- checked=false <input type="checkbox" name="active" checked="false" /><br/>

HTML 에서 checkbox를 이용할 때 위같은 checked라는 속성이 있다면 checked 처리가 되어버린다.

속성의 값과는 상관없이 checked 속성만 있어도 체크가 되기 때문에 true, false 값을 사용하는 개발자 입장에서는 불편하다. 타임리프에서는 이를 해결해서 편의를 제공해준다. th:checked 값이 fasle 인 경우 속성 자체를 제거한다.

<input type="checkbox" name="active" th:checked="false" />
<!-- 타임리프 렌더링 후 -->
<input type="checkbox" name="active" />

---

출처 : https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의