Thymeleaf 타임리프 th:classappend 여러개 / 타임리프 class 여러개, 동적으로 조건에 따라 각기 다른 클래스 주기

 

 

웹 서비스에서 템플릿 엔진을 Thymeleaf 타임리프로 채용하여 화면을 구성하는데,

 

'하나의 태그'에 서버단에서 넘겨주는

 

'각기 다른 조건'을 판단해서

 

'각기 다른 클래스'를 주고 싶은 경우가 있을 수 있다.

 

 

 

// 서버단 언어 : Java 기준 / 화면단으로 다음과 같이 조건을 넘겼다고 가정


// *조건의 값은 정수로 세팅

			mav.addObject("condition1", 1);
			mav.addObject("condition2", true);
			mav.addObject("condition3", "A");

 

 

 

<!-- 화면단 -->


<div th:classappend="${condition1 == 1 ? 'classNm1' : ''} + ${condition2 == true ? ' classNm2' : ''} + ${condition3 == 'A' ? ' classNm3' : ''}">
    태그 안 내용...
</div>

 

 

 

위 처럼 한 뒤 해당 태그가 가진 클래스명을 console.log();로 찍어본 결과 (아래 이미지)