[Thymeleaf] 속성값 설정

타임리프 태그 속성값 설정 (Attribute)

타임리프는 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다.

 

1. 속성 설정

• th:* 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다.

<!-- 렌더링 전 -->
<input type="text" name="mock" th:name="userA" />

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

 

2. 속성 추가

(1) th:attrappend

• 속성 값의 뒤에 값을 추가한다.

<!-- 렌더링 전 -->
<input type="text" class="text" th:attrappend="class=' large'" />

<!-- 렌더링 후 -->
<input type="text" class="text large" />

(2) th:attrprepend

• 속성 값의 앞에 값을 추가한다.

<!-- 렌더링 전 -->
<input type="text" class="text" th:attrprepend="class='large '" />

<!-- 렌더링 후 -->
<input type="text" class="large text" />

(3) th: classappend

• class 속성에 추가한다.

<!-- 렌더링 전 -->
<input type="text" class="text" th:classappend="large" />

<!-- 렌더링 후 -->
<input type="text" class="text large" />

 

3. checked 처리

(1) HTML에서의 checked

• HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked라는 속성만 있어도 체크가 된다.

<input type="checkbox" name="active" checked="false" />

• checked="false가 되어있어도 브라우저로 확인해보면 체크박스에 체크가 되어 있는 것을 확인할 수 있다.

(2) Thymeleaf checked (th:checked)

• 타임리프의 th:checked는 값이 false인 경우 checked 속성 자체를 제거한다.

<input type="checkbox" name="active" th:checked="true" />

<!-- 렌더링 전 -->
<input type="checkbox" name="active" th:checked="false" />

<!-- 렌더링 후 -->
<input type="checkbox" name="active" />

• false이면 렌더링 과정에서 checked 속성이 제거된다.