blob: f21092b50980ee1217825162ecb968c5f3f420da (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
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("<string>")}} 또는 {{cssxref("<uri>")}}입니다. 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>
{{csssyntax}}
<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("<string>")}} 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>
|
