index.md

---
title: 종속 계층
slug: Learn/CSS/Building_blocks/Cascade_layers
l10n:
  sourceCommit: 38029c123179b3dbccc12fb01dc558b3dcb01292
---

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

이 강의에서는 [CSS 종속](/ko/docs/Web/CSS/Cascade)과 [CSS 특정성](/ko/docs/Web/CSS/Specificity)의 기본 개념을 기반으로 하는 고급 기능인 [종속 계층](/ko/docs/Web/CSS/@layer)을 소개합니다.

CSS를 처음 사용하는 경우, 이 강의를 진행하는 것이 당장은 관련성이 적고 과정의 다른 부분보다 조금 더 학문적으로 보일 수 있습니다. 그러나 종속 계층이 무엇인지 기본 사항을 알고 있으면 프로젝트에서 종속 계층을 접하는 데 도움이 됩니다. CSS로 더 많이 작업할 수록 종속 계층을 이해하고 그 기능을 활용하는 방법을 알면 다양한 당사자, 플러그인 및 개발 팀의 CSS로 코드 기반을 관리하는 데 많은 어려움을 덜어낼 수 있습니다.

종속 계층은 여러 소스의 CSS로 작업할 때, 충돌하는 CSS 선택자와 경쟁하는 세부 사항이 있을 때 또는 [`!important`](/ko/docs/Web/CSS/important) 사용을 고려할 때 가장 적합합니다.

<table>
  <tbody>
    <tr>
      <th scope="row">전제조건:</th>
      <td>종속 및 특정성을 포함하여 CSS 작동 방식에 대한 아이디어 (
        <a href="/ko/docs/Learn/CSS/First_steps">CSS 첫 단계</a> 와 <a href="/ko/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">종속, 특정성, 상속</a>을 공부하세요).
      </td>
    </tr>
    <tr>
      <th scope="row">목적:</th>
      <td>
        종속 계층이 작동하는 방식을 알아봅시다.
      </td>
    </tr>
  </tbody>
</table>

요소에 적용된 각 CSS 속성에는, 하나의 값만 있을 수 있습니다. 브라우저의 개발자 도구에서 요소를 검사하여 요소에 적용된 모든 속성 값을 볼 수 있습니다. 도구의 "스타일" 패널에는 일치하는 선택자 및 CSS 소스 파일과 함께 검사 중인 요소에 적용된 모든 속성 값이 표시됩니다. 우선 순위가 있는 출처의 선택자는 일치하는 요소에 적용되는 값을 가집니다.

적용된 스타일 외에도 스타일 패널에는 선택한 요소와 일치하지만 종속, 특정성 또는 소스 순서로 인해 적용되지 않은 줄이 그어진 값이 표시됩니다. 줄이 그어진 스타일은 우선 순위가 같지만 특정성이 낮거나, 출처와 특정성이 일치하지만 코드 베이스에서 더 먼저 발견되었을 수 있습니다. 적용된 속성값에 대해 다양한 소스에서 여러 선언이 지워질 수 있습니다. 더 구체적인 선택자가 있는 스타일에 줄이 그어진 경우 해당 값의 출처나 중요도가 부족함을 의미합니다.

종종, 사이트의 복잡성이 증가함에 따라 스타일시트의 수가 증가하여 스타일시트의 소스 순서가 더 중요하고 복잡해집니다. 종속 계층은 이러한 코드 기반에서 스타일시트 유지 관리를 단순화합니다. 종속 계층은 궁극적으로 적용되는 CSS 선언에 대해 더 간단하고 더 나은 제어를 제공하는 명시적 특정성 컨테이너로, 웹 개발자가 특정성과 싸울 필요 없이 CSS 섹션의 우선 순위를 지정할 수 있도록 합니다.

종속 계층을 이해하려면, CSS 종속을 잘 이해해야 합니다. 아래 섹션에서는 중요한 종속 개념을 간략하게 요약합니다.

## 종속 개념에 대해 다시 보기

CSS의 C는 "Cascading"을 의미합니다. 스타일이 함께 계단식으로 배열되는 방법입니다. 사용자 에이전트는 모든 요소의 모든 속성에 할당되는 값을 결정하기 위해 매우 명확하게 정의된 여러 단계를 거칩니다. 여기에 이러한 단계를 간략하게 나열한 다음 여기에서 배우기 위해 온 단계인 종속 계층인 4단계에 대해 자세히 살펴보겠습니다.

1. **관련성:** 각 요소에 대해 선택자가 일치하는 모든 선언 블록을 찾습니다.
2. **중요도:** 일반 스타일인지 중요 스타일인지에 따라 규칙을 정렬합니다. 중요 스타일은 [`!important`](/ko/docs/Web/CSS/important) 플래그가 설정된 스타일입니다.
3. **출처:** 두 개의 중요도 버킷 각각 내에서 작성자, 사용자 또는 사용자 에이전트 출처별로 규칙을 정렬합니다.
4. **계층:** 6개의 출처 중요도 버킷 각각 내에서, 종속 계층별로 정렬합니다. 일반 선언의 계층 순서는 생성된 첫 번째 계층부터 마지막 계층까지이며, 그 다음에는 레이어가 없는 일반 스타일이 있습니다. 이 순서는 중요한 스타일에 대해 반전되며 레이어가 없는 중요한 스타일의 우선 순위가 가장 낮습니다.
5. **특정성:** 우선 순위가 있는 출처 계층의 경쟁 스타일에 대해 [특정성](/ko/docs/Web/CSS/Specificity)별로 선언을 정렬합니다.
6. **나타나는 순서:** 우선 순위가 있는 출처 계층의 두 선택자가 동일한 특정성을 갖는 경우 가장 높은 특정성을 가진 마지막으로 선언된 선택자의 속성 값이 우선합니다.

