diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/css/@import | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/ko/web/css/@import')
-rw-r--r-- | files/ko/web/css/@import/index.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/files/ko/web/css/@import/index.html b/files/ko/web/css/@import/index.html new file mode 100644 index 0000000000..a4648971ae --- /dev/null +++ b/files/ko/web/css/@import/index.html @@ -0,0 +1,83 @@ +--- +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> + +<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("<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> |