CSS @namespaceμ κ°λ ₯ν κΈ°λ₯μ νμ©νμ¬ XML λ¬Έμλ₯Ό μ€νμΌλ§νμΈμ. μ΄ ν¬κ΄μ μΈ κ°μ΄λμμλ ꡬ문μμ κ³ κΈ κΈ°μ κΉμ§ λ€λ£¨λ©°, λΈλΌμ°μ κ° νΈνμ±κ³Ό μ λ°μ μΈ μ κ·Όμ±μ 보μ₯ν©λλ€.
CSS @namespace: λ€μμ€νμ΄μ€λ₯Ό μ¬μ©νμ¬ XML μ€νμΌ μ§μ - ν¬κ΄μ μΈ κ°μ΄λ
Cascading Style Sheets(CSS)λ μ£Όλ‘ HTML λ¬Έμλ₯Ό μ€νμΌλ§νλ λ° μ¬μ©λλ κ²μΌλ‘ μλ €μ Έ μμ΅λλ€. κ·Έλ¬λ κ·Έ κΈ°λ₯μ ν¨μ¬ λ λμ΄, Extensible Markup Language(XML) κΈ°λ° λ¬Έμλ₯Ό ν¬ν¨ν λ€μν λ¬Έμ μ νμ μ€νμΌλ§ν μ μμ΅λλ€. CSSλ‘ XMLμ μ€νμΌλ§νλ λ° μ€μν μΈ‘λ©΄μ @namespace at-ruleμ μ¬μ©νλ κ²μ
λλ€. μ΄ ν¬κ΄μ μΈ κ°μ΄λμμλ CSS λ€μμ€νμ΄μ€μ 볡μ‘μ±μ μμΈν μ΄ν΄λ³΄κ³ XML λ¬Έμλ₯Ό ν¨κ³Όμ μΌλ‘ μ€νμΌλ§νλ λ° νμν μ§μκ³Ό λꡬλ₯Ό μ 곡ν©λλ€.
XML λ€μμ€νμ΄μ€ μ΄ν΄
CSS @namespaceμ λν΄ μμΈν μμ보기 μ μ XML λ€μμ€νμ΄μ€μ κ°λ
μ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. XML λ€μμ€νμ΄μ€λ λ¨μΌ λ¬Έμ λ΄μμ μλ‘ λ€λ₯Έ XML μ΄νμ μμλ₯Ό νΌν©ν λ μμ μ΄λ¦ μΆ©λμ λ°©μ§νλ λ°©λ²μ μ 곡ν©λλ€. μ΄λ κ° μ΄νμ κ³ μ ν Uniform Resource Identifier(URI)λ₯Ό ν λΉνμ¬ μνλ©λλ€.
μλ₯Ό λ€μ΄ XHTMLκ³Ό Scalable Vector Graphics(SVG)μ μμλ₯Ό λͺ¨λ κ²°ν©νλ λ¬Έμλ₯Ό μκ°ν΄ λ³΄κ² μ΅λλ€. λ€μμ€νμ΄μ€κ° μμΌλ©΄ XHTMLμ title μμκ° SVGμ title μμμ νΌλλ μ μμ΅λλ€. λ€μμ€νμ΄μ€λ μ΄λ¬ν λͺ¨νΈμ±μ ν΄κ²°ν©λλ€.
XML λ€μμ€νμ΄μ€ μ μΈ
XML λ€μμ€νμ΄μ€λ λ£¨νΈ μμ λλ λ€μμ€νμ΄μ€κ° μ²μ μ¬μ©λλ λͺ¨λ μμ λ΄μμ xmlns μμ±μ μ¬μ©νμ¬ μ μΈλ©λλ€. μμ±μ xmlns:prefix="URI" νμμ μ¬μ©νλ©°, μ¬κΈ°μ:
xmlnsλ λ€μμ€νμ΄μ€ μ μΈμ λνλ΄λ ν€μλμ λλ€.prefixλ λ€μμ€νμ΄μ€λ₯Ό μ°Έμ‘°νλ λ° μ¬μ©λλ μ νμ μ§§μ μ΄λ¦μ λλ€.URIλ λ€μμ€νμ΄μ€μ κ³ μ μλ³μ(μ: URL)μ λλ€.
λ€μμ XHTML λ° SVG λ€μμ€νμ΄μ€κ° μλ XML λ¬Έμμ μμ λλ€.
<root xmlns:html="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<html:h1>λ΄ λ¬Έμ</html:h1>
<svg:svg width="100" height="100">
<svg:circle cx="50" cy="50" r="40" fill="red"/>
</svg:svg>
</root>
μ΄ μμμ htmlμ XHTML λ€μμ€νμ΄μ€(http://www.w3.org/1999/xhtml)μ μ λμ¬μ΄κ³ svgλ SVG λ€μμ€νμ΄μ€(http://www.w3.org/2000/svg)μ μ λμ¬μ
λλ€.
CSS @namespace μκ°
CSS @namespace at-ruleμ μ¬μ©νλ©΄ CSS μ€νμΌμνΈ λ΄μμ λ€μμ€νμ΄μ€ URIλ₯Ό λ€μμ€νμ΄μ€ μ λμ¬μ μ°κ²°ν μ μμ΅λλ€. κ·Έλ° λ€μ μ΄ μ λμ¬λ₯Ό μ¬μ©νμ¬ ν΄λΉ λ€μμ€νμ΄μ€μ μνλ μμλ₯Ό λμμΌλ‘ μ§μ ν©λλ€. κΈ°λ³Έ ꡬ문μ λ€μκ³Ό κ°μ΅λλ€.
@namespace prefix "URI";
μ¬κΈ°μ:
@namespaceλ at-rule ν€μλμ λλ€.prefixλ λ€μμ€νμ΄μ€ μ λμ¬μ λλ€(κΈ°λ³Έ λ€μμ€νμ΄μ€μ κ²½μ° λΉμ΄ μμ μ μμ).URIλ λ€μμ€νμ΄μ€ URIμ λλ€.
CSSμμ λ€μμ€νμ΄μ€ μ μΈ
μ΄μ XML μλ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€. CSSλ‘ μ€νμΌλ§νλ €λ©΄ λ¨Όμ μ€νμΌμνΈμμ λ€μμ€νμ΄μ€λ₯Ό μ μΈν΄μΌ ν©λλ€.
@namespace html "http://www.w3.org/1999/xhtml"; @namespace svg "http://www.w3.org/2000/svg";
λ€μμ€νμ΄μ€λ₯Ό μ μΈν νμλ CSS μ νμμμ μ λμ¬λ₯Ό μ¬μ©νμ¬ νΉμ μμλ₯Ό λμμΌλ‘ μ§μ ν μ μμ΅λλ€.
html|h1 {
color: blue;
font-size: 2em;
}
svg|svg {
border: 1px solid black;
}
svg|circle {
fill: green;
}
μ€μ: νμ΄ν κΈ°νΈ(|)λ CSS μ νμμμ λ€μμ€νμ΄μ€ μ λμ¬λ₯Ό μμ μ΄λ¦κ³Ό ꡬλΆνλ λ° μ¬μ©λ©λλ€.
κΈ°λ³Έ λ€μμ€νμ΄μ€
λͺ
μμ μ λμ¬κ° μλ μμμ μ μ©λλ κΈ°λ³Έ λ€μμ€νμ΄μ€λ₯Ό μ μΈν μλ μμ΅λλ€. μ΄λ @namespace κ·μΉμμ μ λμ¬λ₯Ό μλ΅νμ¬ μνλ©λλ€.
@namespace "http://www.w3.org/1999/xhtml";
κΈ°λ³Έ λ€μμ€νμ΄μ€λ₯Ό μ¬μ©νλ©΄ μ λμ¬ μμ΄ ν΄λΉ λ€μμ€νμ΄μ€μ μμλ₯Ό λμμΌλ‘ μ§μ ν μ μμ΅λλ€.
h1 {
color: blue;
font-size: 2em;
}
μ΄κ²μ XHTML λ¬Έμλ₯Ό μ€νμΌλ§ν λ νΉν μ μ©νλ©°, XHTMLμ μ’ μ’ XHTML λ€μμ€νμ΄μ€λ₯Ό κΈ°λ³Έκ°μΌλ‘ μ¬μ©ν©λλ€.
CSS @namespaceμ μ€μ μ
CSS @namespaceλ₯Ό μ¬μ©νμ¬ λ€μν XML κΈ°λ° λ¬Έμ μ νμ μ€νμΌλ§νλ μ€μ μλ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€.
XHTML μ€νμΌλ§
XHTMLμ HTMLμ XMLλ‘ μ¬κ΅¬μ±ν κ²μ΄λ―λ‘ λ€μμ€νμ΄μ€ κΈ°λ° μ€νμΌλ§μ μ ν©ν©λλ€. λ€μ XHTML λ¬Έμλ₯Ό μκ°ν΄ λ³΄κ² μ΅λλ€.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>λ΄ XHTML νμ΄μ§</title>
</head>
<body>
<h1>λ΄ νμ΄μ§μ μ€μ κ²μ νμν©λλ€</h1>
<p>μ΄κ²μ ν
μ€νΈ λ¨λ½μ
λλ€.</p>
</body>
</html>
μ΄ λ¬Έμλ₯Ό μ€νμΌλ§νλ €λ©΄ λ€μ CSSλ₯Ό μ¬μ©ν μ μμ΅λλ€.
@namespace "http://www.w3.org/1999/xhtml";
body {
font-family: sans-serif;
margin: 20px;
}
h1 {
color: navy;
text-align: center;
}
p {
line-height: 1.5;
}
μ΄ κ²½μ° XHTML λ€μμ€νμ΄μ€κ° κΈ°λ³Έκ°μΌλ‘ μ μΈλλ―λ‘ μ λμ¬ μμ΄ μμλ₯Ό μ§μ μ€νμΌλ§ν μ μμ΅λλ€.
SVG μ€νμΌλ§
SVGλ λ²‘ν° κ·Έλν½μ λ§λλ λ° μ¬μ©λλ λ λ€λ₯Έ μΌλ°μ μΈ XML κΈ°λ° νμμ λλ€. λ€μμ κ°λ¨ν SVG μμ λλ€.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="red"/> </svg>
μ΄ SVGλ₯Ό μ€νμΌλ§νλ €λ©΄ λ€μ CSSλ₯Ό μ¬μ©ν μ μμ΅λλ€.
@namespace svg "http://www.w3.org/2000/svg";
svg|svg {
border: 1px solid black;
}
svg|circle {
fill: blue;
stroke: black;
stroke-width: 2;
}
μ¬κΈ°μλ μ λμ¬ svgλ‘ SVG λ€μμ€νμ΄μ€λ₯Ό μ μΈνκ³ μ΄λ₯Ό μ¬μ©νμ¬ svg λ° circle μμλ₯Ό λμμΌλ‘ μ§μ ν©λλ€.
MathML μ€νμΌλ§
MathMLμ μνμ νκΈ°λ²μ μ€λͺ νκΈ° μν XML κΈ°λ° μΈμ΄μ λλ€. CSSλ₯Ό μ¬μ©νμ¬ μ§μ μ€νμΌλ§νλ κ²½μ°λ λλ¬Όμ§λ§ κ°λ₯ν©λλ€. λ€μμ κΈ°λ³Έ μμ λλ€.
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>+</mo>
<mn>1</mn>
</mrow>
</math>
κ·Έλ¦¬κ³ ν΄λΉ CSS:
@namespace math "http://www.w3.org/1998/Math/MathML";
math|math {
font-size: 1.2em;
}
math|mi {
font-style: italic;
}
math|mo {
font-weight: bold;
}
κ³ κΈ κΈ°μ λ° κ³ λ € μ¬ν
CSS κ΅¬μ²΄μ± λ° λ€μμ€νμ΄μ€
CSS λ€μμ€νμ΄μ€λ₯Ό μ¬μ©ν λλ CSS ꡬ체μ±μ΄ μ΄λ»κ² μν₯μ λ―ΈμΉλμ§ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. λ€μμ€νμ΄μ€ μ λμ¬κ° μλ μ νμλ μ λμ¬κ° μλ μ νμμ λμΌν ꡬ체μ±μ κ°μ΅λλ€. κ·Έλ¬λ λμΌν μμμ μ μ©λλ κ·μΉμ΄ μ¬λ¬ κ°μΈ κ²½μ° νμ€ CSS κ΅¬μ²΄μ± κ·μΉμ΄ κ³μ μ μ©λ©λλ€. μλ₯Ό λ€μ΄ ID μ νμλ λ€μμ€νμ΄μ€μ κ΄κ³μμ΄ νμ ν΄λμ€ μ νμλ³΄λ€ λ ꡬ체μ μ λλ€.
λΈλΌμ°μ κ° νΈνμ±
CSS @namespaceμ λν μ§μμ μ΅μ λΈλΌμ°μ μμ μΌλ°μ μΌλ‘ μ°μν©λλ€. κ·Έλ¬λ μ΄μ λΈλΌμ°μ , νΉν 9 μ΄μ μ Internet Explorer λ²μ μ μ§μμ΄ μ νμ μ΄κ±°λ μ ν μ§μλμ§ μμ μ μμ΅λλ€. νΈνμ±μ 보μ₯νλ €λ©΄ λ€μν λΈλΌμ°μ μμ μ€νμΌμνΈλ₯Ό ν
μ€νΈνλ κ²μ΄ μ€μν©λλ€. μ΄μ λΈλΌμ°μ μ λν λ체 μ€νμΌλ§μ μ 곡νκΈ° μν΄ μ‘°κ±΄λΆ μ£Όμ λλ JavaScript ν΄κ²° λ°©λ²μ μ¬μ©ν΄μΌ ν μ μμ΅λλ€.
ν μ€νΈλ νμμ λλ€! λΈλΌμ°μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ μ μ©λ μ€νμΌμ κ²μ¬νκ³ λ€μμ€νμ΄μ€ κΈ°λ° κ·μΉμ΄ μ¬λ°λ₯΄κ² μ μ©λλμ§ νμΈνμμμ€.
μ¬λ¬ λ€μμ€νμ΄μ€ μμ
볡μ‘ν XML λ¬Έμλ μ¬λ¬ λ€μμ€νμ΄μ€λ₯Ό ν¬ν¨ν μ μμ΅λλ€. CSSμμ μ¬λ¬ λ€μμ€νμ΄μ€λ₯Ό μ μΈνκ³ μ¬μ©νμ¬ μλ‘ λ€λ₯Έ μ΄νμ μμλ₯Ό λμμΌλ‘ μ§μ ν μ μμ΅λλ€. νΌλμ λ°©μ§νλ €λ©΄ κ° λ€μμ€νμ΄μ€μ λν΄ κ³ μ ν μ λμ¬λ₯Ό μ¬μ©ν΄μΌ ν©λλ€.
XHTMLκ³Ό μ ν λ°μ΄ν°λ₯Ό μν μ¬μ©μ μ§μ XML μ΄νλ₯Ό λͺ¨λ μ¬μ©νλ λ¬Έμλ₯Ό μκ°ν΄ λ³΄κ² μ΅λλ€.
<root xmlns:html="http://www.w3.org/1999/xhtml" xmlns:prod="http://example.com/products">
<html:h1>μ ν μΉ΄νλ‘κ·Έ</html:h1>
<prod:product>
<prod:name>μμ ―</prod:name>
<prod:price>19.99</prod:price>
</prod:product>
</root>
λ€μκ³Ό κ°μ΄ CSSλ‘ μ΄ λ¬Έμλ₯Ό μ€νμΌλ§ν μ μμ΅λλ€.
@namespace html "http://www.w3.org/1999/xhtml";
@namespace prod "http://example.com/products";
html|h1 {
color: darkgreen;
}
prod|product {
border: 1px solid gray;
padding: 10px;
margin-bottom: 10px;
}
prod|name {
font-weight: bold;
}
prod|price {
color: red;
}
λ€μμ€νμ΄μ€κ° μλ CSS λ³μ μ¬μ©
CSS λ³μ(μ¬μ©μ μ§μ μμ±)λ λ€μμ€νμ΄μ€μ ν¨κ» μ¬μ©νμ¬ μ μ§ κ΄λ¦¬ κ°λ₯νκ³ μ μ°ν μ€νμΌμνΈλ₯Ό λ§λ€ μ μμ΅λλ€. νΉμ λ€μμ€νμ΄μ€ λ΄μμ λ³μλ₯Ό μ μνκ³ μ€νμΌμνΈ μ 체μμ μ¬μ¬μ©ν μ μμ΅λλ€.
@namespace svg "http://www.w3.org/2000/svg";
:root {
--svg-primary-color: blue;
}
svg|circle {
fill: var(--svg-primary-color);
}
svg|rect {
fill: var(--svg-primary-color);
}
μ΄ μμμ --svg-primary-color λ³μλ μ μλμ΄ SVG λ€μμ€νμ΄μ€ λ΄μ μ λ° μ¬κ°ν μμμ μ±μ°κΈ° μμμ μ€μ νλ λ° μ¬μ©λ©λλ€.
μ κ·Όμ± κ³ λ € μ¬ν
CSSλ‘ XML λ¬Έμλ₯Ό μ€νμΌλ§ν λλ μ κ·Όμ±μ κ³ λ €νλ κ²μ΄ μ€μν©λλ€. μ€νμΌλ§ μ νμ΄ μ₯μ κ° μλ μ¬μ©μμ λ¬Έμ μ κ·Όμ±μ λΆμ μ μΈ μν₯μ λ―ΈμΉμ§ μλλ‘ ν©λλ€. μλ―Έλ‘ μ λ§ν¬μ μ μ¬μ©νκ³ , μΆ©λΆν μμ λλΉλ₯Ό μ 곡νκ³ , μ 보λ₯Ό μ λ¬νκΈ° μν΄ μμμλ§ μμ‘΄νμ§ λ§μμμ€.
μλ₯Ό λ€μ΄ SVG κ·Έλν½μ μ€νμΌλ§ν λ <desc> λ° <title> μμλ₯Ό μ¬μ©νμ¬ μ€μν μκ°μ μμμ λν λ체 ν
μ€νΈ μ€λͺ
μ μ 곡ν©λλ€. μ΄λ¬ν μμλ νλ©΄ νλ
κΈ° λ° κΈ°ν 보쑰 κΈ°μ μμ μ‘μΈμ€ν μ μμ΅λλ€.
κ΅μ ν(i18n) λ° μ§μν(l10n)
XML λ¬Έμμ μ¬λ¬ μΈμ΄λ‘ λ μ½ν
μΈ κ° ν¬ν¨λ κ²½μ° CSSλ₯Ό μ¬μ©νμ¬ μΈμ΄λ³ μ€νμΌλ§μ μ μ©νλ κ²μ κ³ λ €νμμμ€. :lang() κ°μ ν΄λμ€λ₯Ό μ¬μ©νμ¬ μΈμ΄ μμ±μ κΈ°λ°μΌλ‘ μμλ₯Ό λμμΌλ‘ μ§μ ν μ μμ΅λλ€. μ΄λ κ² νλ©΄ λ€μν μΈμ΄μ λ§κ² κΈκΌ΄, κ°κ²© λ° κΈ°ν μκ°μ μμ±μ μ‘°μ ν μ μμ΅λλ€.
<p lang="en">This is an English paragraph.</p> <p lang="fr">Ceci est un paragraphe en franΓ§ais.</p>
p:lang(en) {
font-family: Arial, sans-serif;
}
p:lang(fr) {
font-family: 'Times New Roman', serif;
}
μ΄λ κ² νλ©΄ λ€μν μΈμ΄ λ°°κ²½μ μ¬μ©μκ° μ½ν μΈ λ₯Ό μ¬λ°λ₯΄κ² μ½μ μ μλλ‘ νμν μ μμ΅λλ€.
CSS @namespace μ¬μ© λͺ¨λ² μ¬λ‘
- CSS μ€νμΌμνΈ μλ¨μμ λ€μμ€νμ΄μ€λ₯Ό μ μΈν©λλ€. μ΄λ κ² νλ©΄ κ°λ μ±κ³Ό μ μ§ κ΄λ¦¬μ±μ΄ ν₯μλ©λλ€.
- μλ―Έ μλ μ λμ¬λ₯Ό μ¬μ©ν©λλ€. ν΄λΉ λ€μμ€νμ΄μ€(μ: XHTMLμ
html, SVGμsvg)λ₯Ό λͺ ννκ² λνλ΄λ μ λμ¬λ₯Ό μ νν©λλ€. - λ€μμ€νμ΄μ€ μ¬μ©μ μΌκ΄μ±μ μ μ§ν©λλ€. μ€νμΌμνΈ μ 체μμ λμΌν λ€μμ€νμ΄μ€μ λν΄ νμ λμΌν μ λμ¬λ₯Ό μ¬μ©ν©λλ€.
- μ€νμΌμνΈλ₯Ό μ² μ ν ν μ€νΈν©λλ€. λΈλΌμ°μ κ° νΈνμ± λ° μ κ·Όμ±μ 보μ₯ν©λλ€.
- λ€μμ€νμ΄μ€λ₯Ό λ¬Έμνν©λλ€. CSSμ μ£Όμμ μΆκ°νμ¬ κ° λ€μμ€νμ΄μ€μ λͺ©μ κ³Ό νΉμ κ³ λ € μ¬νμ μ€λͺ ν©λλ€.
μΌλ°μ μΈ λ¬Έμ ν΄κ²°
- μ€νμΌμ΄ μ μ©λμ§ μμ: CSSμ λ€μμ€νμ΄μ€ URIκ° XML λ¬Έμμ μ μΈλ URIμ μ νν μΌμΉνλμ§ λ€μ νμΈνμμμ€. μμ μ€νλ μ€νμΌμ΄ μ μ©λμ§ μκ² ν μ μμ΅λλ€. λν CSS μ νμμμ μ¬λ°λ₯Έ μ λμ¬λ₯Ό μ¬μ©νκ³ μλμ§ νμΈνμμμ€.
- λΈλΌμ°μ νΈνμ± λ¬Έμ : CSS 곡κΈμ
체 μ λμ¬ λλ JavaScript shimsλ₯Ό μ¬μ©νμ¬ μ΄μ λΈλΌμ°μ μ λν μ§μμ μ 곡ν©λλ€. λΈλΌμ°μ νΈνμ± ν
μ΄λΈμ μ°Έμ‘°νμ¬ λ€μν λΈλΌμ°μ μμ CSS
@namespaceμ λν μ§μ μμ€μ νμΈνμμμ€. - κ΅¬μ²΄μ± μΆ©λ: λΈλΌμ°μ μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ μ μ©λ μ€νμΌμ κ²μ¬νκ³ κ΅¬μ²΄μ± μΆ©λμ μλ³ν©λλ€. μ¬λ°λ₯Έ μ€νμΌμ΄ μ μ©λλλ‘ CSS μ νμλ₯Ό μ μ νκ² μ‘°μ ν©λλ€.
CSS λ° XML μ€νμΌλ§μ λ―Έλ
μΉ κΈ°μ μ΄ λ°μ ν¨μ λ°λΌ XML λ¬Έμλ₯Ό μ€νμΌλ§νλ λ° CSSλ₯Ό μ¬μ©νλ κ²μ΄ κ³μ λ°μ ν κ°λ₯μ±μ΄ λμ΅λλ€. μλ‘μ΄ CSS κΈ°λ₯ λ° μ νμλ XML μ½ν μΈ λ₯Ό λμμΌλ‘ μ§μ νκ³ μ€νμΌλ§νλ λ° ν¨μ¬ λ κ°λ ₯νκ³ μ μ°ν λ°©λ²μ μ 곡ν μ μμ΅λλ€. XML λ° CSSλ‘ μμ νλ κ°λ°μλ μ΅μ CSS μ¬μ λ° λͺ¨λ² μ¬λ‘μ λν μ΅μ μ 보λ₯Ό μ»λ κ²μ΄ νμμ μ λλ€.
κ°λ°μ μ μ¬μ μΈ ν λΆμΌλ 볡μ‘ν XML ꡬ쑰 λ° λ°μ΄ν° λ°μΈλ©μ λν ν₯μλ μ§μμ λλ€. μ΄λ₯Ό ν΅ν΄ κ°λ°μλ CSSλ₯Ό μ¬μ©νμ¬ λ³΄λ€ λμ μ΄κ³ λννμΈ XML κΈ°λ° μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.
κ²°λ‘
CSS @namespaceλ XML λ¬Έμλ₯Ό μ€νμΌλ§νλ κ°λ ₯ν λꡬμ
λλ€. XML λ€μμ€νμ΄μ€μ κ°λ
κ³Ό CSSμμ μ΄λ₯Ό μ μΈνκ³ μ¬μ©νλ λ°©λ²μ μ΄ν΄νλ©΄ XHTML, SVG λ° MathMLμ ν¬ν¨ν λ€μν XML κΈ°λ° νμμ ν¨κ³Όμ μΌλ‘ μ€νμΌλ§ν μ μμ΅λλ€. μ€νμΌμνΈλ₯Ό κ°λ°ν λ λΈλΌμ°μ κ° νΈνμ±, μ κ·Όμ± λ° κ΅μ νλ₯Ό κ³ λ €νλ κ²μ μμ§ λ§μμμ€. μ μ€ν κ³νκ³Ό μΈλΆ μ¬νμ λν μ£Όμλ₯Ό κΈ°μΈμ΄λ©΄ λ€μν νλ«νΌκ³Ό μ₯μΉμμ μννκ² μλνλ μκ°μ μΌλ‘ λ§€λ ₯μ μ΄κ³ μ κ·Ό κ°λ₯ν XML κΈ°λ° μ ν리μΌμ΄μ
μ λ§λ€ μ μμ΅λλ€.
μ΄ κ°μ΄λλ CSS λ€μμ€νμ΄μ€λ₯Ό λ§μ€ν°νκΈ° μν κ²¬κ³ ν κΈ°λ°μ μ 곡ν©λλ€. μμ λ₯Ό μ€ννκ³ , λ€μν μ€νμΌλ§ κΈ°μ μ νμνκ³ , CSS λ° XML κΈ°μ μ μ΅μ κ°λ° μ 보λ₯Ό μ»μΌμμμ€. XMLμ ν¨κ³Όμ μΌλ‘ μ€νμΌλ§νλ λ₯λ ₯μ μ΅μ μΉ νμ€μΌλ‘ μμ νλ λͺ¨λ μΉ κ°λ°μμκ² κ·μ€ν κΈ°μ μ λλ€.