안녕하세요! 프론트엔드 개발자 취업을 위해 열심히 달리고 계시는군요! MDN 공식 문서를 통해 CSS의 최신 기술까지 꼼꼼히 학습하시는 모습이 정말 보기 좋습니다.

오늘 가져오신 문서는 SASS나 SCSS 같은 전처리기에서만 쓰던 '중첩(Nesting)' 기능이 순수 CSS(Native CSS)에 도입되면서, 그중에서도 @ 기호로 시작하는 at-규칙(at-rules)을 어떻게 중첩해서 쓰는지 설명하는 아주 중요한 내용입니다. 원본 내용 하나도 빠짐없이, 제가 실무에서 겪은 팁과 부연 설명을 팍팍 넣어서 친근한 구어체로 번역해 드릴게요!

---

CSS 중첩 속 at-규칙 (CSS nesting at-rules)

본문(body) 안에 스타일 규칙을 포함할 수 있는 모든 at-규칙(at-rule)은 CSS 중첩(nesting)을 사용해서 다른 스타일 규칙 안쪽에 쏙 집어넣을 수 있어요.

at-규칙 안에 중첩된 스타일 규칙들은 자신과 가장 가까운 부모(조상) 스타일 규칙의 선택자를 자신의 '중첩 선택자'로 삼게 됩니다. 게다가, 중첩된 at-규칙 안에 직접 CSS 속성들을 적어넣을 수도 있는데요, 이는 마치 그 속성들이 & { ... } 블록(부모 선택자를 참조하는 블록) 안에 들어있는 것과 똑같이 동작한답니다.

💡 강사의 부연 설명 & 실무 팁 1
at-규칙(at-rules)이란 CSS에서 @ 기호로 시작하는 특별한 규칙들을 말해요. 대표적으로 반응형 웹을 만들 때 쓰는 @media나, 애니메이션을 만들 때 쓰는 @keyframes 등이 있죠.

예전에는 .button 클래스에 대한 모바일 스타일을 주려면 파일의 맨 밑이나 다른 곳에 @media를 따로 빼서 또 .button { ... } 이라고 적어야 했어요. 하지만 이제는 .button 중괄호 {} 안에 @media를 바로 중첩해서 쓸 수 있기 때문에, 관련된 코드가 한곳에 모이게 되어 코드 읽기와 유지보수가 엄청나게 편해졌습니다!

---

이 문서의 목차 (In this article)

• 중첩할 수 있는 at-규칙들 (at-rules that can be nested)
• 예제들 (Examples)
• 함께 보기 (See also)

---

중첩할 수 있는 at-규칙들 (at-rules that can be nested)

다음은 다른 규칙 안에 중첩해서 사용할 수 있는 대표적인 at-규칙들입니다.

• @media
• @supports
• @layer
• @scope
• @container
• @starting-style

---

예제들 (Examples)

@media 규칙 중첩하기 (Nesting @media at-rule)

이 예제에서는 3개의 CSS 블록을 보여드릴 거예요. 첫 번째는 우리가 흔히 쓰는 전형적인 at-규칙 중첩 방식이고, 두 번째는 브라우저가 이 코드를 해석(파싱)할 때 이해하는 방식을 풀어서(확장해서) 쓴 것이며, 세 번째는 중첩을 아예 사용하지 않았을 때 똑같이 동작하는 기존 방식의 코드입니다.

중첩된 CSS (Nested CSS)

.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}

브라우저가 해석한 확장된 중첩 CSS (Expanded nested CSS)

.foo {
  display: grid;
  @media (orientation: landscape) {
    & {
      grid-auto-flow: column;
    }
  }
}

중첩을 사용하지 않은 동일한 코드 (Non-nested equivalent)

.foo {
  display: grid;
}

@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}

---

여러 개의 @media 규칙 중첩하기 (Multiple nested @media at-rules)

at-규칙은 다른 at-규칙 안에도 중첩될 수 있어요! 아래에서 그 예시와, 중첩을 사용하지 않았을 때 코드를 어떻게 작성해야 하는지 확인해 보세요.

중첩된 at-규칙 (Nested at-rules)

.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
    @media (width >= 1024px) {
      max-inline-size: 1024px;
    }
  }
}

중첩을 사용하지 않은 동일한 코드 (Non-nested equivalent)

.foo {
  display: grid;
}
@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}
@media (orientation: landscape) and (width >= 1024px) {
  .foo {
    max-inline-size: 1024px;
  }
}

