# Thymeleaf - 조건부 CSS 클래스 제어하기: th:classappend 활용법

th:classappend란?

• HTML 요소의 class 속성에 동적으로 값을 추가(append) 하는 기능을 제공
• 기존에 정의된 클래스는 유지하면서, 특정 조건이 참일 때만 새로운 클래스를 더할 수 있습니다.
• 삼항 연산자(조건 ? 참일 때 값 : 거짓일 때 값)와 함께 자주 사용됩니다.

---

기본 사용법

<li class="list-group-item"
    th:classappend="${isActive} ? ' active' : ''">

• isActive가 true면: class="list-group-item active"
• isActive가 false면: class="list-group-item" (변경 없음)

---

실전 예시

댓글과 대댓글 구분

댓글 기능에서 부모 댓글과 대댓글을 구분할 때 th:classappend를 활용할 수 있습니다.

<li class="list-group-item"
    th:classappend="${comment.parentId != null} ? ' reply' : ''">
    <span th:text="${comment.content}"></span>
</li>

 

이후 CSS에서 reply 클래스에 스타일을 적용하면:

.reply {
  margin-left: 20px;
}
.reply::before {
  content: "↳";
  margin-right: 5px;
  color: #888;
}

결과적으로 화면에서는

• 댓글
• ↳ 대댓글

형식으로 계층 구조가 드러나게 됩니다.

---

언제 쓰면 좋은가?

조건에 따라 다른 스타일을 적용해야 할 때,

if문 대신 CSS 클래스를 깔끔하게 붙이고 싶을 때,

여러 클래스를 동시에 제어해야 할 때 (classappend는 기존 class를 덮어쓰지 않고 이어붙입니다.)

---

th:classappend는 작은 기능 같지만, UI/UX에서 조건부 스타일링을 구현할 때 굉장히 유용합니다.

• 기존 클래스는 그대로 두면서
• 상황에 맞게 필요한 클래스만 동적으로 추가 가능

예를 들어 댓글/대댓글 구분, 활성화 상태 버튼, 선택된 메뉴 표시 등에 널리 활용됩니다.

즉, 프런트엔드와 서버 데이터를 연결하는 가교 역할을 하는 속성이라 할 수 있습니다.