Reference/At-rules/@namespace

김동현·2026년 3월 28일

CSS docs

mdn 학습 번역 - CSS

목록 보기

181/190

@namespace

Baseline | Widely available

Chrome, Edge, Firefox, Safari에서 지원돼요.

이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2015년 7월부터 모든 브라우저에서 사용 가능했어요.

@namespace는 CSS 스타일 시트에서 사용할 XML 네임스페이스를 정의하는 at-rule이에요.

요즘 웹에서는 HTML 안에 SVG를 직접 넣거나 수학 공식(MathML)을 넣는 경우가 많잖아요? 이때 서로 다른 태그 이름이 겹치지 않게 '이 태그는 SVG 거야!'라고 확실히 말해주는 도구라고 생각하면 돼요. 하나씩 꼼꼼하게 번역해 드릴게요!

직접 해보세요 (Try it)

이 데모에서는 @namespace를 사용해서 일반 HTML의 <a> 태그와 SVG 안에 있는 <a> 태그를 어떻게 구분해서 스타일을 주는지 보여줍니다.

CSS

/* SVG 네임스페이스에 'svg'라는 별명을 붙여줍니다 */
@namespace svg url("http://www.w3.org/2000/svg");

/* 이건 일반적인 HTML 링크에 적용돼요 */
a {
  color: orangered;
  text-decoration: underline dashed;
  font-weight: bold;
}

/* 이건 SVG 네임스페이스 안에 있는 링크(svg|a)에만 적용돼요 */
svg|a {
  fill: blueviolet;
  text-decoration: underline solid;
  text-transform: uppercase;
}

HTML

<p>
  <a href="#">이것은 일반적인 HTML 링크입니다</a>
</p>

<svg width="250px" viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
  <a href="#">
    <text x="0" y="15">이것은 SVG로 만들어진 링크입니다</text>
  </a>
</svg>

구문 (Syntax)

/* 기본 네임스페이스 (Default namespace) */
@namespace url("XML-namespace-URL");
@namespace "XML-namespace-URL";

/* 접두사가 붙은 네임스페이스 (Prefixed namespace) */
@namespace prefix url("XML-namespace-URL");
@namespace prefix "XML-namespace-URL";

여기서 사용하는 값들은 다음과 같아요:

XML-namespace-URL

네임스페이스를 나타내는 URL 주소입니다.

prefix

네임스페이스를 식별하기 위해 사용하는 별명(접두사)입니다.

설명 (Description)

정의된 네임스페이스를 사용하면 전체 선택자(*), 타입 선택자(태그 이름), 그리고 속성 선택자가 특정 네임스페이스 안에 있는 요소만 선택하도록 제한할 수 있어요. @namespace 규칙은 일반적으로 인라인 SVG나 MathML이 포함된 HTML, 혹은 여러 어휘가 섞여 있는 XML처럼 여러 네임스페이스가 섞여 있는 문서를 다룰 때만 유용합니다.

모든 @namespace 규칙은 반드시 @charset과 @import 규칙 뒤에 나와야 하며, 스타일 시트 내의 다른 모든 앳 규칙이나 스타일 선언보다는 앞에 와야 해요.

@namespace는 스타일 시트의 기본 네임스페이스(default namespace)를 정의하는 데 사용할 수 있습니다. 기본 네임스페이스가 정의되면, 모든 전체 선택자와 타입 선택자(속성 선택자는 제외, 아래 참고 확인!)는 해당 네임스페이스 안에 있는 요소에만 적용됩니다.

또한 @namespace 규칙으로 네임스페이스 접두사(namespace prefix)를 정의할 수도 있어요. 전체, 타입, 또는 속성 선택자 앞에 이 접두사를 붙이면, 해당 네임스페이스와 요소/속성 이름이 모두 일치할 때만 선택자가 작동하게 됩니다.

HTML에서는 브라우저가 알려진 외부 요소(foreign elements)에 자동으로 네임스페이스를 할당해 줘요. 즉, HTML 요소들은 문서 어디에도 xmlns 속성이 없더라도 XHTML 네임스페이스(http://www.w3.org/1999/xhtml)에 있는 것처럼 행동하고, <svg>와 <math> 요소에는 각각 고유한 네임스페이스(http://www.w3.org/2000/svg 및 http://www.w3.org/1998/Math/MathML)가 할당된답니다.

참고: XML에서는 속성에 직접 접두사가 정의되어 있지 않는 한(예: xlink:href), 해당 속성에는 네임스페이스가 없습니다. 다시 말해, 속성은 자신이 속한 요소의 네임스페이스를 상속받지 않아요. CSS도 이 동작을 따르기 때문에, 기본 네임스페이스는 속성 선택자에는 적용되지 않습니다.

형식적인 구문 (Formal syntax)

@namespace = 
  @namespace <namespace-prefix>? [ <string> | <url> ] ;  

<namespace-prefix> = 
  <ident>

이 구문은 CSS Namespaces Module Level 3의 최신 표준을 반영합니다.

예제 (Examples)

기본 및 접두사 네임스페이스 지정하기

/* XHTML을 기본 네임스페이스로 지정합니다 */
@namespace url("http://www.w3.org/1999/xhtml");
/* SVG 네임스페이스에 'svg'라는 접두사를 붙입니다 */
@namespace svg url("http://www.w3.org/2000/svg");

/* XHTML은 기본 네임스페이스이므로, 이 선택자는 모든 XHTML <a> 요소와 매치됩니다 */
a {
}

/* 이 선택자는 모든 SVG <a> 요소와 매치됩니다 */
svg|a {
}

/* 이 선택자는 XHTML과 SVG 안의 모든 <a> 요소와 매치됩니다 (*| 는 '모든 네임스페이스'를 뜻함) */
*|a {
}