Using CSS in XML document


Home > Document > XML > Using CSS in XML document

xml 문서에서 CSS 사용 하기

이 번 페이지에는 xml 문서에서 CSS를 사용하는 방법에 대해 알아 보고 IE와 FF에서 xml 문서에 CSS를 사용했을 때 나타나는 차이점과, CSS를 이용하여 요즘 흔히 볼 수 있는 rss feed를 보다 보기 좋게 꾸미는 방법도 보너스로 알아 보도록 하겠습니다...^^ xml 문서는 HTML문서와는 달리 미리 정해진 box model이 없습니다. 미리 정해진 box model이라는 것은, 예를 들어 HTML의 p element의 경우 IE나 FF 같은 브라우저를 만들 때

p {display:block; margin:1.33em 0; unicode-bidi: embed }

와 같은 W3C의 지침이 있는데, xml 문서는 element나 attribute 에 대한 box model이라는게 있을 수 없으므로 CSS를 통해 element의 box model을 지정해 주어야 되는데, 이런 점들이 오히려 CSS property의 순수한 형태를 잘 볼 수 있는 좋은 기회가 될 것 입니다. xml 문서에서 CSS 를 사용하는 방법은 매우 간단합니다. 바로 CSS selector 중에 하나인 type selector를 사용하는 것 입니다. 알고 있는 것 처럼 type selector란 문서에 사용된 element들의 이름을 selector로 사용하는 방법 입니다. 예를 들어 HTML의 경우 문서에 사용된 모든 p element의 수평 정렬을 오른쪽으로 하고 싶다면 아래와 같이

type selector를 사용
<style type="text/css">
<!-- 
p {text-align:right} 
-->
</style>

로 지정하면 될 것 입니다. xml 문서의 경우도 똑 같은 방법을 사용하게 되는데, HTML 문서와의 차이점이 있다면 inline style 방식을 사용할 수 없다는 것 입니다. 따라서 xml 문서에 CSS를 연결하는 방법은 문서 내부에 CSS block을 사용하는 embed 방식과 .css 파일을 만들어 외부 문서로 link 시키는 방식을 사용하게 되는데, 우선 linked style sheet 방식에 대해 먼저 알아 보겠습니다. Linked style sheet 방식을 사용할 경우 아래와 같이 XML 선언 구문 바로 다음줄에 외부에 link된 .css file을 연결 시키는 PI(Processing Instruction)를 사용하면 되겠습니다.

.css 파일을 외부로 분리해서 link 시키는 방식
<?xml version="1.0" encoding="euc-kr"?>
<?xml-stylesheet type="text/css" href="경로/파일이름.css"?>

그런데 책이나 인터넷상에서 가끔 위의 PI 에 사용되는 'xml-stylesheet' 대신에 'xml:stylesheet' 를 사용하는 경우를 보게 되는데, 'xml:stylesheet'를 사용해도 실행은 되지만 namespace 구분 기호로 사용되는 ':' (colon)을 사용하는 것은 극히 좋지 못한 방법입니다. 가능하면(사실은 '절대'라고 말 하고 싶지만) 사용하지 말아야 되겠습니다. 그러면 linked stylesheet방식과 embedded stylesheet방식에 대해 알아 보겠습니다.

이후로 나오는 예제 code들은 모두 저장하고 실행 시켜야 결과를 볼 수 있습니다.

Linked stylesheet

XML preview에 나온 css_sample.xmlcss_sample.css을 예로 들면 먼저 xml file에 아래의 code와 같이 PI를 사용하여 .css file을 연결해 줍니다.

css_sample.xml
Copy code
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="css_sample.css"?>
<Starcraft>
  <Gamer NickName="BoXeR">
    <Name>Lim Yan</Name>
    <Brood>Terran</Brood>
  </Gamer>
  <Gamer NickName="Mellow">
    <Name>Hong Jino</Name>
    <Brood>zerg</Brood>
  </Gamer>
  <Gamer NickName="Queendom">
    <Name>Park Devil</Name>
    <Brood>Protoss</Brood>
  </Gamer>
</Starcraft>
css_sample.css
Copy code
Name{
display:block;
font:bold 12px verdana;
color:navy;
}

Brood{
display:block;
font:11px verdana;
background-color:#669900;
margin:5px 0 10px;
padding:5px;
color:beige;
}

위와 같이 PI를 사용해서 외부로 분리시킨 .css file을 연결하여 사용할 수 있습니다. 위의 css_sample.css file에서 눈여겨 볼 점은 Name 과 Brood element의 display property 값을 'block'으로 지정한 것 입니다. display property 값을 'block'으로 지정하면 지정된 element의 앞 뒤로 줄바꿈이 생기는 div와 같은 block level element가 되는 것 입니다.

