---
title: '@-규칙'
slug: Web/CSS/At-rule
tags:
  - At-rule
  - CSS
  - CSS Reference
translation_of: Web/CSS/At-rule
---
<div>{{cssref}}</div>

<p><span class="seoSummary"><strong>@-규칙</strong>은 식별자(identifier)가 뒤따르는 at 기호('<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>))로 시작하는 <a href="/ko/docs/Web/CSS/Syntax#CSS_statements" title="CSS statement">CSS 문</a>이며 다음 세미콜론('<code>;</code>' (<code>U+003B SEMICOLON</code>)) 또는 다음 <a href="/ko/docs/Web/CSS/Syntax#CSS_declarations_blocks">CSS 블록</a> 중 먼저 오는 쪽까지 모든 것을 포함합니다.</span></p>

<pre class="brush: css">/* General structure */
@IDENTIFIER (RULE);

/* Example: tells browser to use UTF-8 character set */
@charset "utf-8";</pre>

<p>다음과 같이 식별자가 지정된 각각 다른 구문인 여러 at-규칙이 있습니다:</p>

<ul>
 <li>{{cssxref("@charset")}} — 스타일 시트에 의해 사용되는 문자 집합을 정의함.</li>
 <li>{{cssxref("@import")}} — CSS 엔진에게 외부 스타일 시트를 포함하도록 알림.</li>
 <li>{{cssxref("@namespace")}} — CSS 엔진에게 모든 콘텐츠가 XML 네임스페이스로 시작하(prefix가 붙)는 것이 고려되어야 함을 알림.</li>
 <li><strong><em>중첩 @-규칙</em></strong> — 중첩 문의 부분 집합으로, 조건부 그룹 규칙 속뿐만 아니라 스타일 시트의 문으로 사용될 수 있습니다:
  <ul>
   <li>{{cssxref("@media")}} — 장치가 미디어 질의(<em>media query</em>)를 사용하여 정의된 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.</li>
   <li>{{cssxref("@supports")}} — 브라우저가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.</li>
   <li>{{cssxref("@document")}} {{experimental_inline}} — 스타일 시트가 적용되는 문서가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙. <em>(CSS Spec 레벨 4로 연기됨)</em></li>
   <li>{{cssxref("@page")}} — 문서를 출력할 때 적용되는 레이아웃 변화의 양상(aspect)을 설명.</li>
   <li>{{cssxref("@font-face")}} — 다운로드되는 외부 글꼴의 양상을 설명.</li>
   <li>{{cssxref("@keyframes")}} — CSS 애니메이션 sequence 내 중간 단계의 양상을 설명.</li>
   <li>{{cssxref("@viewport")}} {{experimental_inline}} — 작은 화면 장치를 위한 viewport의 양상을 설명. <em>(현재 Working Draft 단계임)</em></li>
   <li>{{cssxref("@counter-style")}} — 미리 정의된 스타일 집합의 일부가 아닌 특정 카운터 스타일을 정의. <em>(Candidate Recommendation 단계이지만, 작성 중인 현재 Gecko에서만 구현됨)</em></li>
   <li>{{cssxref("@font-feature-values")}} (<code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> 및 <code>@character-variant</code>와 함께)<br>
    — OpenType에서 다르게 활성화된 기능에 대해 {{cssxref("font-variant-alternates")}}에서 일반 이름을 정의. <em>(Candidate Recommendation 단계이지만, 작성 중인 현재 Gekko에서만 구현됨)</em></li>
  </ul>
 </li>
</ul>

<h2 id="조건부_그룹_규칙">조건부 그룹 규칙</h2>

<p>속성값과 마찬가지로, 각각의 @-규칙은 다른 구문이 있습니다. 그럼에도 불구하고, 그 중 몇몇은 조건부 그룹 규칙(<strong>conditional group rules</strong>)으로 불리는 특별한 범주로 분류될 수 있습니다. 이들 문은 공통 구문을 공유하고 그 각각은 <em>중첩 문</em>(<em>규칙 집합(ruleset)</em> 또는 <em>중첩 @-규칙</em> 중 하나)을 포함할 수 있습니다. 게다가, 그들은 모두 일반 semantic 의미를 전달합니다. 그들은 모두 어떤 유형의 조건을 링크합니다, 언제라도 <strong>참</strong> 또는 <strong>거짓</strong> 중 하나로 평가하는. 조건을 <strong>참</strong>으로 평가하면, 그룹 내 모든 문이 적용됩니다.</p>

<p>조건부 그룹 규칙은 <a href="http://dev.w3.org/csswg/css3-conditional/" title="CSS Conditional Rules Module Level 3">CSS 조건부 규칙 모듈 레벨 3</a>에서 정의되고 다음과 같습니다:</p>

<ul>
 <li>{{cssxref("@media")}},</li>
 <li>{{cssxref("@supports")}},</li>
 <li>{{cssxref("@document")}}. <em>(CSS Spec 레벨 4로 연기됨)</em></li>
</ul>

<p>각 조건부 그룹은 또한 중첩 문을 포함할 수 있기에, 불특정한 양의 중첩이 있을 수 있습니다.</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">설명</th>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Conditional')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td>초기 정의</td>
  </tr>
  <tr>
   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td><code>@-webkit-keyframes</code> 표준화.</td>
  </tr>
 </tbody>
</table>