XML Styleμ μ§μ , λΈλΌμ°μ μ μ¬μ©, λμ€νλμ΄ λ°©μ ,XMLκ³Ό CSSμ μμ± λ°©μμ μ΄μ©λ°©λ²
1. XML+CSS ¶
- XMLλ¬Έμλ CSSλ₯Ό μ΄μ©ν΄μ λΈλΌμ°μ μ νννλ κ²μ΄ κ°λ₯νλ€.
- κ·Έλ¬λ CSSλ‘ μ€νμΌ μνΈλ₯Ό μμ±ν λλ νκ³κ° μλ€.
- CSSλ ν°νΈ,μκΉ,μ¬λ°±λ±κ³Ό κ°μ μΈνμ μΈ μ€νΈμΌμ κΈ°μ νλ μΈμ΄μ΄λ€.
- XMLλ¬Έμκ° λ¨μν ν
μ€νΈ ννμ λ¬Έμμ΄λ©΄ CSSλ‘λ§μΌλ‘λ νννλκ²μ΄ μΆ©λΆνλ€.
- νμ§λ§ XMLλ¬Έμλ λ°λμ ν
μ€νΈ νμ
μ λ΄μ©λ€λ‘λ§ μ΄λ£¨μ΄μ§ κ²λ μλλ€
- κ·Έλ¦¬κ³ μ€ν€λ§μ μ¬μ©μ΄ 보νΈν λλ©΄μ μ¬λ¬ νμ
μ λ°μ΄ν°λ€μ ν¬ν¨ν μ μλ λ¬Έμ ν¬λ§·μ΄ λμ΄ μ’λ λ€μν λμ€νλ μ΄ λ°©μμ΄ νμνλ€.
- μ΄λ° CSSμ νκ³λ₯Ό 극볡ν΄μ μ’λ μ μ°νκ³ λ€μνκ² λμ€νλ μ΄ λ°©μμ κΈ°μ ν μ μλ λ°©λ²μ΄ XSLμ΄λ€.
2.1. PIλΆλΆ ¶
~cpp <!-- mydoc.cssλ₯Ό μ¬μ©νκ² λ€ --> <?xml-stylesheet type="text/css" href="mydoc.css"?>
2.2. λ§ν¬ νν ¶
- <HTML : A>νκ·Έλ₯Ό μ¬μ© μ΄κ²μ μ¬μ©νκΈ° μν΄μλ
~cpp <MYDOC xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
- μ΄λ κ² λ€μμ€νμ΄μ€λ₯Ό μ§μ ν΄ μ£Όμ΄μΌνλ€.
- κ·Έλ¦¬κ³ μμ κ°μ΄ HTML λ€μ μ€νμ΄μ€λ₯Ό μ§μ ν κ²½μ°μλ <HTML : A> λΏ μλλΌ λ€λ₯Έ HTMLμ νκ·Έλ€λ HTML λ€μ μ€νμ΄μ€μ Prefixλ₯Ό λΆμ¬ μ¬μ©ν μμλ€.
- λ€λ₯Έ URLλ‘ μ΄λνλ μ
~cpp <HTML:A href="http://msdn.microsoft.com/xml/xslguide/browsing-css.asp">How to Write a CSS StyleSheet for Browsing XML</HTML:A>
3. μμ ¶
- XML λΆλΆ
~cpp <?xml version="1.0" encoding="KSC5601"?> <?xml-stylesheet type="text/css" href="mydoc.css"?> <!DOCTYPE MYDOC SYSTEM "mydoc.dtd"> <MYDOC xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional"> <TITLE> IE5μμμ XML λ¬Έμ 보기(XML+CSS) </TITLE> <DATE TYPE="BEGINNING_DATE"> <YEAR>1999</YEAR> <MONTH>10</MONTH> <DAY>20</DAY> </DATE> <AUTHOR> <NAME>μ΄μ§μ°</NAME> <EMAIL><HTML:A href="mailto:jiyuns@netsgo.com">jiyuns@netsgo.com</HTML:A> </EMAIL> </AUTHOR> <ABSTRACT> XML λ¬Έμλ₯Ό μΉμΌλ‘ 보λ λ°©λ²μ. νμ¬ IE5.0μ΄ XMLμ μ§μνλ―λ‘, IE5.0μ λΈλΌμ°μ λ‘ μ¬μ©νκ³ μ€νμΌλ‘λ CSSλ₯Ό μ¬μ©νμ¬ λ³Ό μ μλ λ°©λ²μ μ€λͺ ν κ² μ λλ€. μ΄ λ¬Έμ λν XMLλ‘ μμ±λμ΄ μμ΅λλ€. </ABSTRACT> <BODY> <MODULE> <MTITLE>1. IE5.0μμ XML λ¬Έμ 보λ λ°©λ²</MTITLE> <MBODY> <LIST> <LCOMPO>(1) XML + XSL </LCOMPO> <LCOMPO>(2) XML + CSS </LCOMPO> </LIST> <PA>XMLμ μ€νμΌμνΈ μΈμ΄λ XSLλ‘, XSLλ‘ κΈ°μ λ μ€νμΌμνΈλ₯Ό μ΄μ©νμ¬, XML λ¬Έμμ μ€νμΌμ μ§μ ν μ μλλ‘ μ μλμ΄μ Έ μλ€. MSμμ IE5μμ XMLμ μ§μνκ² λλ©΄μ, CSSλ XMLμ μ€νμΌμνΈλ‘ μ΄μ©ν μ μκ² λμλ€. νμ¬ IE5.0μμλ XMLμ νμ€ μ€νμΌμνΈμΈ XSLκ³Ό CSSλ‘ μμ±λ μ€νμΌμ λͺ¨λ μ¬μ©ν μ μλλ‘ μ§μνλ€. IE5.0μλ XML Parserμ XSL Processorκ° ν¬ν¨λμ΄μ Έ μμ΄, XSLμ μ€νμΌμνΈ μΈμ΄λ‘ μ¬μ©ν κ²½μ°, XML λ¬Έμλ₯Ό Parserλ₯Ό ν΅ν΄ νμ±ν λ€ XSL νλ‘μΈμκ° μ§μ λ μ€νμΌμ λ°λΌμ λμ€νλ μ΄λ λ΄μ©λ€μ λ΄λΆμ μΌλ‘ HTMLλ‘ λ³νν΄μ, μ΅μ’ μ μΌλ‘ IE5.0μ λμ€νλ μ΄ νκ² λλ€.</PA> <PB/> <PA>XMLλ¬Έμλ₯Ό μνλ μ€νμΌλ‘ 보기 μν΄μλ, μ€μ μ·μ΄ λλ μ€νμΌμνΈλ₯Ό λ§λ€μ΄μ Έ μμ΄μΌ νκ³ , μ΄λ€ μ€νμΌμνΈλ₯Ό μ¬μ©ν μ§λ₯Ό ν΄λΉ XMLλ¬Έμ λ΄λΆμ κΈ°μ ν΄ μ£Όμ΄μΌ νλ€. λΈλΌμ°μ λ XML λ¬Έμλ₯Ό μ½μ΄λ€μ΄λ©΄μ, μ€νμΌμνΈκ° μ§μ λμ΄ μλ€λ©΄, κ·Έ μ€νμΌμνΈ νμΌμ λΆλ¬λ€μ¬ ν΄λΉνλ μ€νμΌμ λ§κ² λΈλΌμ°μ μ λμ€νλ μ΄νκ² λλ€. μ¬κΈ°μμλ μ€μ μ·μ΄ λλ μ€νμΌμνΈλ₯Ό μ§μ νλ λ°©λ², μ¦ μ΄λ€ μ·μ μ κ² λ€κ³ μ μΈνλ λ°©λ²μ λ€μκ³Ό κ°λ€.</PA> <PB/> <PA>< ?xml-stylesheet type="text/css" href="mydoc.css"? > </PA> <PB/> <PA>μμ μ μΈμ μλ―Έλ μ€νμΌμνΈμ νμ μ CSSμ΄κ³ CSSκ° κΈ°μ λμ΄ μλ νμΌμ mydoc.cssμ΄λΌλ λ»μ΄λ€.</PA> <PA>λ§μ½ XSLλ‘ κΈ°μ λ μ€νμΌμνΈλ₯Ό μ¬μ©νκ³ μ νλ€λ©΄, λ€μκ³Ό κ°μ΄νμ¬ μ¬μ©νλ€.</PA> <PB/> <PA>< ?xml-stylesheet type="text/xsl" href="mydoc.xsl"? > </PA> <PB/> <PA>μ΄λ¬ν μ¬μ©ν μ€νμΌμνΈλ₯Ό μ μΈνλ λΆλΆμ XML λ¬Έμμ νλ‘€λ‘κ·Έμ μμΉνλ©°, μΌλ°μ μΌλ‘ XML μ μΈλΆ λ°λ‘ λ€μ, document type μ μΈλΆ μμ μμΉνκ² λλ€.</PA> <PA> <HTML:A href="mydoc_itself.xml">μ°Έκ³ </HTML:A> : μ΄ XML λ¬Έμμμ μ€νμΌ μ μΈν λΆλΆμ μμΉλ₯Ό νμΈν΄λ³΄μλ©΄ λ©λλ€.</PA> </MBODY> <MTITLE></MTITLE> <MBODY> <PA>Q. μ€νμΌμνΈκ° μ§μ μλ XML λ¬Έμλ IE5λ‘ λ³Ό μ μλκ°?</PA> <PA>A. IE5μμλ μ€νμΌμ΄ μ§μ λμ§ μμ κ²½μ°μλ μμ μ΄ μ 곡νλ λννΈ μ€νμΌμ λ°λΌ ν΄λΉ XML λ¬Έμλ₯Ό λ³Ό μ μλλ‘ μ§μνλ€.</PA> <PA> <HTML:A href="mydoc_nostyle.xml">μ°Έκ³ </HTML:A> : μ€νμΌμ΄ μ§μ μλ λ¬Έμ 보기μμ λλ€. IE5μ λννΈ μ€νμΌμ νμΈν΄λ³Ό μ μμ΅λλ€. </PA> </MBODY> </MODULE> <MODULE> <MTITLE>2. μμνκΈ°</MTITLE> <MBODY> <LIST> <LCOMPO>(1) XML λ¬Έμ λΈλΌμ°μ§μ μ§μνλ IE5.0μ μ€μΉνλ€.</LCOMPO> <LCOMPO>(2) XML λ¬Έμλ₯Ό μμ±νλ€.</LCOMPO> <LCOMPO>(3) CSSλ₯Ό λ§λ λ€.</LCOMPO> <LCOMPO>(4) XMLλ¬Έμμ μ€νμΌλ‘ μ¬μ©νκ³ μ νλ CSSλ₯Ό μ λλ€.</LCOMPO> <LCOMPO>(5) IE5.0μΌλ‘ λ³Έλ€!</LCOMPO> </LIST> <PA>DTDλ₯Ό λ³΄κ³ , μ¬μ©λλ μ리먼νΈλ€μ λν΄μ μ€νμΌμ μ§μ ν΄ λλ€. λ§μ½ DTDλ₯Ό μ¬μ©νμ§ μλ λ¬ΈμλΌλ©΄, μ§μ λ¬Έμλ΄μ©μ λ³΄κ³ λ¬Έμ λ΄μμ μ¬μ©λλ μ리먼νΈλ€μ μ°Ύμλ΄μΌ νλ€. κ°μ DTDλ₯Ό μ¬μ©νλ XML λ¬Έμλ€μ λν΄μλ κ°μ μ€νμΌμ μ§μ ν΄μ μ¬μ©ν μ μμΌλ―λ‘, μ€νμΌμ ν λ²λ§ μμ±ν΄λ κ°μ ν΄λμ€μ μνλ XMLλ¬Έμλ€μ΄ ν¨κ» μ¬μ©ν μ μλ€. λ λ°λ©΄μ, νλμ λ¬ΈμλΌλ μμ±λ μ€νμΌμ΄ μ¬λΏμ΄λΌλ©΄, μ΄ μ¬λ¬κ°μ μ€νμΌλ€μ μ¬μ©ν΄μ λ€λ₯΄κ² λμ€νλ μ΄ μν¬ μλ μλ€.</PA> </MBODY> </MODULE> <MODULE> <MTITLE>3. μμ 보기</MTITLE> <MBODY> <PA>XML λ¬Έμμ λν μμ λ₯Ό 보μλ €λ©΄ μ΄ λ¬Έμμ μμ€λ³΄κΈ°λ₯Ό ν΄λ³΄μΈμ!</PA> <PA>μ΄ λ¬Έμκ° λ°λ‘ XMLλ‘ μμ±λμμ΅λλ€.</PA> <PA>λλ μ§μ μΉμΌλ‘ λ³΄κΈ°λ‘ μ 곡λλ κ²μ λ€μκ³Ό κ°μ΅λλ€.</PA> <LIST> <LCOMPO>(1) <HTML:A href="mydoc_itself.xml">μ€μ XML λ¬Έμ 보기</HTML:A></LCOMPO> <LCOMPO>(2) <HTML:A href="mydoc_nostyle.xml">μ€νμΌμ΄ μ§μ μλ λ¬Έμ 보기(IE5.0μ raw style)</HTML:A></LCOMPO> <LCOMPO>(3) <HTML:A href="mydoc_style.xml">μ΄ XML λ¬Έμκ° μ¬μ©νλ CSSλ‘ μμ±λ μ€νμΌμνΈ λ³΄κΈ°</HTML:A></LCOMPO> <LCOMPO>(4) <HTML:A href="mydoc_dtd.xml">μ΄ XML λ¬Έμκ° μ¬μ©νλ DTD 보기</HTML:A></LCOMPO> </LIST> </MBODY> </MODULE> <MODULE> <MTITLE>4. κ³ λ €μ¬ν</MTITLE> <MBODY> <PA>νμ¬μ IE5.0μμλ XLinkλ μ§μνμ§ μλλ€. κ·Έλ°λ°, λ€μμ€νμ΄μ€λ₯Ό μ΄μ©νμ¬ HTML Aλ§ν¬ κΈ°λ₯μ μ¬μ©ν μλ μλ€. XLinkμμ μ μλλ νμ₯λ κ°λ μ λ§ν¬λ₯Ό μ¬μ©νλ κ²μ μμ§μ IE5.0λΈλΌμ°μ μμλ μ§μμ΄ λμ§μκΈ°λλ¬Έμ, νμ¬λ‘μλ μ¬μ ν λ¨λ°©ν₯μ end linkκ° νλλ‘ μ§μ λλ simple linkλ₯Ό μ¬μ©ν μ λ°μ μλ€.</PA> <PA>XMLλ¬Έμλ΄μμ λ€μμ€νμ΄μ€λ₯Ό μ΄μ©νμ¬ HTMLμ Aλ§ν¬λ₯Ό μ¬μ©ν΄μ λ§ν¬λ₯Ό μ§μ νλ λ°©λ²μ <HTML:A href = "xml_hlink.xml">μ¬κΈ°</HTML:A>μ μ€λͺ λμ΄μλ€.</PA> </MBODY> </MODULE> <MODULE> <MTITLE>5. Refereces</MTITLE> <MBODY> <LIST> <LCOMPO> [1]<HTML:A href="http://msdn.microsoft.com/xml/xslguide/browsing-css.asp "> How to Write a CSS Style Sheet for Browsing XML</HTML:A> </LCOMPO> <LCOMPO> [2]<HTML:A href="http://msdn.microsoft.com/xml/xslguide/browsing-overview.asp"> Browsing XML Documents in Internet Explorer 5</HTML:A> </LCOMPO> <LCOMPO> [3]<HTML:A href="http://msdn.microsoft.com/xml/samples/review/review-css.xml"> MSDNμμ μ 곡νλ CSSμ¬μ© XML λ¬Έμ μμ </HTML:A>(IE5.0 required) </LCOMPO> <LCOMPO> [4]<HTML:A href="http://msdn.microsoft.com/xml/samples/review/review-xsl.xml"> MSDNμμ μ 곡νλ XSLμ¬μ© XML λ¬Έμ μμ </HTML:A> (IE5.0 required) </LCOMPO> </LIST> <!-- <HTML:A href = "xmllink.xml">μ¬κΈ°</HTML:A>μ μ€λͺ λμ΄μλ€.</PA> --> </MBODY> </MODULE> </BODY> <FOOT> <PA>μ΄ λ¬Έμλ <HTML:A href="mailto:jiyuns@netsgo.com">μ μ</HTML:A>μμ μμ μμ΄ μμ μ μΌλ‘ λ°°ν¬νκ±°λ</PA> <PA>μμ νκ±°λ μ΄μ©ν μ μμΌλ©°, κ·Έ μ΄μΈμ μ©λλ‘ μΈμ©ν μμλ μΆμ²λ₯Ό λ°νμΌνκ³ , </PA> <PA>λΉ μμ μ μΈ λͺ©μ μΌλ‘ μμ νκ±°λ λ°°ν¬νλ κ²½μ°μλ μ μμμ νμκ° μμ΄μΌ ν©λλ€.</PA> <PA>All Rights Reserved by Lee, Jiyun</PA> </FOOT> </MYDOC>
- DTD λΆλΆ
~cpp <!ELEMENT MYDOC (TITLE,DATE*,AUTHOR*,DOCDESC?,ABSTRACT?,BODY?,FOOT?)> <!ELEMENT TITLE (#PCDATA)> <!ELEMENT DOCDESC (#PCDATA)> <!ELEMENT ABSTRACT ANY> <!ELEMENT DATE (YEAR, MONTH, DAY)> <!ATTLIST DATE TYPE (LAST_MODIFIED|BEGINNING_DATE) #REQUIRED> <!ELEMENT YEAR (#PCDATA)> <!ELEMENT MONTH (#PCDATA)> <!ELEMENT DAY (#PCDATA)> <!ELEMENT AUTHOR (NAME,EMAIL,(PHONE)?)> <!ELEMENT NAME (#PCDATA)> <!ELEMENT EMAIL (#PCDATA)> <!ELEMENT PHONE (#PCDATA)> <!ELEMENT BODY (CONTENT?,(MODULE|PA)*)> <!ELEMENT MODULE (MTITLE,MBODY)*> <!ELEMENT MBODY (PA | PB | LIST | COMMENT | SUBLIST | BLOCK)*> <!ELEMENT MTITLE (#PCDATA)> <!ELEMENT PA ANY> <!ELEMENT PB EMPTY> <!ELEMENT XMP ANY> <!ELEMENT BLOCK ANY> <!ELEMENT CONTENT (MTITLE,MBODY)*> <!ELEMENT LIST ((((LTITLE)*,((LCOMPO)+ | SUBLIST)) | LIST)*) > <!ELEMENT SUBLIST (LCOMPO)*> <!ELEMENT LTITLE (#PCDATA)> <!ELEMENT LCOMPO ANY> <!ELEMENT COMMENT (#PCDATA)> <!ELEMENT FOOT (PA)*>
- CSS λΆλΆ
~cpp TITLE{ display :block; font-size :18pt; font-weight :bold; font-family :Times New Roman; color :#333377; text-align :center; margin-top :2em; margin-bottom :1em; } DATE{ display :block; margin-top :0.5em; margin-bottom :0em; text-align :center; } YEAR{ display :inline; font-size :10pt; font-weight :normal; font-family :λ°ν체,Times New Roman; color :black; } MONTH{ display :inline; font-size :10pt; font-weight :normal; font-family :λ°ν체,Times New Roman; color :black; } DAY{ display :inline; font-size :10pt; font-weight :normal; font-family :λ°ν체,Times New Roman; color :black; } AUTHOR{ display :block; margin-top :0em; margin-bottom :0.5em; text-align :center; } NAME{ display :block; font-size :10pt; font-weight :normal; font-family :λ°ν체,Times New Roman; color :black; } EMAIL{ display :block; font-size :10pt; font-weight :normal; font-family :λ°ν체,Times New Roman; color :black; } ABSTRACT{ display :block; font-size :9pt; font-weight :normal; font-family :λ°ν체,Times New Roman; color :black; margin-left :8em; margin-right :8em; margin-top :2em; margin-bottom :1.5em; } BODY{ display :block; margin-left :1em; margin-right :1em; margin-top :2em; margin-bottom :2em; } MODULE{ display :block; margin-left :0em; margin-right :0em; margin-top :2em; margin-bottom :2em; } MBODY{ display :block; margin-left :1em; margin-right :0em; margin-top :0.5em; margin-bottom :1em; } FOOT{ display :block; text-align :center; margin-left :2em; margin-right :2em; margin-top :3em; margin-bottom :2em; } PA{ display :block; font-size :9pt; font-weight :normal; font-family :λ°ν체,Times New Roman; color :black; } LIST{ display :block; margin-left :1.5em; margin-right :2em; margin-top :0.5em; margin-bottom :0.5em; } LCOMPO{ display :block; font-size :9pt; margin-left :0.8em; margin-right :2em; margin-top :0em; margin-bottom :0em; } SUBLIST{ display :block; margin-left :4em; margin-right :2em; margin-top :1em; margin-bottom :1em; }