Embedded stylesheet

Embedded stylesheet 방식은 HTML에서와 같이 style block을 사용하여 CSS 를 문서 내부에 탑재 시켜 사용하는 방식이 되겠습니다. 이후로 몇 개의 예제를 보여 줄텐데, linked stylesheet 방식이 문서를 분리해야되는 번거로움이 있으므로 모두 embedded stylesheet방식을 사용하겠습니다. Embedded stylesheet 의 사용방식은 아래와 같이

Style block을 사용하여 내부에 탑재시키는 embedded style 방식
<?xml version="1.0" encoding="euc-kr"?>
<?xml-stylesheet type="text/css" href="#IdName"?>
<RootElement>
  <StyleBlockName id="IdName">
  <!-- style content -->
  </StyleBlockName>
  <!-- xml data -->
</RootElement>

PI 속에는 내부에 사용되는 style block(아래 code에서는 CSS element이고 다른 어떤 이름도 사용 가능)에 지정한 id의 이름을 '#' 기호 뒤에 적어주므로해서 지정됩니다. 또한 id로 사용되는 이름은 xml naming 규칙을 반드시 지켜야 하며 PI와 style block에서 사용하는 id name은 대소문자까지 서로 일치해야 합니다. 예를 들어 위의 linked stylesheet 방식에 사용된 code를 embedded stylesheet 방식을 적용시키면 아래와 같습니다.

Embedded stylesheet
Copy code
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="#css_sample"?>
<Starcraft>
  <!-- start of style block -->
  <CSS id="css_sample">
  <!--   
  Name{
  display:block;
  font:bold 12px verdana;
  color:navy;
  }
  
  Brood{
  display:block;
  font:11px verdana;
  background-color:#669900;
  margin:5px 0 10px;
  padding:5px;
  color:beige;
  }
  -->
  </CSS>
  <!-- end of style block -->
  <Gamer NickName="BoXeR">
    <Name>Lim Yan</Name>
    <Brood>Terran</Brood>
  </Gamer>
  <Gamer NickName="Mellow">
    <Name>Hong Jino</Name>
    <Brood>zerg</Brood>
  </Gamer>
  <Gamer NickName="Queendom">
    <Name>Park Devil</Name>
    <Brood>Protoss</Brood>
  </Gamer>
</Starcraft>

xml 문서를 List 형식으로 표현하기

CSS의 display property를 사용해서 xml data를 list item(LI) 으로 표현할 수도 있습니다. 바로 display:list-item을 사용하는 것 인데, bullet 형태를 기본값인 'disc'가 아닌 'square'로 바꾸고 싶다면 list-style-type property를 사용하여 지정할 수도 있습니다.

xml 문서를 list item으로 표현
Copy code
<?xml version="1.0" encoding="euc-kr"?>
<?xml-stylesheet type="text/css" href="#internal_stylesheet"?>
<Doc>
  <MyStyle type="text/css" id="internal_stylesheet">
  <!--
  Doc{margin:0;display:block;}
  OrderedList{display:block;font:12px verdana;background:beige}
  ListItem{margin-left:20px;display:list-item;list-style-type:square;background:silver;}
  ListItem:hover{color:blue;}
  -->
  </MyStyle>
  <OrderedList>
    <ListItem>List Item 1</ListItem>
    <ListItem>List Item 2</ListItem>
    <ListItem>List Item 3</ListItem>
    <ListItem>List Item 4</ListItem>
    <ListItem>List Item 5</ListItem>
  </OrderedList>
</Doc>

xml 문서를 layout으로 표현하기

CSS를 사용해서 문서의 layout을 지정할 수도 있습니다. float:left 등의 CSS property를 사용하여 아래와 같이 문서의 layout을 만들어 줄 수도 있을 것 입니다.

