XML Style의 지정, 브라우저의 사용, 디스플래이 방식 ,XML과 CSS의 작성 방식의 이용방법
1. XML+CSS ¶
- XML문서는 CSS를 이용해서 브라우저에 표현하는 것이 가능하다.
- 그러나 CSS로 스타일 시트를 작성할때는 한계가 있다.
- CSS는 폰트,색깔,여백등과 같은 외형적인 스트일을 기술하는 언어이다.
- XML문서가 단순히 텍스트 형태의 문서이면 CSS로만으로도 표현하는것이 충분하다.
- 하지만 XML문서는 반드시 텍스트 타입의 내용들로만 이루어진 것도 아니다
- 그리고 스키마의 사용이 보편화 되면서 여러 타입의 데이터들을 포함할 수 있는 문서 포맷이 되어 좀더 다양한 디스플레이 방식이 필요하다.
- 이런 CSS의 한계를 극복해서 좀더 유연하고 다양하게 디스플레이 방식을 기술할 수 있는 방법이 XSL이다.
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;
}
