CSS @layer 규칙

정의와 사용법

CSS @layer 규칙은 CSS 층叠 층(cascade layers)의 스타일 평가 순서를 제어할 수 있습니다.

이는 특정 순서로 평가할 필요가 있는 규칙 집합을 특정 층으로 포장한 후에 층을 먼저 정의함으로써 구현됩니다.

@layer 이름을 가질 수도 있고 가지지 않을 수도 있습니다.

이름 없음 @layer 이름을 가진이름이 없는 층이름이 없는 층은 선언 순서대로 평가됩니다. (아래 예제 참조). 기본 층叠 순서(상에서 하로)를 따릅니다.

유일한 이름을 가진 @layer 이름을 가진이름이 있는 층이름이 있는 층을 사용하여 필요한 정확한 층叠 순서를 지정할 수 있습니다. (아래 예제 참조). 순서는 가장 불명확한 것에서 가장 구체적인 것으로, 왼쪽에서 오른쪽으로 정렬됩니다.

예제

예제 1

이름이 없는 층을 사용하여 (기본 층叠 순서 - 상에서 하로) sourceMapping

/* 층 1 */
@layer {
  body {
    background: pink;
  }
}
/* 층 2 */
@layer {
  body {
    background: lightblue; /* 마지막 층이 적용됨 */
  }
}

본인이 직접 시도해 보세요

예제 2

이름이 있는 층을 사용하여 (필요한 정확한 층叠 순서를 지정합니다):

/* 정확한 층叠 순서를 지정합니다 */
@layer bgblue, bgpink;
/* 층 1 */
@layer bgpink {
  body {
    background: pink; /* 적용됨 */
  }
}
/* 층 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

본인이 직접 시도해 보세요

CSS 문법

@layer 이름 {
  css 선언;
}

속성 값

브라우저 지원

표格에서의 숫자는 @ 규칙을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.