레이어에 스타일 추가

레이어 내부에 인라인으로 스타일을 추가하거나(@layer 블록 안에 작성) @import를 통해 추가할 수 있습니다(가져온 스타일시트를 레이어에 할당).

레이어 이름을 지정한 @layer 블록 안에 규칙을 감쌉니다:

여러 개의 별도 @layer 블록에서 하나의 레이어에 스타일을 추가할 수 있습니다. 모든 선언이 해당 레이어에 병합됩니다:

이름이 없는 @layer 블록은 이름 없는 레이어를 만듭니다. 이름 없는 레이어에는 나중에 스타일을 추가할 수 없으며, 작성된 위치에 존재합니다:

가져온 전체 스타일시트를 하나의 레이어에 할당합니다:

모듈식 프로젝트에서는 각 컴포넌트 파일이 components 레이어에 스타일을 추가합니다:

사스와 PostCSS는 모두 @layer와 함께 사용할 수 있습니다. 기본 진입 파일에서 레이어를 정의하고 @use 또는 @import를 사용해 해당 레이어에 추가하는 컴포넌트 부분 파일을 포함할 수 있습니다.

인라인 스타일(style="" 속성)은 레이어의 영향을 받지 않으며, 항상 모든 레이어의 스타일보다 우선합니다. 스타일시트 규칙(<style> 블록 포함)만 레이어에 배치할 수 있습니다.

Chrome DevTools는 스타일 패널에 레이어 경계를 표시합니다. 우선순위가 낮은 레이어의 규칙이 더 높은 레이어에 의해 재정의되면 취소선으로 표시하고, 우선 적용된 레이어를 식별해 줍니다.

@layer를 지원하지 않는 브라우저는 모든 @layer 블록을 일반 CSS 블록으로 처리합니다(모든 내용을 렌더링합니다). 캐스케이드 동작은 달라지지만 스타일이 사라지지는 않습니다. 안전을 위해 기능에 의존하는 코드는 @supports (@layer selector)로 감싸세요.

이전 전략:

1. 주요 CSS 파일의 맨 위에서 레이어를 선언합니다
2. 기존 CSS 섹션을 각각 해당 레이어 블록으로 감쌉니다
3. 테스트하여 새로 발생하는 우선순위 문제를 수정합니다
4. 시간이 지나면서 불필요한 높은 명시도의 선택자를 제거합니다

여러 개의 별도 @layer 블록에 있는 스타일을 동일한 이름의 레이어에 어떻게 추가하나요?

이름이 지정된 @layer name { } 블록을 사용해 레이어에 스타일을 추가합니다. 이러한 블록은 여러 파일로 나눌 수 있으며 모두 하나로 병합됩니다. @import layer()를 사용해 가져온 스타일시트를 레이어에 할당합니다. 이름 없는 레이어는 다시 열 수 없습니다. 인라인 스타일은 항상 레이어로 선언된 스타일보다 우선합니다.