Svelte에서 클래스 바인딩은 HTML 요소에 동적으로 클래스를 추가 또는 제거하는 데 사용됩니다. 이는 상태에 따라 요소의 스타일이 변경되어야 할 때 유용합니다.

Svelte에서 클래스 바인딩을 설정하려면 다음 단계를 따르세요.

1. Svelte 컴포넌트에서 상태 변수를 정의합니다. 예를 들어, active라는 상태 변수를 정의합니다.

let active = true;

1. HTML 요소에 클래스 바인딩을 적용합니다. class 속성에 중괄호({})를 사용하고, 클래스명과 해당 클래스를 추가 또는 제거할 조건을 작성합니다.

<div class="{active ? 'active' : ''}">
  <!-- 내용 -->
</div>

위의 코드에서는 active 변수가 true이면 active 클래스가 추가되고, false이면 active 클래스가 제거됩니다.

1. 상태 변수의 값이 변경될 때 클래스 바인딩도 업데이트되어 HTML 요소의 스타일이 갱신됩니다.

다음은 완전한 예제입니다.

<script>
  let active = true;

  function toggleClass() {
    active = !active;
  }
</script>

<style>
  .active {
    color: red;
    font-weight: bold;
  }
</style>

<button on:click={toggleClass}>Toggle Class</button>

<div class="{active ? 'active' : ''}">
  This is a div with a dynamic class binding.
</div>

위의 코드에서 active 변수가 토글될 때마다 버튼을 클릭하여 active 클래스가 추가되거나 제거됩니다. active 클래스가 적용되면 텍스트가 빨간색이 되고 볼드체로 표시됩니다.

이것이 Svelte에서 클래스 바인딩을 사용하는 방법입니다. Svelte을 사용하면 컴포넌트 기반 개발을 간편하게 할 수 있습니다. 자세한 내용은 Svelte 공식 문서를 참고하세요.