[java] Thymeleaf에서 특정 요소의 클래스(class)를 동적으로 조작하는 방법은 무엇인가요?

29 Nov 2023

아래는 Thymeleaf에서 클래스를 동적으로 조작하는 예제 코드입니다.

<div class="container" th:class="${condition ? 'active' : ''}">
    <!-- 동적으로 클래스가 추가될 요소 -->
</div>

위의 코드에서 th:class 속성을 사용하여 클래스를 조작합니다. ${condition ? 'active' : ''}는 조건이 참일 경우 ‘active’ 클래스를 추가하고, 조건이 거짓일 경우에는 빈 문자열을 사용하여 클래스를 제거합니다.

추가로, 클래스를 동적으로 조작하는 다른 방법으로는 Thymeleaf의 ‘Fragment Expressions’을 사용하는 것입니다. 예를 들어, 아래의 코드는 파라미터로 전달받은 클래스 이름을 동적으로 요소에 추가합니다.

<div class="container" th:class="${'class-' + paramClass}">
    <!-- 동적으로 클래스가 추가될 요소 -->
</div>

위의 코드에서 ${'class-' + paramClass}는 ‘class-‘와 파라미터로 전달된 paramClass를 조합하여 클래스를 생성합니다.

이러한 방법들을 사용하면 Thymeleaf에서 동적으로 클래스를 조작할 수 있습니다.

참고 문서:

Thymeleaf 공식 문서 (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-attribute-values)