각 단계에서, "아직 실행 중" 선언만 다음 단계에서 "경쟁"으로 이동합니다. 하나의 선언만 실행 중인 경우 "승리"하고, 후속 단계는 문제가 됩니다.

### 출처과 종속

세 가지 [종속 출처 유형](/ko/docs/Web/CSS/Cascade#origin_types): 사용자 에이전트 스타일시트, 사용자 스타일시트 및 작성자 스타일시트가 있습니다. 브라우저는 각 선언을 출처과 중요도에 따라 6개의 출처 버킷으로 정렬합니다. 우선 순위에는 6개의 출처 버킷, 전환 중인 속성 및 애니메이션 중인 속성의 8가지 수준이 존재합니다. 우선 순위는 가장 낮은 우선 순위를 갖는 일반 사용자 에이전트 스타일부터, 현재 적용된 애니메이션 내의 스타일, 중요한 사용자 에이전트 스타일, 그리고 가장 높은 우선 순위를 갖는 전환 중인 스타일 순입니다.

1. 사용자 에이전트 일반 스타일
2. 사용자 일반 스타일
3. 작성자 일반 스타일
4. 애니메이션되는 스타일
5. 작성자 중요한 스타일
6. 사용자 중요 스타일
7. 사용자 에이전트 중요 스타일
8. 전환되는 스타일

"사용자 에이전트"는 브라우저입니다. "사용자"는 사이트 방문자입니다. "작성자"는 개발자인 당신입니다. {{HTMLElement('style')}} 요소가 있는 요소에 직접 선언된 스타일은 작성자 스타일입니다. 애니메이션 및 전환 스타일을 포함하지 않는 사용자 에이전트 일반 스타일은 우선 순위가 가장 낮습니다. 사용자 에이전트 중요 스타일이 가장 높습니다.

### 출처 및 특정성

각 속성에 대해 "승리" 선언은 가중치(보통 또는 중요)를 기반으로 우선 순위가 있는 출처의 선언입니다. 잠시 동안 레이어를 무시하면 우선 순위가 가장 높은 출처의 값이 적용됩니다.
우승 출처에 요소에 대한 속성 선언이 두 개 이상 있는 경우 이러한 경쟁 속성 값에 대한 선택자의 [특정성](/ko/docs/Web/CSS/Specificity)이 비교됩니다. 특정성은 다른 출처의 선택자 간에 비교되지 않습니다.

아래 예에는, 두 개의 링크가 있습니다. 첫 번째는 작성자 스타일이 적용되지 않았으므로 사용자 에이전트 스타일만 적용됩니다(및 개인 사용자 스타일이 있는 경우). 두 번째는 작성자 스타일로 설정된 [`text-decoration`](/ko/docs/Web/CSS/text-decoration) and [`color`](/ko/docs/Web/CSS/color)입니다. 작성자 스타일 시트의 선택자의 특정성이 [`0-0-0`](/ko/docs/Web/CSS/Specificity#selector_weight_categories)인 경우에도 마찬가지입니다. 작성자 스타일이 "승리"하는 이유는 다른 출처에서 충돌하는 스타일이 있을 때, 우선 순위가 없는 출처의 특정성과 관계없이 우선순위가 있는 출처의 규칙이 적용되기 때문입니다.

{{EmbedGHLiveSample("css-examples/learn/layers/basic-cascade.html", '100%', 500)}}

이 글을 쓰는 시점에서 사용자 에이전트 스타일시트의 "경쟁" 선택자는 `0-1-1`의 특정성 가중치를 갖는 `a:any-link`입니다. 작성자 스타일시트의 `0-0-0` 선택자보다 크지만 현재 사용자 에이전트의 선택자가 다르더라도 상관없습니다. 작성자 및 사용자 에이전트 출처의 특정성 가중치는 절대 비교되지 않습니다. [특정성 가중치 계산 방법](/ko/docs/Web/CSS/Specificity#how_is_specificity_calculated)에 대해 자세히 알아보세요.

출처 우선 순위는 항상 선택자 특정성보다 우선합니다. 요소 속성이 여러 출처에서 일반 스타일 선언으로 스타일이 지정된 경우, 작성자 스타일 시트는 항상 사용자 또는 사용자 에이전트 스타일 시트에서 선언된 중복 일반 속성을 재정의합니다. 스타일이 중요한 경우 사용자 에이전트 스타일시트는 항상 작성자 및 사용자 스타일보다 우선합니다. 종속 출처 우선 순위는 출처 간의 특정성 충돌이 발생하지 않도록 합니다.

계속 진행하기 전에 마지막으로 주의해야 할 사항: 출현 순서는 우선 순위의 출처에서 경쟁하는 선언이 동일한 특정성을 가질 때만 관련이 있습니다.

## 종속 계층 개요

"종속 출처 우선 순위"를 이해하지만, "종속 계층 우선 순위"란 무엇입니까? 종속 계층이 무엇인지, 순서가 어떻게 지정되는지, 스타일이 종속 계층에 어떻게 할당되는지를 설명함으로써, 이 질문에 대답할 것입니다. [일반 계층](#creating_layers), [중첩 계층](#nested_layers) 및 익명 계층을 다룰 것입니다. 먼저 종속 계층이 무엇이고 어떤 문제를 해결하는지 논의해 봅시다.

### 종속 계층 우선 순위

출처과 중요도에 따라 6단계 우선 순위가 있는 것과 유사하게 종속 계층을 사용하면 해당 출처 내에서 하위 출처 우선 순위 수준을 만들 수 있습니다.

6개의 출처 버킷 각각 내에는 여러 종속 계층이 있을 수 있습니다. [계층 생성 순서](/ko/docs/Web/CSS/@layer)는 매우 중요합니다. 출처 내 계층 간의 우선 순위를 설정하는 것은 생성 순서입니다.

일반 출처 버킷에서는, 계층이 생성된 순서대로 계층이 정렬됩니다. 우선 순위는 생성된 첫 번째 계층부터 마지막 계층까지이며 계층이 없는 일반 스타일이 그 뒤를 따릅니다.

이 순서는 중요한 스타일의 경우 반전됩니다. 계층화되지 않은 모든 중요한 스타일은 전환되지 않는 모든 일반 스타일보다 우선하는 암시적 계층으로 함께 종속됩니다. 계층이 없는 중요한 스타일은 중요한 계층이 있는 스타일보다 우선 순위가 낮습니다. 이전에 선언된 계층의 중요한 스타일은 동일한 출처 내에서 후속으로 선언된 레이어의 중요한 스타일보다 우선합니다.

이 사용 지침서의 나머지 부분에서는, 작성자 스타일에 대한 논의를 제한하지만 사용자 및 사용자 에이전트 스타일시트에도 계층이 존재할 수 있음을 명심하십시오.

### 종속 계층으로 해결할 수 있는 문제

대규모 코드 베이스에는 여러 팀, 컴포넌트 라이브러리, 프레임워크 및 타사에서 가져온 스타일이 있을 수 있습니다. 포함된 스타일시트의 수에 관계없이 이러한 모든 스타일은 단일 출처인 작성자 스타일시트에서 함께 계단식으로 배열됩니다.

여러 소스의 스타일, 특히 함께 작업하지 않는 팀의 스타일을 함께 사용하면 문제가 발생할 수 있습니다. 팀마다 방법론이 다를 수 있습니다. 하나는 특정성을 줄이는 모범 사례가 있는 반면, 다른 하나는 각 선택자에 `id`를 포함하는 표준이 있을 수 있습니다.

특정성 충돌은 빠르게 활대될 수 있습니다. 웹 개발자는 `!important` 플래그를 추가하여 "빠른 수정"을 만들 수 있습니다. 이것이 쉬운 해결책처럼 느껴질 수 있지만, 종종 특정성 전쟁을 일반적인 선언에서 중요한 선언으로 이동시킵니다.

종속 계층이 사용자, 사용자 에이전트 및 작성자 스타일 사이의 힘의 균형을 제공하는 것과 같은 방식으로, 종속 계층은 마치 출처의 각 계층이 하위 계층인 것처럼, 단일 출처 내에서 관심사를 구성하고 균형을 맞추는 구조화된 방법을 제공합니다. 계층 순서를 기반으로 스타일 우선 순위를 지정하여, 각 팀, 컴포넌트 및 타사에 대해 계층을 생성할 수 있습니다.

계층 외부의 스타일 규칙과 경쟁하지 않고 계층 내의 규칙이 함께 적용됩니다. 종속 계층을 사용하면 이러한 하위 출처 간의 특이성에 대해 걱정할 필요 없이 다른 스타일시트보다 전체 스타일시트의 우선 순위를 지정할 수 있습니다.

계층 우선 순위는 항상 선택자 특정성을 능가합니다. 우선 순위가 있는 계층의 스타일이 우선 순위가 낮은 계층보다 "우세"합니다. 손실 계층에서 선택자의 특정성은 관련이 없습니다. 특정성은 계층 내에서 경쟁 속성 값에 대해 여전히 중요하지만 각 속성에 대해 가장 높은 우선순위 계층만 고려되기 때문에 계층 간에 특정성 문제는 없습니다.

### 중첩 종속 계층으로 해결할 수 있는 문제

종속 계층을 사용하면 중첩 계층을 만들 수 있습니다. 각 종속 계층은 중첩 레이어를 포함할 수 있습니다.

예를 들어, 컴포넌트 라이브러리를 `components` 계층으로 가져올 수 있습니다. 일반 종속 계층은 컴포넌트 라이브러리를 작성자 출처에 추가하여 다른 작성자 스타일과의 특정성 충돌을 제거합니다. `components` 계층 내에서, 개발자는 각각 별도의 중첩 레이어로 다양한 테마를 정의하도록 선택할 수 있습니다. 중첩된 테마 계층의 순서는 viewport 크기 또는 [방향](/ko/docs/Web/CSS/@media/orientation)과 같은 미디어 쿼리를 기반으로 정의할 수 있습니다. 이러한 중첩 레이어는 특정성에 따라 충돌하지 않는 테마를 만드는 방법을 제공합니다.

계층을 중첩하는 기능은 컴포넌트 라이브러리, 프레임워크, 타사 위젯 및 테마를 개발하는 작업을 하는 모든 사람에게 매우 유용합니다.

중첩된 계층을 생성하는 기능은 계층 이름이 충돌할 염려도 제거합니다. [중첩 계층](#nested-layers) 부분에서 이에 대해 다룰 것입니다.

> "작성자는 계층을 생성하여 요소 기본값, 타사 라이브러리, 테마, 컴포넌트, 재정의 및 기타 스타일링 문제를 나타낼 수 있으며 각 계층 내에서 선택자 또는 특정성을 변경하지 않고 명시적인 방식으로 계층의 종속을 재정렬할 수 있습니다. 또는 계층 간 충돌을 해결하기 위해 표시 순서에 의존합니다."
>
> —[종속 및 상속 명세](https://www.w3.org/TR/css-cascade-5/#layering).

## 종속 계층 만들기

다음 방법 중 하나를 사용하여 계층을 생성할 수 있습니다.

- 규칙에 따라 `@layer`문, `@layer` 뒤에 하나 이상의 계층 이름을 사용하여 계층을 선언합니다. 이렇게 하면 스타일을 지정하지 않고 명명된 계층이 생성됩니다.
- 블록 내의 모든 스타일이 이름 또는 이름이 지정되지 않은 레이어에 추가되는 `@layer` 블록 at-규칙.
- [`@import`](/ko/docs/Web/CSS/@import) 규칙과 `layer` 키워드 또는 `layer()` 함수는 가져온 파일의 콘텐츠를 해당 계층에 할당합니다.

세 가지 방법 모두 해당 이름의 계층이 아직 초기화되지 않은 경우 계층을 생성합니다. `@layer` at-규칙 또는 `layer()`가 있는 `@import`에 계층 이름이 제공되지 않으면 새 익명(이름 없는) 계층이 생성됩니다.

> **Note:** 계층의 우선 순위는 계층이 생성되는 순서입니다. 계층에 없는 스타일 또는 "계층 없는 스타일"은 최종 암시적 레이블로 함께 계단식으로 배열됩니다.

중첩 계층에 대해 논의하기 전에 계층을 만드는 세 가지 방법을 좀 더 자세히 살펴보겠습니다.

### 명명된 계층에 대한 @layer 문 at-rule

계층 순서는 계층이 CSS에 나타나는 순서에 따라 설정됩니다. 스타일을 지정하지 않고 `@layer` 다음에 하나 이상의 계층 이름을 사용하여 계층을 선언하는 것은 [계층 순서](#ordering-layers)를 정의하는 한 가지 방법입니다.

[`@layer`](/ko/docs/Web/CSS/@layer) CSS at-규칙은 계단식 계층을 선언하고 여러 계단식 계층이 있을 때 우선 순위를 정의하는 데 사용됩니다. 다음 at-규칙은 나열된 순서대로 세 개의 계층을 선언합니다.

```css
@layer theme, layout, utilities;
```

종종, 계층 순서를 완전히 제어하기 위해 CSS의 첫 번째 줄을 이 `@layer` 선언(물론 사이트에 적합한 계층 이름 포함)으로 지정하고 싶을 것입니다.

위의 문장이 사이트 CSS의 첫 번째 줄인 경우 계층 순서는 `theme`, `layout` 및 `utilities`입니다. 위의 명령문 이전에 일부 계층이 생성된 경우 이러한 이름을 가진 계층이 아직 존재하지 않는 한 이 세 계층이 생성되어 기존 계층 목록의 끝에 추가됩니다. 그러나 동일한 이름의 계층이 이미 존재하는 경우 위의 명령문은 두 개의 새 레이어만 생성합니다. 예를 들어, `layout`이 이미 존재한다면, `theme`과 `utilities`만 생성되지만, 이 경우 계층의 순서는 `layout`, `theme`, `utilties`가 됩니다.

### 명명된 계층과 익명 계층에 대한 @layer 블록 at-규칙

블록 `@layer` 규칙을 사용하여 계층을 생성할 수 있습니다. `@layer` at-규칙 다음에 식별자와 스타일 블록이 오는 경우, 식별자는 계층 이름을 지정하는 데 사용되며 이 at-규칙의 스타일은 계층 스타일에 추가됩니다. 지정된 이름의 계층이 아직 존재하지 않는 경우 새 계층이 생성됩니다. 지정한 이름의 계층이 이미 존재하는 경우 기존 계층에 스타일이 추가됩니다. `@layer`를 사용하여 스타일 블록을 생성하는 동안 이름을 지정하지 않으면, at-규칙의 스타일이 새 익명 계층에 추가됩니다.

아래 예에서는, 4개의 블록과 1개의 인라인 `@layer` at-규칙을 사용했습니다. 이 CSS는 나열된 순서대로 다음을 수행합니다.

1. 명명된 `layout` 계층 생성
2. 이름 없는, 익명 계층 생성
3. 세 개의 계층 목록을 선언하고 `layout`이 이미 존재하므로 `theme` 및 `utilities`라는 두 개의 새 계층만 만듭니다.
4. 기존 `layout` 레이어에 추가적인 스타일 추가
5. 이름이 지정되지 않은, 두 번째 익명 계층 생성

```css
/* 파일: layers1.css */

/* 계층화되지 않은 스타일 */
body {
  color: #333;
}

/* 첫 번째 계층 생성: `layout` */
@layer layout {
  main {
    display: grid;
  }
}

/*  두 번째 계층 생성: 이름이 지정되지 않은 익명 계층 */
@layer {
  body {
    margin: 0;
  }
}

/* 세 번째 및 네 번째 : `theme` 및 `utilities` */
@layer theme, layout, utilities;

/* 이미 존재하는 `layout` 계층에 스타일 추가 */
@layer layout {
  main {
    color: #000;
  }
}

/* 다섯 번째 계층 생성: 이름이 지정되지 않은, 익명 계층 */
@layer {
  body {
    margin: 1vw;
  }
}
```

위의 CSS에서 우리는 `layout`, `<anonymous(01)>`, `theme`, `utilities`, 및 `<anonymous(02)>`의 5개 계층을 순서대로 생성했습니다. `body` 스타일 블록에 포함된 계층화되지 않은 스타일의 계층입니다. 계층 순서는 계층이 생성되는 순서이며 계층이 없는 스타일이 암시적 계층이 항상 마지막에 있습니다. 계층이 생성되면 계층 순서를 변경할 수 없습니다.

`layout`이라는 계층에 몇 가지 스타일을 할당했습니다. 명명된 계층이 아직 존재하지 않는 경우, 계층에 스타일을 할당하거나 할당하지 않고 `@layer` 규칙에 이름을 지정하면 계층이 생성됩니다. 이렇게 하면 일련의 기존 계층 이름 끝에 계층이 추가됩니다. 명명된 계층이 이미 존재하는 경우, 블록 내의 모든 스타일은 이전 기존 계층의 스타일에 추가됩니다. 기존 계층 이름을 재사용하여 블록의 스타일을 지정하면 새 계층이 생성되지 않습니다.

계층 이름을 지정하지 앟고 계층에 스타일을 지정하여 익명 계층을 만듭니다. 이름이 지정되지 않은 계층은 생성시에만 스타일을 추가할 수 있습니다.

> **참고:** 이후에 계층 이름 없이 `@layer`를 사용하면 이름이 지정되지 않은 추가 계층이 생성됩니다. 이전에 이름이 지정되지 않은 기존 계층에 스타일을 추가하지 않습니다.

`@layer` at-규칙은 이름이 지정되었는지 여부에 관계없이 계층을 생성하거나 이름이 지정된 계층이 이미 있는 경우 계층에 스타일을 추가합니다. 우리는 첫 번째 익명 계층을 `<anonymous(01)>`, 두 번째 익명 계층을 `<anonymous(02)>`라고 불렀습니다. 이들은 실제로 이름이 지정되지 않은 계층입니다. 이를 참조하거나 추가적인 스타일을 추가할 방법이 없습니다.

계층 외부에서 선언된 모든 스타일은 암시적 계층에서 함께 결합됩니다. 위의 예제 코드에서, 첫 번째 선언은 `body`에 `color:#333` 속성을 설정합니다. 이것은 모든 계층 외부에서 선언되었습니다. 계층화되지 않은 스타일의 특정성이 낮고 나타나는 순서에서 첫 번째인 경우에도, 일반 비계층화 선언이 일반 계층화 선언보다 우선합니다. 이것은 비계층화된 CSS가 코드 블록에서 처음으로 선언되었음에도 불구하고, 이러한 비계층화 스타일을 포함하는 암시적 계층이 마치 마지막으로 선언된 계층인 것처럼 우선 순위를 갖는 이유를 설명합니다.

일련의 레이어가 선언된 `@layer theme, layout, utilities;` 행에서, `theme` 및 `utilities` 계층만 생성되었습니다. `layout`은 첫 번째 줄에 이미 생성되어 있습니다. 이 선언은 이미 생성된 계층의 순서를 변경하지 않습니다. 현재 계층이 선언되면 재정렬 할 수 있는 방법이 없습니다.

다음 대화형 예제에서는, 두 개의 계층에 스타일을 할당하고 프로세스에서 계층을 만들고 이름을 지정합니다. 이미 존재하기 때문에, 처음 사용할 때 생성되므로, 마지막 줄에 선언해도 아무 일도 일어나지 않습니다.

{{EmbedGHLiveSample("css-examples/learn/layers/layer-order.html", '100%', 500)}}

마지막 줄인 `@layer site, page;`를 이동하여 첫 번째 줄로 만들어보세요. 무슨 일이 일어나나요?

#### 계층 생성 및 미디어 쿼리

[media](/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries) 또는 [feature](/ko/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries) 쿼리를 사용하여 계층을 정의하고 미디어가 일치하지 않거나 기능이 지원되지 않으면 계층이 생성되지 않습니다. 아래 예는 장치 또는 브라우저의 크기를 변경하면 계층 순서가 어떻게 변경될 수 있는지 보여줍니다. 이 예에서는 더 넓은 브라우저에서만 `site` 레이어를 생성합니다. 그런 다음 `page` 및 `site` 계층에 순서대로 스타일을 지정합니다.

{{EmbedGHLiveSample("css-examples/learn/layers/media-order.html", '100%', 500)}}

넓은 스크린에서, `site` 레이어는 첫 번째 줄에 선언되며, 이는 `site`가 `page`보다 우선 순위가 낮다는 것을 의미합니다. 그렇지 않으면, 좁은 화면에서 나중에 선언되기 때문에 `site`가 `page`보다 우선합니다. 그래도 작동하지 않으면 미디어 쿼리에서 `50em`을 `10em` 또는 `100em`으로 변경해 보세요.

### @import를 사용하여 이름이 지정된 계층과 익명 계층으로 스타일시트 가져오기

[`@import`](/ko/docs/Web/CSS/@import) 규칙을 사용하면 사용자가 다른 스타일 시트의 스타일 규칙을 CSS 파일이나 {{htmlelement('style')}} 요소 안으로 직접 가져올 수 있습니다.

스타일시트를 가져올 때, 스타일시트 또는 `<style>` 블록 내의 모든 CSS 스타일 앞에 `@import` 문을 정의해야 합니다. `@import` 문은 스타일보다 먼저 와야 하지만, 계층에 스타일을 할당하지 않고 하나 이상의 계층을 생성하는 `@layer` at-규칙이 선행될 수 있습니다(`@import` 앞에 [`@charset`](/ko/docs/Web/CSS/@charset) 규칙이 올 수도 있습니다).

스타일시트를 명명된 계층, 중첩된 명명 계층 또는 익명 계층으로 가져올 수 있습니다. 다음 계층은 스타일시트를 각각 `components` 계층, `components` 계층 내의 중첩된 `dialog` 계층 및 이름이 지정되지 않은 계층으로 가져옵니다.

```css
@import url("components-lib.css") layer(components);
@import url("dialog.css") layer(components.dialog);
@import url("marketing.css") layer();
```

둘 이상의 CSS 파일을 단일 계층으로 가져올 수 있습니다. 다음 선언은 두 개의 개별 파일을 단일 `social` 계층으로 가져옵니다.

```css
@import url(comments.css) layer(social);
@import url(sm-icons.css) layer(social);
```

[미디어 쿼리](/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries) 및 [기능 쿼리](/ko/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)를 사용하여 특정 조건에 따라 스타일을 가져오고 계층을 만들 수 있습니다. 다음은 브라우저가 `display: ruby`를 지원하고 가져오는 파일이 화면 너비에 따라 달라지는 경우에만 스타일 시트를 `international` 계층으로 가져옵니다.

```css
@import url("ruby-narrow.css") layer(international) supports(display: ruby) and
  (width < 32rem);
@import url("ruby-wide.css") layer(international) supports(display: ruby) and
  (width >= 32rem);
```

> **참고:** 스타일시트를 연결하는 {{HTMLElement('link')}} 메소드와 동등한 것은 없습니다. 스타일시트 내에서 `@layer`를 사용할 수 없는 경우 `@import`를 사용하여 스타일시트를 계층으로 가져옵니다.

## 중첩 종속 계층 개요

중첩 계층은 명명된 계층 또는 익명 계층 내의 계층입니다. 각 종속 계층은 익명 계층이라도 중첩 계층을 포함할 수 있습니다. 다른 계층으로 가져온 계층은 해당 계층 내에서 중첩된 계층이 됩니다.

### 중첩 계층의 장점

계층 중첩 기능을 통해 팀은 다른 팀이 계층을 계층으로 가져올지 여부에 대해 걱정하지 않고 종속 계층을 생성할 수 있습니다. 마찬가지로 중첩을 사용하면 해당 스타일시트 자체에 계층이 있는지 걱정할 필요 없이 타사 스타일 시트를 계층으로 가져올 수 있습니다. 계층을 중첩할 수 있으므로 외부 스타일 시트와 내부 스타일 시트 간에 계층 이름이 충돌하는 것에 대해 걱정할 필요가 없습니다.

### 중첩 종속 계층 만들기

중첩 계층은 일반 계층에 대해 설명한 것과 동일한 방법을 사용하여 만들 수 있습니다. 예를 들어, 점 표기법을 사용하여 `@layer` at-규칙 다음에 하나 이상의 계층 이름을 사용하여 만들 수 있습니다. 다중 점과 계층 이름은 다중 중첩을 나타냅니다.

이름이 있든 없든 다른 블록 `@layer` at-규칙을 중첩하면 중첩된 블록이 중첩된 계층이 됩니다. 마찬가지로, `layer` 키워드 또는 `layer()` 함수를 포함하는 `@import` 선언으로 스타일 시트를 가져오면, 해당 스타일이 해당 명명된 계층 또는 익명 계층에 할당됩니다. `@import` 문에 계층이 포함된 경우, 해당 계층은 익명 또는 이름이 지정된 계층 내의 중첩 계층이 됩니다.

다음 예를 살펴보겠습니다.

```css
@import url("components-lib.css") layer(components);
@import url("narrowtheme.css") layer(components.narrow);
```

첫 번째 줄에서, `component-lib.css`를 `components` 계층으로 가져옵니다. 해당 파일에 이름이 지정되었는지 여부에 관계없이, 계층이 포함된 경우, 해당 계층은 `components` 계층 내에서 중첩된 계층이 됩니다.

두 번째 줄은 `narrowtheme.css`를 `components`의 하위 계층인 `narrow` 계층으로 가져옵니다. 중첩된 `components.narrow`는 `components` 계층 내의 마지막 계층으로 생성됩니다. 단, `components-lib.css`에 이미 `narrow` 계층이 포함되어 있으면 `narrowtheme.css`의 콘텐츠는 다음과 같습니다. `components.narrow` 중첩 계층에 추가됩니다. `components.<layerName>` 패턴을 사용하여 `components` 계층에 추가로 중첩된 명명된 계층을 추가할 수 있습니다. 앞에서 언급했듯이, 이름 없는 계층을 만들 수는 있지만 나중에 액세스할 수는 없습니다.

다음 명령문을 사용하여 이름이 지정된 계층으로 [`layers1.css`](#anonymous-and-named-layer-block-at-rule-assignment)를 가져오는 다른 예를 살펴보겠습니다.

```css
@import url(layers1.css) layer(example);
```

이렇게 하면 일부 선언과 5개의 중첩 계층(`example.layout`, `example.<anonymous(01)>`, `example.theme`, `example.utilities`, 및 `example.<anonymous(02)>`)이 포함된 `example`이라는 단일 계층이 생성됩니다.

명명된 중첩 계층에 스타일을 추가하려면, 점 표기법을 사용합니다.

```css
@layer example.layout {
  main {
    width: 50vw;
  }
}
```

## 계층의 순서에 따른 우선 순위 결정

계층 순서에 따라 우선 순위가 결정됩니다. 따라서 계층의 순서가 매우 중요합니다. 종속이 출처와 중요도에 따라 정렬하는 것과 같은 방식으로, 종속은 각 CSS 선언을 출처 레이어와 중요도에 따라 정렬합니다.

### 일반 종속 계층의 우선 순위

```css
@import url(A.css) layer(firstLayer);
@import url(B.css) layer(secondLayer);
@import url(C.css);
```

위의 코드는 두 개의 명명된 계층과 하나의 명명되지 않은 계층을 생성합니다. 세 개의 파일(`A.css`, `B.css`, 및 `C.css`)에 추가 계층이 포함되어 있지 않다고 가정해 보겠습니다. 다음 목록은 이러한 파일 내부 및 외부에서 선언된 스타일이 최소(1) 우선 순위에서 가장 높은(10) 우선 순위로 정렬되는 위치를 보여줍니다.

1. firstLayer 일반 스타일 (`A.css`)
2. secondLayer 일반 스타일 (`B.css`)
3. 계층화되지 않은 일반 스타일 (`C.css`)
4. 인라인 일반 스타일
5. 애니메이션 스타일
6. 계층화되지 않은 중요 스타일 (`C.css`)
7. secondLayer 중요 스타일 (`B.css`)
8. firstLayer 중요 스타일 (`A.css`)
9. 인라인 중요 스타일
10. 전환 스타일

계층 내부에 선언된 일반 스타일은 가장 낮은 우선 순위를 받으며 계층이 생성된 순서대로 정렬됩니다. 처음 생성된 계층의 일반 스타일이 가장 낮은 우선 순위를 가지며, 마지막으로 생성된 계층의 일반 스타일이 가장 높은 우선 순위를 갖습니다. 즉, `firstLayer` 내에서 선언된 일반 스타일은 충돌이 있는 경우 목록의 후속 스타일로 재정의됩니다.

다음은 계층 외부에서 선언된 스타일입니다. `C.css`의 스타일은 계층으로 가져오지 않았으며, `firstLayer` 및 `secondLayer`에서 충돌하는 스타일을 재정의합니다. 계층에 선언되지 않은 일반 스타일은 일반적으로 중요한 계층 스타일보다 항상 우선 순위가 높습니다.

인라인 스타일은 [`style` 속성](/ko/docs/Web/HTML/Global_attributes/style)을 사용하여 선언됩니다. 이 방법으로 선언된 일반 스타일은 계층이 없는 스타일 시트와 계층이 있는 스타일 시트(`firstLayer – A.css`, `secondLayer – B.css` 및 `C.css`)에 있는 일반 스타일보다 우선합니다.

애니메이션 스타일은 인라인 일반 스타일을 포함하여 모든 일반 스타일보다 우선 순위가 높습니다.

중요한 스타일, 즉 `!important` 플래그를 포함하는 속성 값은 목록에서 이전에 언급한 스타일보다 우선합니다. 일반 스타일의 역순으로 정렬됩니다. 계층 외부에서 선언된 중요한 스타일은 계층 내에서 선언된 스타일보다 우선 순위가 낮습니다. 계층 내에서 발견되는 중요한 스타일도 계층 생성 순서대로 정렬됩니다. 중요한 스타일의 경우 마지막으로 생성된 계층이 가장 낮은 우선 순위를 가지며, 처음 생성된 계층이 선언된 계층 중 가장 높은 우선 순위를 가집니다.

인라인 중요 스타일은 다른 곳에서 선언된 중요 스타일보다 다시 우선 순위가 높습니다.

전환 스타일이 가장 높은 우선 순위를 가집니다. 일반 속성 값이 전환될 때, 인라인 중요한 스타일을 포함하여 다른 모든 속성 값 선언보다 우선합니다(그러나 전환하는 동안에만).

{{EmbedGHLiveSample("css-examples/learn/layers/layer-precedence.html", '100%', 500)}}

이 예시에는, 스타일이 없는 두 개의 인라인 레이어 `A`와 `B`, 레이어가 없는 스타일의 블록, 이름이 지정된 레이어 `A`와 `B`에 있는 두 개의 스타일 블록이 있습니다.

`style` 속성을 사용하여 `h1` 요소에 추가된 인라인 스타일은 일반 `color`와 중요한 `background-color`를 설정합니다. 일반 인라인 스타일은 모든 계층 및 계층화되지 않은 일반 스타일을 재정의합니다. 중요한 인라인 스타일은 계층이 있거나 없는 일반 및 중요한 작성자 스타일을 모두 재정의합니다. 작성자 스타일이 중요한 인라인 스타일을 재정의할 방법이 없습니다.

일반적인 `text-decoration` 및 중요한 `box-shadow`는 `style` 인라인 스타일의 일부가 아니므로 재정의할 수 있습니다. 인라인이 아닌 일반 스타일의 경우 계층이 없는 스타일이 우선합니다. 중요한 스타일의 경우 계층 순서도 중요합니다. 계층이 없는 일반 스타일이 계층에 설정된 모든 일반 스타일을 무시하고 중요한 스타일을 사용하는 동안 우선 순위는 역순입니다. 계층이 없는 중요한 스타일은 계층이 있는 스타일보다 우선 순위가 낮습니다.

계층 내에서만 선언되는 두 가지 스타일은 일반적인 중요도를 갖는 `font-style`과 `!important` 플래그가 있는 `font-weight` 입니다. 일반 스타일의 경우, 마지막으로 선언된 `B` 계층이 이전에 선언된 계층 `A`의 스타일을 재정의합니다. 일반 스타일의 경우 이후 계층이 이전 계층보다 우선합니다. 중요한 스타일의 경우 우선 순위가 반대로 됩니다. 중요한 `font-weight` 선언의 경우, 먼저 선언된 계층 `A`가 마지막으로 선언된 계층 `B`보다 우선합니다.

첫 번째 줄을 `@layer A, B;`에서 `@layer B, A;`로 변경하여 계층 순서를 바꿀 수 있습니다. 그것을 시도하세요. 이로 인해 어떤 스타일이 변경되고, 어떤 스타일이 그대로 유지됩니까? 왜?

계층 순서는 계층이 CSS에 나타나는 순서에 따라 설정됩니다. 첫 번재 줄에서, `@layer`를 사용하여 계층 이름을 지정하고 세미콜론으로 끝나는, 계층 이름을 지정하지 않고 계층을 선언했습니다. 이 줄을 생략했다면, 결과는 같았을 것입니다. 왜? 명명된 @layer 블록에 A, B 순서로 스타일 규칙을 할당했습니다. 첫 번째 줄에 두 개의 계층이 생성되었습니다. 그렇지 않았다면 이러한 규칙 블록이 해당 순서대로 생성했을 것입니다.

두 가지 이유로 첫 번째 줄을 포함했습니다. 첫 번째는, 쉽게 줄을 편집하고 순서를 전환할 수 있고, 두 번째는 종종 순서 계층을 미리 선언하는 것이 계층 순서 관리를 위한 모범 사례임을 알 수 있기 때문입니다.

요약하면:

- 계층 우선 순위는 계층이 생성된 순서입니다.

- 한 번 생성된 계층은, 순서를 변경할 수 없습니다.

- 일반 스타일의 계층 우선 순위는 계층이 생성되는 순서입니다.

- 계층이 없는 일반 스타일은 일반 계층이 있는 스타일보다 우선합니다.

- 중요한 스타일에 대한 계층 우선 순위가 역전되어 이전에 생성된 계층이 우선합니다.

- 계층화된 모든 중요 스타일은 계층화되지 않은 중요(및 일반) 스타일보다 우선합니다.

- 일반 인라인 스타일은 계층화 여부에 관계엇이 모든 일반 스타일보다 우선합니다.

- 전환되는 스타일을 제외하고, 중요한 인라인 스타일은 다른 모든 스타일보다 우선합니다.

- 작성자 스타일이 중요한 인라인 스타일을 무시할 수 있는 방법이 없습니다(일시적인 전환은 제외).

### 중첩된 종속 계층의 우선 순위

중첩 계층의 종속 우선 순위는 일반 계층과 유사하지만, 계층 내에 포함됩니다. 우선 순위는 중첩 계층 생성 순서를 기반으로 합니다. 계층의 중첩되지 않은 스타일은 중첩된 일반 스타일보다 우선하며, 중요한 스타일의 경우 우선 순위가 반대입니다. 중첩된 계층 사이의 특정 가중치는 중요하지 않지만, 중첩된 계층 내에서 스타일이 충돌하는 경우에는 중요합니다.

다음은 `components` 계층과 `components.narrow` 중첩 계층에 스타일을 생성 및 추가하고 새로운 `components.wide` 계층에 스타일을 생성 및 추가합니다.

```css
@import url("components-lib.css") layer(components);
@import url("narrowtheme.css") layer(components.narrow);

@layer components {
  :root {
    --theme: red;
    font-family: serif !important;
  }
}
@layer components.narrow {
  :root {
    --theme: blue;
    font-family: sans-serif !important;
  }
}
@layer components.wide {
  :root {
    --theme: purple;
    font-family: cursive !important;
  }
}
```

계층이 없는 일반 스타일이 계층이 있는 일반 스타일보다 우선하고, 계층 내에서 중첩되지 않은 스타일이 일반 중첩 스타일보다 우선하므로, `빨간색`이 다른 `테마` 색상보다 우선합니다.

중요한 스타일의 경우, 계층화된 스타일이 계층화되지 않은 스타일보다 우선하며, 이전에 선언된 계층의 중요한 스타일이 나중에 선언된 계층보다 우선합니다. 이 예에서, 중첩 계층 생성 순서는 `components.narrow`, 그 다음이 `components.wide`이므로 `components.narrow`의 중요한 스타일이 `components.wide`의 중요한 스타일보다 우선하므로 `sans-serif`가 우선합니다.

## 실력을 시험해보세요

이 기사의 끝에 도달했지만, 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기 전에 이 정보를 기억하고 있는지 확인하는 추가 테스트를 찾을 수 있습니다. [실력을 시험해보세요: 종속, 2번째 작업](/ko/docs/Learn/CSS/Building_blocks/Cascade_tasks#task_2)을 참조하세요.

## 요약

이 기사의 대부분을 이해했다면, 잘 한 것입니다. 이제 CSS 종속 계층의 기본 메커니즘에 익숙해졌습니다. 다음으로 [박스 모델](/ko/docs/Learn/CSS/Building_blocks/The_box_model)을 자세히 살펴보겠습니다.

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}