From af0d046c8c06fa277cc1bcc0cd2ef68a34c327aa Mon Sep 17 00:00:00 2001 From: Vivi Date: Fri, 2 Aug 2024 22:16:02 +0900 Subject: [PATCH] =?UTF-8?q?[ko]=20namespace=20seperator=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD=20(#22862)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] namespace seperator 번역 * [fix] lint --- files/ko/web/css/namespace_separator/index.md | 190 ++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 files/ko/web/css/namespace_separator/index.md diff --git a/files/ko/web/css/namespace_separator/index.md b/files/ko/web/css/namespace_separator/index.md new file mode 100644 index 00000000000000..5df83c497d2433 --- /dev/null +++ b/files/ko/web/css/namespace_separator/index.md @@ -0,0 +1,190 @@ +--- +title: Namespace separator +slug: Web/CSS/Namespace_separator +l10n: + sourceCommit: fc1cc5684c98d19816d5cc81702d70f2a0debbad +--- + +{{CSSRef}} + +**네임스페이스 선택자** (`|`)는 선택자를 네임스페이스로부터 분리하여, 타입 선택자의 네임스페이스 혹은 {{glossary("namespace", "네임스페이스")}}가 없는 경우를 식별합니다. + +```css +/* 네임스페이스 내 링크는 myNameSpace로 명명합니다. */ +myNameSpace|a { + font-weight: bold; +} +/* (네임스페이스가 없는 경우를 포함하는) 어떠한 네임스페이스 내의 단락 */ +*|p { + color: darkblue; +} +/* 헤딩 2는 네임스페이스 내에 있지 않습니다. */ +|h2 { + margin-bottom: 0; +} +``` + +[타입 선택자](/ko/docs/Web/CSS/Type_selectors)와 [전체 선택자](/ko/docs/Web/CSS/Universal_selectors)는 선택적인 네임스페이스 컴포넌트를 허용합니다. 네임스페이스가 이전에 {{CSSXref("@namespace")}}를 통해 정의되었다면 이 선택자들 앞에 네임스페이스의 이름을 네임스페이스 구분자 (`|`)로 구분하여 네임스페이스화할 수 있습니다. 이는 인라인 SVG 나 MathML가 있는 HTML이나 여러 어휘가 결합된 XML처럼 다수의 네임스페이스를 포함한 문서를 다루는 경우에 유용합니다. + +- `ns|h1` - `ns` 네임스페이스 내 `

` 요소와 일치합니다. +- `*|h1` - 모든 `

` 요소와 일치합니다. +- `|h1` - 선언되거나 암시된 네임스페이스 밖의 모든 `

` 요소와 일치합니다. + +## 구문 + +```css +namespace|element { style properties } +``` + +## 예제 + +기본적으로, HTML 이나 SVG 요소 내에 있는 모든 요소는 `http://www.w3.org/1999/xhtml` 및 `http://www.w3.org/2000/svg` 에서 네임스페이스가 있음을 암시하기 때문에 네임스페이스를 가지고 있습니다. 빈 네임스페이스 파라미터를 가진 {{domxref("document.createElementNS")}} 메서드는 네임스페이스가 없는 요소를 생성할 수 있습니다. + +### 명명된 네임스페이스 예제 + +이 예제에서는 모든 요소가 네임스페이스에 속해 있습니다. + +#### HTML + +네임스페이스가 없다면 이는 명시적으로 HTML 내에 선언되거나 SVG 내에 존재합니다. + +```html +

이 단락은 링크가 존재합니다.

+ + + + 링크는 SVG 내부에서 생성되었습니다. + + +``` + +#### CSS + +CSS는 두 개의 네임스페이스를 선언하고 전역 링크 (`a`), 네임스페이스가 없는 링크 (`|a`), 모든 네임스페이스 또는 네임스페이스가 없는 링크 (`*|a`), 그리고 두 개의 다른 이름이 지정된 네임스페이스 (`svgNamespace|a` 와 `htmlNameSpace|a`) 에 스타일을 지정합니다. + +```css +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* 기본 네임스페이스에 있는 모든 ``, 이 경우 모든 `` */ +a { + font-size: 1.4rem; +} +/* 네임스페이스가 없는 경우 */ +|a { + text-decoration: wavy overline lime; + font-weight: bold; +} +/* (네임스페이스가 없는 경우를 포함한) 모든 네임스페이스 */ +*|a { + color: red; + fill: red; + font-style: italic; +} +/* 콘텐츠 내에 있는 svgNamespace 네임스페이스 */ +svgNamespace|a { + color: green; + fill: green; +} +/* HTML 문서 내에 있는 htmlNameSpace 네임스페이스 */ +htmlNameSpace|a { + text-decoration-line: line-through; +} +``` + +#### 결과 + +{{EmbedLiveSample("Named_namespace_example", "100%", 100)}} + +네임스페이스 내에 있지 않은 링크 선택자 `|a` 는 어떤 링크와도 일치하지 않습니다. HTML에서는 `http://www.w3.org/1999/xhtml` 가 명시하는 것처럼 명시적으로 네임스페이스가 선언되지 않았을지라도 네임스페이스 내의 모든 HTML를 의미합니다. SVG에서도 네임스페이스가 명시적으로 선언되지 않았을지라도 `http://www.w3.org/2000/svg` 네임스페이스를 암시합니다. 이는 모든 콘텐츠가 최소 하나의 네임스페이스 내에 있다는 것을 의미합니다. + +### 기본 네임스페이스와 네임스페이스가 없는 것 + +이 예제에서는 JavaScript를 사용하여 네임스페이스가 없는 요소를 생성하고 이를 문서 내에 삽입합니다. `@namespace` 를 사용하여 이름이 지정되지 않은 네임스페이스를 정의함으로써 SVG 네임스페이스를 기본 네임스페이스로 설정합니다. + +> [!참고] +> 기본 또는 이름이 지정되지 않은 네임스페이스가 정의된 경우, 전체 선택자 및 타입 선택자는 해당 네임스페이스의 요소에만 적용됩니다. + +#### HTML + +HTML 내 혹은 SVG 내 어떠한 네임스페이스도 명시적으로 선언되지 않았습니다. + +```html +

암시적인 HTML 네임스페이스 내 링크

+ + + + SVG 내에서 링크가 생성되었습니다. + + +``` + +#### JavaScript + +{{DOMXRef("document.createElementNS")}}를 이용한 JavaScript에서는 앵커 링크를 네임스페이스 없이 생성할 수 있고 이를 링크에 추가합니다. + +```js +// create 'no namespace' anchor +const a = document.createElementNS("", "a"); +a.href = "#"; +a.appendChild(document.createTextNode("Link created without a namespace")); + +document.body.appendChild(a); +``` + +#### CSS + +{{cssxref("@namespace")}}를 이용하여 네임스페이스를 선언합니다. 네임스페이스의 이름을 생략하면, `@namespace` 선언은 기본 네임스페이스를 생성합니다. + +```css +/* 이름을 생략하는 것으로 이는 SVG를 기본 네임스페이스로 설정합니다. */ +@namespace url("http://www.w3.org/2000/svg"); + +/* (SVG에 설정된) 기본 네임스페이스 `` */ +a { + font-size: 1.4rem; +} + +/* (SVG에 설정된) 기본 네임스페이스 내에 있는 `` 와 `

` */ +svg, +p { + border: 5px solid gold; +} + +/* 네임스페이스 외부의 링크 */ +|a { + text-decoration: wavy underline purple; + font-weight: bold; +} + +/* 네임스페이스가 없거나 어떠한 네임스페이스의 링크 */ +*|a { + font-style: italic; + color: magenta; + fill: magenta; +} +``` + +#### 결과 + +{{EmbedLiveSample("Default_namespace_and_no_namespace", "100%", 100)}} + +네임스페이스 구분자가 없는 선택자 `a` 는 SVG `` 요소에만 일치합니다. 이는 SVG가 기본 네임스페이스로 설정되어 있는 것과 연관이 있습니다. + +네임스페이스가 없는 선택자 `|a` 는, JavaScript로 정의하고 추가한 `` 와 일치합니다. 해당 노드는 기본 네임스페이스가 없는 유일한 노드이기 때문입니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`@namespace`](/ko/docs/Web/CSS/@namespace) +- [`Document.createElementNS()`](/ko/docs/Web/API/Document/createElementNS) 메서드 +- [`Element.namespaceURI`](/ko/docs/Web/API/Element/namespaceURI) 속성 +- [CSS 타입 선택자](/ko/docs/Web/CSS/Type_selectors) +- [CSS 전체 선택자](/ko/docs/Web/CSS/Universal_selectors) +- [CSS 선택자 모듈](/ko/docs/Web/CSS/CSS_selectors)