[Thymeleaf] Attribute (속성)

타임리프는 주로 HTML 태그의 th: xxx 속성을 치환하는 방식으로 동작한다

이때 기존 속성이 없으면 새로 만들어서 제공한다

이전 글들에서 th:text 또는 th:href 또한 이런 속성을 치환하는 방식으로 동작한 것이다

 

이번 글에서는 속성을 단순히 치환하는 것이 아닌 속성을 설정하는 방식을 살펴보겠다

 

Setting Attribute Values

• th:attrappend : 속성 값의 뒤에 값을 추가한다 (append)

뒤에 붙기 때문에 꼭 앞에 띄어쓰기를 해주어야 정상적으로 append 된다

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

<!-- 결과 -->
<input type="text" class="text large"/>

 

• th:attrprepend : 속성 값의 앞에 값을 추가한다 (prepend)

앞에 붙기 때문에 꼭 뒤에 띄어쓰기를 해주어야 정상적으로 prepend 된다

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

<!-- 결과 -->
<input type="text" class="large text"/>

 

• th:classappend : 클래스 속성에 자연스럽게 값을 추가한다

클래스 속성에 알아서 추가가 된다

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

<!-- 결과 -->
<input type="text" class="text large"/>

 

---

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

참조 링크:

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

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html