1. 내장된 스타일링 기능 사용하기

Svelte에는 CSS가 내장되어 있어 컴포넌트에 스타일을 직접 작성할 수 있습니다. 컴포넌트 파일 내부에 <style> 태그를 작성하고 CSS를 작성합니다. 이렇게 하면 해당 컴포넌트에만 적용되는 스타일이 적용됩니다.

예를 들어, 다음과 같이 Svelte 컴포넌트에 스타일을 작성할 수 있습니다:

<script>
  export let name;
</script>

<style>
  h1 {
    color: blue;
  }
</style>

<h1>Hello {name}!</h1>

2. 외부 스타일 시트 사용하기

Svelte에서는 컴포넌트 내부에서 직접 스타일을 작성하는 대신 외부 CSS 파일을 불러와 사용할 수도 있습니다. <style> 태그 대신 <link> 태그를 사용하여 외부 스타일 시트를 연결합니다.

예를 들어, 다음과 같이 외부 스타일 시트를 사용하는 방법입니다:

<script>
  export let name;
</script>

<link rel="stylesheet" href="styles.css">

<h1>Hello {name}!</h1>

3. CSS 모듈 사용하기

때로는 컴포넌트 간에 서로 다른 스타일을 적용해야 할 수도 있습니다. 이 경우, Svelte에서는 CSS 모듈을 사용하여 컴포넌트별로 유일한 클래스 이름을 생성합니다. 이렇게 하면 스타일이 겹치거나 상호 작용하는 것을 방지할 수 있습니다.

예를 들어, 다음과 같이 CSS 모듈을 사용하여 스타일을 작성하는 방법입니다:

<script>
  export let name;
</script>

<style module>
  .hello {
    color: blue;
  }
</style>

<h1 class={hello}>Hello {name}!</h1>

이렇게 CSS 모듈을 사용하면 컴포넌트에서 .hello 클래스를 사용하여 스타일을 적용할 수 있습니다.

Svelte에서는 다양한 스타일링 옵션을 제공하여 개발자가 편리하게 스타일을 관리할 수 있도록 도와줍니다. 선택한 방법에 따라 효과적인 컴포넌트 스타일링을 할 수 있습니다.