---
title: '@import'
slug: Web/CSS/@import
tags:
  - At-rule
  - CSS
  - Reference
translation_of: Web/CSS/@import
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>@import</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰입니다.</span> 이 규칙은 {{cssxref("@charset")}} 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다. <code>@import</code>는 <a href="/ko/docs/Web/CSS/Syntax#nested_statements" title="nested statement">중첩 명령문</a>이 아니기 때문에 <a href="/ko/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="conditional group at-rules">조건부 그룹 @규칙</a> 내에 사용할 수 없습니다.</p>

<pre class="brush: css">@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
</pre>

<p>사용자 에이전트는 지원되지 않는 미디어 유형에 대한 자원 검색을 피할 수 있도록, 제작자는 미디어에 의존한 <code>@import</code> 규칙을 지정할 수 있습니다. 이러한 조건부 import는 URI 뒤에 쉼표로 구분된 <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries" title="media queries">미디어 질의</a>를 지정합니다. 미디어 질의가 없으면, import는 무조건(unconditional)입니다. 미디어에 <code>all</code>을 지정하면 같은 효과가 있습니다.</p>

<h2 id="구문">구문</h2>

<pre class="syntaxbox">@import <em>url</em>;
@import <em>url</em> <em>list-of-media-queries</em>;
</pre>

<p>where:</p>

<dl>
 <dt><code><em>url</em></code></dt>
 <dd>import할 자원의 위치를 나타내는 {{cssxref("&lt;string&gt;")}} 또는 {{cssxref("&lt;uri&gt;")}}입니다. URL은 절대 또는 상대일 수 있습니다. URL은 실제로 파일에 지정할 필요는 없음을 주의하세요; 그냥 패키지 명 및 일부를 지정할 수 있으며 적절한 파일이 자동으로 선택됩니다(가령 <strong>chrome://communicator/skin/</strong>). 자세한 내용은 <a href="/ko/docs/XUL_Tutorial/The_Chrome_URL">여기를 참조</a>.</dd>
 <dt><code><em>list-of-media-queries</em></code></dt>
 <dd>링크된 URL 내에 정의된 CSS 규칙의 적용을 조절하는 쉼표 구분된 <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries" title="media queries">미디어 질의</a> 목록입니다. 브라우저가 이러한 질의를 지원하지 않으면, 링크된 자원을 로드하지 않습니다.</dd>
</dl>

<h3 id="형식_구문">형식 구문</h3>

<pre class="syntaxbox">{{csssyntax}}
</pre>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td>
   <td>{{Spec2('CSS3 Cascade')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
   <td>{{Spec2('CSS3 Media Queries')}}</td>
   <td>Extended the syntax to support any media query and not only simple <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Added support for {{cssxref("&lt;string&gt;")}} to denote the url of a stylesheet,<br>
    and requirement to insert the <code>@import</code> rule at the beginning of the CSS document.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("css.at-rules.import")}}</p>