diff options
Diffstat (limited to 'files/ko/web/api/xsltprocessor/generating_html/index.html')
| -rw-r--r-- | files/ko/web/api/xsltprocessor/generating_html/index.html | 174 |
1 files changed, 174 insertions, 0 deletions
diff --git a/files/ko/web/api/xsltprocessor/generating_html/index.html b/files/ko/web/api/xsltprocessor/generating_html/index.html new file mode 100644 index 0000000000..5bb284bdb8 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/generating_html/index.html @@ -0,0 +1,174 @@ +--- +title: Generating HTML +slug: XSLT_in_Gecko/Generating_HTML +translation_of: Web/API/XSLTProcessor/Generating_HTML +--- +<h2 id="HTML_.EC.83.9D.EC.84.B1.ED.95.98.EA.B8.B0"> HTML 생성하기</h2> +<p>브라우저에서 XSLT의 공통 응용은 XML을 클라이언트의 안에 변환해 넣는 것이다. 두번째 예는 입력문서(example2.xml)를 변환하는데, 이것은 또 글의 정보를 포함하고 HTML문서 안에 들어간다. +</p><p>Article의 <code><span><body></span></code> 요소는 지금 HTML의 요소 (<code><span><b></span></code> 와 <code><span><u></span></code> 태그, 그림 2)를 포함한다. XML 문서는 HTML요소와 XML 요소 모두 포함하지만, 단 하나의 namespace 즉 XML 요소만 필요하다. HTML namespace가 없으므로, 그리고 XHTML namespace를 사용하여 XSL에서 an XML document를 생성하고 그것은 HTML문서와 같은 양상은 아닐 것이고, XSL Stylesheet 의<code>xsl:output</code>는 결과문서는 HTML처럼 다루어질 것을 보장한다 . XML 요소에 대해, 우리 자신의 namespace <code><a class=" external" href="http://devedge.netscape.com/2002/de">http://devedge.netscape.com/2002/de</a></code> 는 필요하고, 그것은 접두어 myNS <code>(xmlns:myNS="<span>http://devedge.netscape.com/2002/de</span>)</code>에 주어진다. +</p><p><small><b>그림 2 XML 파일 (example2.xml)</b></small> +<span>XML Document (example2.xml):</span> +</p> +<pre><?xml version="1.0"?> +<?xml-stylesheet type="text/xsl" href="example2.xsl"?> +<myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de"> +<myNS:Title>My Article</myNS:Title> +<myNS:Authors> +<myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author> +<myNS:Author>Mr. Bar</myNS:Author> +</myNS:Authors> +<myNS:Body> +The <b>rain</b> in <u>Spain</u> stays mainly in the plains. +</myNS:Body> +</myNS:Article> +</pre> +<p>The XSL Stylesheet used will need to have two namespaces - one for the XSLT elements and one for our own XML elements used in the XML document. The output of the XSL Stylesheet is set to <code>HTML</code> by using the <code>xsl:output</code> element. By setting the output to be HTML and not having a namespace on the resulting elements (colored in blue), those elements will be treated as HTML elements. +</p><p><small><b>그림 3 : 두 namespaces를 가진 XSL Stylesheet (example2.xsl)</b></small> +<span>XSL Stylesheet (example2.xsl):</span> +</p> +<pre><?xml version="1.0"?> +<xsl:stylesheet version="1.0" +xmlns:xsl="http://www.w3.org/1999/XSL/Transform" +xmlns:myNS="http://devedge.netscape.com/2002/de"> + +<xsl:output method="html"/> +... +</xsl:stylesheet version="1.0"> +</pre> +<p>A template matching the root node of the XML document is created and used to create the basic structure of the HTML page. +</p><p><small><b>Figure 4 : Creating the basic HTML document</b></small> +<span>XSL Stylesheet (example2.xsl):</span> +</p> +<pre>... +<xsl:template match="/"> +<html> + +<head> + +<title> +<xsl:value-of select="/myNS:Article/myNS:Title"/> +</title> + +<style type="text/css"> +.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;} +</style> + +</head> + +<body> +<p class="myBox"> +<span class="title"> +<xsl:value-of select="/myNS:Article/myNS:Title"/> +</span> </br> + +Authors: <br /> +<xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> +</p> + +<p class="myBox"> +<xsl:apply-templates select="//myNS:Body"/> +</p> + +</body> + +</html> +</xsl:template> +... +</pre> +<p>Three more <code>xsl:template</code>'s are needed to complete the example. The first <code>xsl:template</code> is used for the author nodes, while the second one processes the body node. The third template has a general matching rule which will match any node and any attribute. It is needed in order to preserve the html elements in the XML document, since it matches all of them and copies them out into the HTML document the transformation creates. +</p><p><b><small>그림 5 : 최종 3개 템플리트</small></b> +<span>XSL Stylesheet(example2.xsl):</span> +</p> +<pre>... +<xsl:template match="myNS:Author"> +-- <xsl:value-of select="." /> + +<xsl:if test="@company"> +:: <b> <xsl:value-of select="@company" /> </b> +</xsl:if> + +<br /> +</xsl:template> + +<xsl:template match="myNS:Body"> +<xsl:copy> +<xsl:apply-templates select="@*|node()"/> +</xsl:copy> +</xsl:template> + +<xsl:template match="@*|node()"> +<xsl:copy> +<xsl:apply-templates select="@*|node()"/> +</xsl:copy> +</xsl:template> +... +</pre> +<p>The final XSLT stylesheet looks as follows: +</p><p><small><b>그림 6 : 최종 XSLT Stylesheet<span>view example | view source</span></b></small> +<span>XSL Stylesheet:</span> +</p> +<pre><?xml version="1.0"?> +<xsl:stylesheet version="1.0" +xmlns:xsl="http://www.w3.org/1999/XSL/Transform" +xmlns:myNS="http://devedge.netscape.com/2002/de"> + +<xsl:output method="html" /> + +<xsl:template match="/"> +<html> + +<head> + +<title> +<xsl:value-of select="/myNS:Article/myNS:Title"/> +</title> + +<style type="text/css"> +.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;} +</style> + +</head> + +<body> +<p class="myBox"> +<span class="title"> +<xsl:value-of select="/myNS:Article/myNS:Title"/> +</span> <br /> + +Authors: <br /> +<xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> +</p> + +<p class="myBox"> +<xsl:apply-templates select="//myNS:Body"/> +</p> + +</body> + +</html> +</xsl:template> + +<xsl:template match="myNS:Author"> +-- <xsl:value-of select="." /> + +<xsl:if test="@company"> +:: <b> <xsl:value-of select="@company" /> </b> +</xsl:if> + +<br /> +</xsl:template> + +<xsl:template match="myNS:Body"> +<xsl:copy> +<xsl:apply-templates select="@*|node()"/> +</xsl:copy> +</xsl:template> + +<xsl:template match="@*|node()"> +<xsl:copy> +<xsl:apply-templates select="@*|node()"/> +</xsl:copy> +</xsl:template> +</xsl:stylesheet> +</pre> +{{ languages( { "en": "en/XSLT_in_Gecko/Generating_HTML" } ) }} |