아래는 Svelte에서 클래스 바인딩을 사용하는 예시입니다.

<script>
  let isActive = false;
</script>

<style>
  .active {
    color: blue;
  }
</style>

<div class={isActive ? 'active' : ''}>
  이 엘리먼트의 클래스는 isActive의 값에 따라 동적으로 변경됩니다.
</div>

위의 예시에서는 isActive라는 변수를 사용하여 클래스 바인딩을 구현합니다. isActive 값이 true인 경우 ‘active’ 클래스가 추가되고, false인 경우 클래스가 제거됩니다. 이렇게 엘리먼트의 클래스를 동적으로 조작하여 스타일을 변경할 수 있습니다.

Svelte에서 클래스 바인딩은 위의 예시처럼 표현식을 사용하여 복잡한 조건에 따라 클래스를 동적으로 추가하거나 제거할 수 있습니다. 이를 통해 좀 더 유연하고 동적인 사용자 인터페이스를 구현할 수 있습니다.

더 자세한 내용은 Svelte 공식 문서에서 클래스 바인딩을 확인할 수 있습니다. Svelte 공식 문서 - 클래스 바인딩