xml문서를 layout으로 표현
Copy code
<?xml version="1.0" encoding="euc-kr"?>
<?xml-stylesheet type="text/css" href="#internal_CSS"?>
<Layout>
  <MyCSS type="text/css" id="internal_CSS">
  <!-- 
  Header, LeftMenu, Content, Footer{font:11px verdana;}
  Doc{display:block;margin:0;}
  Header {display:block;width:750px;height:100px; background:#dedede}
  LeftMenu{display:block;width:200px;float:left;background:silver;height:300px;}
  Content{display:block;width:550px;float:left;background:#efefef;height:300px;}
  Footer{display:block;clear:left;background:#ccc;width:750px;height:70px;}
  -->
  </MyCSS>
  <Header>TopBox</Header>
  <LeftMenu>LeftMenu</LeftMenu>
  <Content>Content</Content>
  <Footer>Footer</Footer>
</Layout>

Internet Explorer와 FireFox 에서의 xml attribute 처리의 차이점

IE와 FF에서 class selector를 사용하여 attribute를 처리하는 방법에 대해 알아 보겠습니다. 우선 FF의 경우는 attribute selector를 지원해 주기 때문에 attribute를 이용하여 CSS property를 지정하는 것이 매우 쉽습니다. 아래의 code를 보면

Attribute selector를 사용하여 CSS property를 지정(FF Only)
Copy code
<?xml version="1.0" encoding="euc-kr"?>
<?xml-stylesheet type="text/css" href="#internal_stylesheet"?>
<Doc>
  <MyStyle type="text/css" id="internal_stylesheet">
  <!--
  Doc{margin:0;display:block;}
  OrderedList{display:block;font:12px verdana;background:beige}
  ListItem{margin-left:20px;display:list-item;list-style-type:square;background:silver;}
  ListItem[color]{color:red;}
  -->
  </MyStyle>
  <OrderedList>
    <ListItem color="red">List Item 1</ListItem>
    <ListItem>List Item 2</ListItem>
    <ListItem>List Item 3</ListItem>
    <ListItem>List Item 4</ListItem>
    <ListItem>List Item 5</ListItem>
  </OrderedList>
</Doc>

color="red" 로 color attribute를 지정한 ListItem element을 attribute selector를 사용하여 ListItem[color]{color:red;} 로 지정하므로서 첫 번째 ListItem element의 글자색을 'red'로 지정할 수 있습니다.

하지만 attribute selector를 지원하지 않는 IE 에서는 사용할 수 없는 방법 입니다. 그래서 그런건지, IE에서는 xml 문서에서도 class라는 속성을 사용하도록 하고 있습니다. 예를 들어 위의 code가 IE에서도 같은 효과를 내게 하려면 아래의 code에서 처럼 ListItem element에 'class' 라는 HTML에서나 사용하는 attribute를 사용하면 됩니다. 하지만 모든 element와 attribute의 기능이 아무 것도 정해지지 않은 xml 문서에서 class라는 HTML attribute를 사용한다는 자체가 매우 우스꽝스러운 모습이어서 황당한 쓴 웃음을 지을 수 밖에 없군요...^^; IE에서 제공하는 CSS는 아무래도 전생에 protoss의 dragoon이었나 봅니다.

IE를 위해 class selector를 추가하여 FF에서와 동일한 효과를 내는 척 하다.
Copy code
<?xml version="1.0" encoding="euc-kr"?>
<?xml-stylesheet type="text/css" href="#internal_stylesheet"?>
<Doc>
  <MyStyle type="text/css" id="internal_stylesheet">
  <!--
  Doc{margin:0;display:block;}
  OrderedList{display:block;font:12px verdana;
  background:url(http://cadvance.org/images/hulk.gif)}
  ListItem{margin-left:20px;display:list-item;list-style-type:square;
  margin:1.5em;background:silver;}
  ListItem[class]{color:red;}
  .color{color:red;}
  -->
  </MyStyle>
  <OrderedList>
    <ListItem class="color">List Item 1</ListItem>
    <ListItem>List Item 2</ListItem>
    <ListItem>List Item 3</ListItem>
    <ListItem>List Item 4</ListItem>
    <ListItem>List Item 5</ListItem>
  </OrderedList>
</Doc>

이렇게 위와 같이 .color{color:red;}를 추가해 주므로해서 IE에서도 같은 효과를 낼 수 있는데 이는 분명히 잘 못된 것으로써, attribute selector를 지원하지 못하는 IE 입장에서 보면 궁여지책으로 내 놓은 대안이 아닌가 합니다. IE 가 CSS를 제대로 지원하지 못해서 생기는 부작용이 xml 문서에까지도 미치고 있는 셈입니다.

CSS를 이용하여 rss 문서를 보기 쉽게 꾸미기

요즘들어 웹 서핑을 하다보면 흔히 만나게 되는게 rss feed입니다. 이 사이트의 경우도 rss 문서가 있지만 몇 가지 이유로 아직 정식으로 제공하지는 않고 첫 번째 화면의 'XMWELL page의 최근글' 부분에 XMWELL page의 내용을 보여 주는 정도에 그치고 있습니다. 그런데 이 rss를 제공하는 사이트들의 경우 극히 소수의 사이트를 제외하고는 rss 의 xml code를 그대로 보여주고 있습니다. 그러니까 '여기 저기서 rss를 쓰니까 나도 쓴다' 라는 식으로 형식만 흉내낸 사이트들도 많은 것 같은데 그나마 그 형식이라는 것도 잘 못된 rss 문법을 복사해서 쓰기 때문에 validation이 안되는 사이트가 거의 대 부분인 것 같습니다. 혹시 자신이 제공하는 rss feed가 rss 문법을 지키는지 알아 보고 싶다면 http://validator.w3.org/feed/을 통해 검사해 볼 수도 있습니다. 그럼 rss feed에 CSS를 적용시켜 보도록 하겠습니다.

이 사이트의 rss를 예로 들면, 다른 사이트의 경우도 아래와 비슷한 형식의 rss를 사용하리라 생각하는데 사실 아래와 같은 code를 그냥 보여 준다는 것은 rss 수집기로 보지 않고 직접 code를 보는 사람에게 실례되는 일 입니다. 아래와 같은 code를 그냥 보여 줘서 어쩌겠다는 건지...^^ 역시 나도 rss 쓴다아~ 라는 표시 정도?

rss.xml
Copy code
<?xml version="1.0" encoding="euc-kr"?>
<?xml-stylesheet type="text/css" href="rss_feed.css"?>
<rss version="2.0">
  <channel>
    <title>Cadvance.org</title>
    <link>http://www.cadvance.org/</link>
    <description>Recently Updated News Topics</description>
    <webMaster>webmaster@cadvance.org</webMaster>
    <item>
      <title>Welcome to XMWELL Home Page</title>
      <link>http://www.cadvance.org/xmwell/</link>
      <guid>http://www.cadvance.org/xmwell/</guid>
      <description>
        XMWELL page를 만든 계기와 목적>, XMWELL page에 사용된 XML 기술의 범위
      </description>
    </item>
    <item>
      <title>XML의 과거와 현재 그리고 미래</title>
      <link>http://www.cadvance.org/xmwell/articles/about_xml.xml</link>
      <guid>http://www.cadvance.org/xmwell/articles/about_xml.xml</guid>
      <description>
      향후 web의 근본을 바꾸게 될 XML의 과거와 현재, 미래에 대한 조명
    </description>
    </item>
    <item>
      <title>바둑과 스타크래프트</title>
      <link>http://www.cadvance.org/xmwell/articles/baduk_starcraft.xml</link>
      <guid>http://www.cadvance.org/xmwell/articles/baduk_starcraft.xml</guid>
      <description>
        바둑과 스타크래프트를 비교해 보므로써 XML에 대한 이해를 높인다.
      </description>
    </item>
  </channel>
</rss>

위의 rss feed의 xml 문서를 아래의 rss_feed.css 와 연결 시킵니다.

rss_feed.css
Copy code
channel, title, description, link, item, pubDate, lastBuildDate, webMaster
{display:block; font-family:verdana;font-size:12px;}
guid{display:none;}
item {border:1px outset;margin:1.5em 0;padding:5px;line-height:1.5em;}
title {font-weight:bold; font-size:14px}
description {color:brown;}
link {text-decoration:underline;}

이와 같이 두 문서를 연결시키므로 해서 rss 수집기를 사용하지 않고 직접 rss code를 보는 사람에게 보다 쉽게 내용을 볼 수 있도록 하면 좋을 것 입니다. Test page를 확인해 보시기 바랍니다.

xml 문서에서 CSS 사용의 한계

지금까지 살펴 본 'xml 문서에서의 CSS 사용법'을 통해, IE와 FF가 xml 문서에서도 CSS를 지원하므로 해서 CSS를 이용하여 xml 문서를 좀 더 보기 쉽게 만들 수 있다는 것을 알게 되었습니다. 하지만 위에서 본 정도까지가 CSS의 한계라고 할 수 있습니다. Image 같은 경우는 앞에서와 같이 background:url(경로/파일이름) 을 사용하여 표시가 가능하지만 문서에 link를 걸 수 있는 방법 없다는 것이 CSS의 결정적인 단점이라고 할 수 있는 것 입니다.

이런 결점들을 해결하기 위한 대안이 바로 XSLT 같은 program인데, 이제 드디어 이 사이트에서 XSLT를 다룰 시기가 임박한 것 같습니다. 그럼 얼마 후에 XSLT에서 다시 만나기로 하고 이 페이지는 여기서 마치겠습니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색