안녕하세요! 프론트엔드 개발의 든든한 기반, CSS 문법 중에서도 매우 중요한 'At-규칙(At-rules)' 문서를 가져오셨군요!

반응형 웹을 만들 때 필수적인 @media, 멋진 애니메이션을 위한 @keyframes, 폰트를 불러오는 @font-face 등, CSS 파일 안에서 @ 기호로 시작하는 코드들을 많이 보셨을 텐데요. 이 문서는 바로 그 녀석들이 어떤 종류가 있고 어떻게 동작하는지 전체적으로 훑어보는 지도(Map) 같은 가이드입니다.

실무에서 정말 자주 쓰이는 핵심 개념이니, 하나도 빠짐없이 알기 쉬운 구어체로 완벽하게 번역해 드릴게요!

---

At-규칙 (At-rules)

At-규칙(At-rules)은 CSS에게 어떻게 행동해야 할지 지시하는 CSS 구문 (CSS statements)입니다. 이 규칙들은 골뱅이 기호(@, U+0040 COMMERCIAL AT)로 시작하고, 그 바로 뒤에 식별자(이름)가 따라오는 형태입니다. At-규칙은 이 맨 앞의 @키워드부터 시작해서 다음 세미콜론(;)이 나올 때까지, 혹은 다음 CSS 블록(중괄호 { })이 나올 때까지 중 먼저 오는 곳까지의 모든 내용을 포함합니다.

At-규칙은 스타일 규칙(style rules)이나 다른 at-규칙들을 그룹화하고 구조화하는 데 사용됩니다. 또한, 선택된 특정 콘텐츠에 직접적으로 연결되지 않는 전역적인 스타일 정보를 선언하거나, 외부 파일 불러오기(import) 및 네임스페이스 키워드 매핑 같은 문법적 구조를 관리하는 역할도 합니다.

💡 강사의 실무 팁 1
일반적인 CSS 코드가 "이 태그(선택자)를 이렇게 꾸며줘!"라면, At-규칙은 브라우저 자체에게 내리는 "시스템 설정 명령어"라고 생각하시면 편합니다. "이 폰트 파일 좀 다운받아와(@font-face)", "화면이 768px보다 작아지면 이것들을 실행해(@media)" 처럼 판을 까는 역할을 주로 하죠.

---

이 문서의 목차 (In this article)

• 문법 (Syntax)
• 명세 (Specifications)
• 함께 보기 (See also)

---

문법 (Syntax)

At-규칙의 기본 뼈대는 CSS 문법 (CSS syntax) 모듈에 정의되어 있고, 각각의 개별적인 at-규칙들의 상세 내용은 각자의 모듈에 나뉘어 정의되어 있습니다. At-규칙은 그 목적과 특정 규칙에 따라 크게 두 가지 형태 중 하나를 띠게 됩니다. 바로 세미콜론으로 끝나는 구문 at-규칙(statement at-rules)과 중괄호 {} 안에 다른 규칙들을 담을 수 있는 블록 at-규칙(block at-rules)입니다.

구문 at-규칙 (Statement at-rules)

/* 일반적인 구조 */
@identifier (RULE);

/* 예시: 브라우저에게 UTF-8 문자셋을 사용하라고 지시 */
@charset "utf-8";

구문 at-규칙(Statement at-rules)은 항상 세미콜론(;)으로 끝납니다. 식별자(이름)에 따라 여러 가지 구문 at-규칙이 존재하며, 각기 다른 문법을 가집니다:

• @charset:
  • 스타일시트에서 사용할 대체(fallback) 문자셋(character set)을 결정하는 알고리즘 규칙입니다. (at-규칙의 문법 형태를 띠고 있지만, 무언가를 정의하는 역할은 아닙니다.) (CSS Syntax)
• @import:
  • CSS 엔진에게 외부에 있는 다른 스타일시트 파일을 불러와서 포함하라고 지시합니다. (CSS cascading and inheritance)
• @layer:
  • 여러 개의 캐스케이드 레이어(cascade layers)가 있을 때, 그 적용 우선순위(order of precedence)를 정의합니다. (참고로 레이어의 스타일을 정의할 때는 아래 설명할 블록 at-규칙 형태로도 사용됩니다.) (CSS cascading and inheritance)
• @namespace:
  • 스타일시트의 기본 네임스페이스를 정의하거나, 선택자가 해당 네임스페이스와 일치할 때만 타겟팅하도록 하는 네임스페이스 접두사(prefix)를 정의합니다. (CSS namespaces)

---

블록 at-규칙 (Block at-rules)

@identifier (RULE) {
}

블록 at-규칙(Block at-rules)은 중괄호 {} 로 이루어진 블록으로 끝납니다. 이 블록 안에는 다른 중첩된 규칙들, 다른 at-규칙들, 또는 속성/설명자 선언(declarations)들이 포함될 수 있습니다.

• @counter-style:
  • 목록(list)의 불릿 기호나 번호 매기기를 위한 커스텀 카운터 스타일을 정의하고, 미리 정의된 리스트 스타일을 확장합니다. (CSS counter styles)