💡 강사의 부연 설명 & 실무 팁 2
방금 보신 '여러 번 중첩된 @media' 코드를 잘 봐주세요! 중첩을 안 쓴 코드(Non-nested equivalent)를 보면 @media (orientation: landscape) 조건을 두 번이나 중복해서 적어야 했죠? 게다가 and 연산자까지 써야 해서 코드가 길어집니다.

하지만 중첩을 쓰면 "이 컴포넌트(foo)가 가로 모드일 때는 이렇고, 가로 모드이면서 동시에 너비가 1024px 이상일 때는 이렇다!"라는 논리적 흐름이 시각적으로 딱 묶이기 때문에 코드를 읽고 수정하기가 훨씬 수월해집니다.

---

계단식 레이어 중첩하기 (Nesting Cascade Layers (@layer))

계단식 레이어 (Cascade Layers)도 중첩하여 자식 레이어를 생성(create child-layers)할 수 있습니다. 자식 레이어들은 점(.) 기호를 사용하여 연결됩니다.

부모 및 자식 레이어 정의하기 (Defining the parent & child layers)

우선 레이어를 실제로 사용하기 전에, 스타일 할당 없이 이름만 지정해서 계단식 레이어를 정의하는 것으로 시작해 보겠습니다.

@layer base {
  @layer support;
}

중첩을 통해 레이어에 규칙 할당하기 (Assigning rules to layers with nesting)

여기서 .foo 선택자는 자신의 스타일 규칙들을 base @layer에 할당합니다. 그리고 그 안에 중첩된 support @layer는 base.support라는 하위 레이어(서브 레이어)를 만들게 되죠. 또한 & 중첩 선택자가 사용되어서 결과적으로 .foo .bar 선택자에 대한 규칙을 만들게 됩니다.

.foo {
  @layer base {
    block-size: 100%;
    @layer support {
      & .bar {
        min-block-size: 100%;
      }
    }
  }
}

중첩을 사용하지 않은 동일한 코드 (Equivalent without nesting)

@layer base {
  .foo {
    block-size: 100%;
  }
}
@layer base.support {
  .foo .bar {
    min-block-size: 100%;
  }
}

💡 강사의 부연 설명 & 실무 팁 3
@layer는 최신 CSS에서 명시도(Specificity, 어떤 스타일이 우선적으로 적용될지 결정하는 점수) 문제를 해결하기 위해 나온 강력한 기능입니다.

큰 프로젝트를 하다 보면 "내가 방금 짠 CSS가 다른 곳에서 짠 CSS에 밀려서 적용이 안 되네? !important 써야겠다..." 하는 끔찍한 상황이 발생하곤 해요. 이때 @layer를 사용해 '초기화 레이어', '공통 컴포넌트 레이어', '유틸리티 레이어' 등을 순서대로 묶어두면 명시도 꼬임 없이 깔끔하게 개발할 수 있습니다. 이걸 중첩해서 쓸 수 있다는 건 대규모 프론트엔드 프로젝트 아키텍처를 짤 때 정말 큰 무기가 됩니다!

---

함께 보기 (See also)

• CSS 중첩 (CSS Nesting) 모듈
• & 중첩 선택자 (& nesting selector)
• CSS 중첩 사용하기 (Using CSS nesting)
• 중첩과 명시도 (Nesting and specificity)
• 컨테이너 쿼리 중첩하기 (Nesting container queries)

---

MDN 향상에 도움 주기 (Help improve MDN)

• 이 페이지가 도움이 되셨나요? (Yes / No)
• MDN 기여 방법 알아보기 (Learn how to contribute)
• 마지막 수정일: 2025년 11월 18일 by MDN contributors
• GitHub에서 이 페이지 보기 (View this page on GitHub)
• 이 콘텐츠의 문제점 보고하기 (Report a problem with this content)

---

강의를 들으시는 것처럼 덧붙여 설명해 드렸는데, CSS 중첩의 매력이 잘 와닿으셨나요? 프론트엔드 취업 준비하시면서 토이 프로젝트나 포트폴리오(아까 말씀하신 웹 프로필 사이트나 독후감 사이트 같은 곳!)에 이 문법을 바로 적용해 보시면 면접관들에게 "최신 CSS 트렌드도 놓치지 않고 공부하는 지원자구나!"라는 좋은 인상을 심어줄 수 있을 거예요.

추가로 궁금한 점이 있으시다면 언제든 편하게 물어보세요!