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
|
---
title: '@namespace'
slug: Web/CSS/@namespace
tags:
- At-rule
- CSS
- Layout
- Reference
- Web
translation_of: Web/CSS/@namespace
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>@namespace</code></strong>는 <a href="/ko/docs/Glossary/CSS">CSS</a> <a href="/ko/docs/Web/API/StyleSheet">스타일 시트</a>에서 사용되는 <a href="/ko/docs/Namespaces">XML 네임스페이스</a>를 정의하는 <a href="/ko/docs/Web/CSS/At-rule" title="CSS at-rules">at-규칙</a>입니다. 정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 <a href="/ko/docs/Web/CSS/Universal_selectors">universal</a>, <a href="/ko/docs/Web/CSS/Type_selectors">type</a> 및 <a href="/ko/docs/Web/CSS/Attribute_selectors">attribute</a> <a href="/ko/docs/Web/Guide/CSS/Getting_started/Selectors">선택자</a>를 제한하는 데 사용될 수 있습니다. <code>@namespace</code> 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다.</span></p>
<p>어떤 <code>@namespace</code> 규칙이든 모든 <a href="/ko/docs/Web/CSS/%40charset">@charset</a> 및 <a href="/ko/docs/Web/CSS/%40import">@import</a> 규칙의 다음에 오고 스타일시트에서 모든 다른 at-규칙 및 <a href="/ko/docs/Web/API/CSSStyleDeclaration">스타일 선언</a>보다 앞서야 합니다.</p>
<p><code>@namespace</code>는 스타일 시트를 위한 <strong>기본 네임스페이스</strong>를 정의하는 데 사용될 수 있습니다. 기본 네임스페이스가 정의된 경우, 모든 universal 및 type 선택자 (attribute 선택자는 아님, 아래 주의 참조) 는 그 네임스페이스 내 요소에만 적용됩니다.</p>
<p><code>@namespace</code> 규칙은 또한 네임스페이스 접두어(<strong>namespace prefix</strong>)를 정의하는 데도 사용될 수 있습니다. universal, type 또는 attribute 선택자가 네임스페이스 접두어로 시작되는 경우, 그때 그 선택자는 요소 또는 attribute의 네임스페이스 <em>및</em> 이름이 일치하는 경우에만 일치합니다.</p>
<p><a href="https://html.spec.whatwg.org/#foreign-elements" title="foreign elements">외부 요소</a>로 알려진 <a href="/ko/docs/Glossary/HTML5">HTML5</a>에서는, 자동으로 네임스페이스가 할당됩니다. 이는 HTML 요소는 마치 XHTML 네임스페이스 (<code>http://www.w3.org/1999/xhtml</code>) 에 있는 것처럼 행동하고, 문서 어디에든 <code>xmlns</code> attribute가 없을지라도, <a href="/ko/docs/Web/SVG/Element/svg"><svg></a> 및 <a href="/ko/docs/Web/MathML/Element/math"><math></a> 요소는 그들의 적절한 네임스페이스 (<code>http://www.w3.org/2000/svg</code> 및 <code>http://www.w3.org/1998/Math/MathML</code>) 가 할당됨을 뜻합니다.</p>
<div class="note">
<p><strong>주의:</strong> XML에서, 접두어가 직접 attribute (<em>가령</em>, <code>xlink:href</code>)에 정의되지 않는 한, 그 attribute은 네임스페이스가 없습니다. 다시 말해서, attribute은 그들이 붙은 요소의 네임스페이스를 상속받지 않습니다. 이 행동(behaviour)를 일치시키기 위해, CSS에서 기본 네임스페이스는 attribute 선택자에 적용되지 않습니다.</p>
</div>
<h2 id="구문">구문</h2>
<pre class="brush: css">/* 기본 네임스페이스 */
@namespace url(<em>XML-namespace-URL</em>);
@namespace "<em>XML-namespace-URL</em>";
/* 접두어 붙은 네임스페이스 */
@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>);
@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<pre class="brush: css">@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* 이는 모든 XHTML <a> 요소와 일치합니다, XHTML이 접두어 붙지 않은 기본 네임스페이스이기에 */
a {}
/* 이는 모든 SVG <a> 요소와 일치합니다 */
svg|a {}
/* 이는 XHTML 및 SVG <a> 요소 둘 다와 일치합니다 */
*|a {}
</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
<td>{{Spec2('CSS3 Namespaces')}}</td>
<td>초기 정의</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.at-rules.namespace")}}</p>
|