• @container:
  • 상위 컨테이너(부모 요소)가 지정된 <container-condition>(크기 등)을 충족할 때만 블록 내부의 스타일을 적용하는 조건부 그룹 규칙입니다. (CSS containment)
• @font-face:
  • 로컬 또는 외부에 있는 폰트 파일의 위치(URL)를 정의하고, 해당 폰트가 font-family로 선언되어 사용될 때의 스타일 특성(굵기, 기울기 등)을 함께 정의합니다. (CSS fonts)
• @font-feature-values (및 @swash, @ornaments, @annotation, @stylistic, @styleset, @character-variant):
  • OpenType 폰트의 font-variant-alternates 속성에서 사용할 글꼴별 대체 형태나 커스텀 이름(feature indexes)을 정의하여 폰트 패밀리별 표시 방식을 정교하게 제어합니다. (CSS fonts)
• @keyframes (및 @-webkit-keyframes 별칭):
  • 애니메이션 시퀀스의 각 중간 단계(키프레임)에 대한 CSS 스타일을 묘사하여, 이름이 부여된 애니메이션 세트를 정의합니다. (CSS animations)
• @layer:
  • 내부에 CSS 규칙들을 포함하여 이름이 부여된 캐스케이드 레이어를 생성합니다. (우선순위만 정의할 때는 구문 at-규칙 형태로도 사용됩니다.) (CSS cascading and inheritance)
• @media:
  • 브라우저가 실행되는 기기(디바이스)가 미디어 쿼리(media query)로 정의된 조건(화면 너비, 방향 등)을 충족할 때만 내부의 스타일을 적용하는 조건부 그룹 규칙입니다. (CSS conditional rules)
• @page:
  • 웹 페이지를 종이에 인쇄(프린트)할 때 적용될 문서의 규격, 방향, 여백(margin) 등 출력과 관련된 측면들을 지정합니다. (CSS paged media)
• @position-try:
  • 앵커(anchor) 위치 지정 요소가 원래 위치에 들어가지 못할 때 사용할 수 있는 커스텀 위치 지정 옵션(대체 배치 및 정렬 옵션)을 정의합니다. (CSS anchor positioning)
• @property:
  • CSS 사용자 지정 속성(CSS 변수)을 명시적으로 정의합니다. 이를 통해 속성의 타입(숫자, 색상 등)을 검사하고 제한할 수 있으며, 기본값을 설정하고, 상속 여부를 지정할 수 있습니다. (CSS custom properties for cascading variables)
• @scope:
  • 특정 스타일들이 적용될 유효 범위(scope)를 정의하고, 선택된 요소와 그 범위 내에 있는 요소들에게만 스타일을 캡슐화하여 적용합니다. (CSS cascading and inheritance)
• @starting-style:
  • 요소가 처음 스타일 업데이트를 받을 때(예: display: none 상태에서 벗어나 화면에 처음 나타날 때) 트랜지션(transition)이 시작될 최초의 시작 속성값들을 정의합니다. (CSS transitions)
• @supports:
  • 사용자의 브라우저가 주어진 조건의 CSS 기능(특정 속성이나 값 등)을 지원하는 경우에만 내부의 스타일을 적용하는 조건부 그룹 규칙입니다. (CSS conditional rules)
• @view-transition:
  • 현재 문서를 뷰 트랜지션(View Transition API)에 편입시킵니다. 여러 문서 간(cross-document) 탐색 전환 시에는 도착지 문서(destination document)도 함께 편입시킵니다.

💡 강사의 실무 팁 2: 어떤 걸 제일 많이 쓰나요?
프론트엔드 실무에서 밥 먹듯이 쓰게 될 At-규칙 TOP 3는 바로 @media (반응형 웹), @keyframes (애니메이션), @font-face (웹 폰트) 입니다. 이 3개는 무조건 1순위로 마스터하시고, 나머지는 "아, CSS에 이런 고급 기능도 있었지!" 하고 넘어가신 후 필요할 때마다 검색해서 쓰셔도 충분합니다!

---

명세 (Specifications)

Specification (명세)
CSS Syntax Module Level 3

---

함께 보기 (See also)

• CSS at-규칙 레퍼런스 (CSS at-rules)
• CSS at-규칙 함수 (CSS at-rule functions)
• at-규칙 중첩하기 (Nesting at-rules)
• CSS 구문 소개 (CSS statements)
• CSSRule 인터페이스 (JavaScript 관련)
• CSS 조건부 규칙 모듈 (CSS conditional rules)
• CSS 문법 모듈 (CSS syntax)
• 명시도 (Specificity)
• 상속 (Inheritance)

---

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

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

---

어떠신가요? CSS 파일 안에서 이리저리 등장하던 @ 기호들이 이제 어떤 역할을 하는지 싹 정리가 되셨을 거예요!

혹시 이 중에서 포트폴리오(웹 프로필이나 독후감 사이트)에 바로 적용해 보고 싶은 규칙이 있으신가요? 예를 들어 화면 크기에 따라 디자인을 바꾸는 @media나 멋진 웹 폰트를 넣는 @font-face 같은 것들이요! 더 깊게 알고 싶은 규칙이 있다면 편하게 말씀해주세요.