Svelte) Layer Style

 

@layer

- Svelte framework에서 사용되는 기능 중 하나로 style sheet를 layer 별로 정리 및 관리할 수 있게 도와줌

- layer는 style sheet를 그룹화하여 원하는 방식으로 스타일을 구성하고 관리할 수 있게 해주는 방법

- 더 구조적이고 모듈화된 스타일 시트를 작성할 수 있으며 CSS Class 간 충돌을 방지하는데 도움이 됨

 

- Base Layer

 : 웹 페이지의 기본 스타일을 정의하는데 사용

 : font, text style, 기본 색상, 전체 페이지의 배경 등과 같은 기본적인 스타일 규칙이 들어감

 : 웹 페이지의 모든 요소에 공통적으로 적용되는 스타일 정의

 

- Components Layer

 : 페이지 내에서 사용되는 구성요소 (ex) 버튼, 카드, 네비게이션 메뉴 등)에 대한 스타일ㄹ을 정의하는데 사용

 : 각 구성 요소의 디자인과 레이아웃에 관한 스타일 규칙이 포함

 : 컴포넌트간 일관된 스타일을 유지하고 재사용성을 높일 수 있음

 

- Utilities Layer

 : 유틸리티 클래스나 스타일 클래스를 정의하는데 사용

 : 인라인 스타일을 추가하고나 특정 스타일을 재사용하기 위해 클래스를 정의하는데 사용

 : 스타일을 빠르게 적용하고 조절하기 위해 사용

 : ex) text 정렬, 여백 조절, 숨김 클래스 등

 

 

example)

// styles > main.css
<style>
  @layer base {
    body {
      background-color: lightgray;
    }
  }

  @layer components {
    .button {
      background-color: blue;
      color: white;
    }
  }

  @layer utilities {
    .text-center {
      text-align: center;
    }
  }
</style>