CSS3 @namespace

CSS 네임스페이스 선언하기

이 글에서는 CSS3의 @namespace 선언에 대해 간단히 알아봅니다.

@namespace

@namespace는 CSS 스타일 시트에서 사용되는 XML 네임스페이스를 정의하는 at-규칙입니다. 

정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 universal, type 및 attribute 선택자를 제한하는 데 사용될 수 있습니다. 

@namespace 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다.

어떤 @namespace 규칙이든 모든 @charset 및 @import 규칙의 다음에 오고 스타일시트에서 모든 다른 at-규칙 및 스타일 선언보다 앞서야 합니다.

@namespace는 스타일 시트를 위한 기본 네임스페이스를 정의하는 데 사용될 수 있습니다. 

기본 네임스페이스가 정의된 경우, 모든 universal 및 type 선택자 (attribute 선택자는 아님, 아래 주의 참조)는 그 네임스페이스 내 요소에만 적용됩니다.

@namespace 규칙은 또한 네임스페이스 접두어(namespace prefix)를 정의하는 데도 사용될 수 있습니다. 

universal, type 또는 attribute 선택자가 네임스페이스 접두어로 시작되는 경우, 그때 그 선택자는 요소 또는 attribute의 네임스페이스 및 이름이 일치하는 경우에만 일치합니다.

외부 요소로 알려진 HTML5에서는, 자동으로 네임스페이스가 할당됩니다. 

이는 HTML 요소는 마치 XHTML 네임스페이스 (http://www.w3.org/1999/xhtml) 에 있는 것처럼 행동하고, 문서 어디에든 xmlns attribute가 없을지라도, <svg> 및 <math> 요소는 그들의 적절한 네임스페이스 (http://www.w3.org/2000/svg 및 http://www.w3.org/1998/Math/MathML) 가 할당됨을 뜻합니다.

XML에서, 접두어가 직접 attribute (가령, xlink:href)에 정의되지 않는 한, 그 attribute은 네임스페이스가 없습니다. 다시 말해서, attribute은 그들이 붙은 요소의 네임스페이스를 상속받지 않습니다. 이 행동(behaviour)를 일치시키기 위해, CSS에서 기본 네임스페이스는 attribute 선택자에 적용되지 않습니다.

구문

css

/* 기본 네임스페이스 */
@namespace url("http://naver.com");
@namespace "http://naver.com";

/* 접두어 붙은 네임스페이스 */
@namespace prefix url("http://naver.com");
@namespace prefix "http://naver.com";

CSS3에서는 미리 선언한 네임스페이스 접두어(namepsace prefirx)를 요소 선택자 앞에 붙일 수 있습니다.

다음과 같이 네임스페이스 구분 기호인 세로 바(|) 앞에 네임스페이스 접두어를 붙여서 선택할 대상을 제한할 수 있습니다.

css

@namespace foo url('http://naver.com'); /* 네임스페이스 선언*/

foo|h1 { color: red;} /* http://naver.com 이라는 네임스페이스 안에 존재하는 h1을 선택 */
|h1 {color: blue; } /* 네임스페이스가 없는 모든 h1 요소를 선택 */

브라우저 호환성

Chrome 1.0+, FF 1.0+, IE 9+, Opera 8.0+, Safari 3.0+

Jaehee's WebClub