xml & xsl] xsl for ktours' xml(sample) to blog...

최근에 계속하기(?) 시작한 프로젝트 중 하나
http://ktours.cyworld.com 에 있는 summery 프로젝트를
xml 로 저장해서 나중에 가공(?)해서 볼 수 있도록 하자...라는 것.

일단 xml 로 변환하는 소스는 아직 교체중이라, xml 로 만든 샘플 (아직 손봐야 할 곳이...) 을 기초로
xsl 로 변환하는 것을 만들어봤다.

...

ktoursSample_1.xml

<?xml:stylesheet type="text/xsl" href="ktoursSample_1.xsl"?>
<xml><summery>

<summeryTop>
<image Width="540" Height="138"><![CDATA[http://cyimg29.cyworld.com/common/file_down.asp?redirect=%2F290022%2F2010%2F3%2F30%2F21%2Fsummery%2Ejpg]]></image>
<document><![CDATA[<b>100328 여의도나들이 Summery...</b><br /><br />여의도...를 가보니 공사 마무리단계인 것 같아서 좋긴 했는데...<br />뭔가...<br /> <br />예전에 놀러오던 새들이 어떻게 생각할지...<br /> <br />NowMark killofki@.<br /><br />]]></document>
</summeryTop>

<item num="1">
<image aniN="0" Left="0" Top="0" Width="540" Height="51" Owidth="8114" Oheight="768"><![CDATA[http://cyimg29.cyworld.com/common/file_down.asp?redirect=%2F290013%2F2010%2F3%2F30%2F41%2F%5FS5030542%5F56%2Ejpg]]></image>
<document><![CDATA[<b>여의도 남측 조금 건너편에서...</b><br /><br /><TABLE style="BORDER-BOTTOM: #dedede 1px solid; BORDER-LEFT: #dedede 1px solid; BACKGROUND: url(http://img.cyworld.com/img/map/map_icon.gif) #fff no-repeat 7px 3px; BORDER-TOP: #dedede 1px solid; BORDER-RIGHT: #dedede 1px solid; -moz-border-radius: 10px"><TBODY><TR><TD><A style="COLOR: #666; TEXT-DECORATION: none" id=map_id href="http://map.cyworld.com/menu/view.map?map_id=854636" name=854636_1 target=_blank tp_privilege="P"><DIV style="TEXT-ALIGN: left; PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 3px; FONT: 12px 돋움; PADDING-TOP: 3px">대한민국 한강 여의도남측조금건너</DIV></A></TD></TR></TBODY></TABLE><br /> <br />지나가다가... 공사가 어느정도(?) 마무리됐음을 느끼고 진입해봤다.<br />뭐랄까... 예전에 봤던 모래사장(?)이 안보인다고 해야하나...<br /> <br />매년 새들이 쉬고가는 장소로 기억하던 곳인데...<br /> <br />NowMark killofki@.<br /> <br /><a num=1>1) 63빌딩</a><br /><a num=2>2) 원효대교</a><br /><a num=3>3) 한강철교</a><br /><br />]]></document>
<zoom HLeft="1229" HTop="9" HWidth="378" HHeight="399"/>
<zoom HLeft="1813" HTop="185" HWidth="1772" HHeight="400"/>
<zoom HLeft="4147" HTop="202" HWidth="1333" HHeight="286"/>
</item>

<item num="2">
<image aniN="0" Left="0" Top="53" Width="540" Height="44" Owidth="9259" Oheight="768"><![CDATA[http://cyimg29.cyworld.com/common/file_down.asp?redirect=%2F290024%2F2010%2F3%2F30%2F44%2F%5FS5030557%5F70%2Ejpg]]></image>
<document><![CDATA[<b>여의나루역 앞쪽에서...</b><br /><br /><TABLE style="BORDER-BOTTOM: #dedede 1px solid; BORDER-LEFT: #dedede 1px solid; BACKGROUND: url(http://img.cyworld.com/img/map/map_icon.gif) #fff no-repeat 7px 3px; BORDER-TOP: #dedede 1px solid; BORDER-RIGHT: #dedede 1px solid; -moz-border-radius: 10px"><TBODY><TR><TD><A style="COLOR: #666; TEXT-DECORATION: none" id=map_id href="http://map.cyworld.com/menu/view.map?map_id=854638" name=854638_1 target=_blank tp_privilege="P"><DIV style="TEXT-ALIGN: left; PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 3px; FONT: 12px 돋움; PADDING-TOP: 3px">대한민국 여의나루역 앞쪽</DIV></A></TD></TR></TBODY></TABLE><br /> <br />공원화가 많이 진행된 느낌이었다...<br />...엥? 예전에도 공원이었는데...<br /> <br />한강 강물쪽으로 가는 진입로가 부드럽게 이어진 느낌...<br /> <br />... 이럴때 왜 귀신영화가 생각나는거지 = =?<br /> <br />NowMark killofki@.<br /> <br /><a num=1>1) 원효대교</a><br /><a num=2>2) 여의나루역앞 계단</a><br /><a num=3>3) 마포대교</a><br /><br />]]></document>
<zoom HLeft="1560" HTop="131" HWidth="1797" HHeight="346"/>
<zoom HLeft="4603" HTop="176" HWidth="384" HHeight="236"/>
<zoom HLeft="5996" HTop="32" HWidth="2657" HHeight="621"/>
</item>

<item num="3">
<image aniN="0" Left="0" Top="99" Width="486" Height="39" Owidth="9443" Oheight="768"><![CDATA[http://cyimg29.cyworld.com/common/file_down.asp?redirect=%2F290019%2F2010%2F3%2F30%2F8%2F%5FS5030571%5F84%2Ejpg]]></image>
<document><![CDATA[<b>여의도공원 한강쪽입구앞에서...</b><br /><br /><TABLE style="BORDER-BOTTOM: #dedede 1px solid; BORDER-LEFT: #dedede 1px solid; BACKGROUND: url(http://img.cyworld.com/img/map/map_icon.gif) #fff no-repeat 7px 3px; BORDER-TOP: #dedede 1px solid; BORDER-RIGHT: #dedede 1px solid; -moz-border-radius: 10px"><TBODY><TR><TD><A style="COLOR: #666; TEXT-DECORATION: none" id=map_id href="http://map.cyworld.com/menu/view.map?map_id=854639" name=854639_1 target=_blank tp_privilege="P"><DIV style="TEXT-ALIGN: left; PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 3px; FONT: 12px 돋움; PADDING-TOP: 3px">대한민국 한강 여의도공원입구앞</DIV></A></TD></TR></TBODY></TABLE><br /> <br />오면서 보니 강변쪽에 물이 흐르...엥?<br />청계천 시작점처럼 물을 흘려보내는 느낌이었다.<br /> <br />오다보니 한강쪽은 뭔가 넓직...한게<br />물을 흘려보내도 될 것 같...아니, 물을 흘려보내려고 만든 조형물 처럼 보였다.<br /> <br />... 분수와는 다른 형태의 조형물 같기도 하고...<br /> <br />NowMark killofki@.<br /> <br /><a num=1>1) 여의도공원 입구...</a><br /><a num=2>2) 서강대교쪽...</a><br /><a num=3>3) 넓은강조형물...?</a><br /><a num=4>4) 마포대교...</a><br /><a num=5>5) 자전거대여소...</a><br /><br />]]></document>
<zoom HLeft="858" HTop="165" HWidth="319" HHeight="235"/>
<zoom HLeft="2075" HTop="98" HWidth="1962" HHeight="457"/>
<zoom HLeft="4422" HTop="232" HWidth="941" HHeight="219"/>
<zoom HLeft="4827" HTop="27" HWidth="2011" HHeight="458"/>
<zoom HLeft="7101" HTop="214" HWidth="656" HHeight="139"/>
<zoom HLeft="7846" HTop="8" HWidth="724" HHeight="361"/>
</item>

<item num="4">
<image aniN="0" Left="488" Top="99" Width="52" Height="39" Owidth="1024" Oheight="768"><![CDATA[http://cyimg29.cyworld.com/common/file_down.asp?redirect=%2F290010%2F2010%2F3%2F30%2F59%2F%5FS5030585%5F93%2Ejpg]]></image>
<document><![CDATA[<b>보라매공원 쪽문육교 앞에서...</b><br /><br /><TABLE style="BORDER-BOTTOM: #dedede 1px solid; BORDER-LEFT: #dedede 1px solid; BACKGROUND: url(http://img.cyworld.com/img/map/map_icon.gif) #fff no-repeat 7px 3px; BORDER-TOP: #dedede 1px solid; BORDER-RIGHT: #dedede 1px solid; -moz-border-radius: 10px"><TBODY><TR><TD><A style="COLOR: #666; TEXT-DECORATION: none" id=map_id href="http://map.cyworld.com/menu/view.map?map_id=854642" name=854642_1 target=_blank tp_privilege="P"><DIV style="TEXT-ALIGN: left; PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 3px; FONT: 12px 돋움; PADDING-TOP: 3px">대한민국 보라매공원 쪽문육교앞</DIV></A></TD></TR></TBODY></TABLE><br /> <br />횡단보도 앞에서 조금 여유(?)를 갖고 찍어봤다.<br /> <br />NowMark killofki@.<br /> <br /><a num=1>1) 신대방옆 앞길</a><br /><a num=2>2) 보라매공원 쪽문육교앞</a><br /><br />]]></document>
<zoom HLeft="383" HTop="336" HWidth="225" HHeight="185"/>
<zoom HLeft="689" HTop="311" HWidth="329" HHeight="229"/>
</item>

</summery></xml>

summeryTop 에 처음 표시될 summery 이미지를 등록시키고 (document 와 같이...)
나머지 item 쪽에 subImage 들을 등록시키면서
부분부분 a num=... 부분에 그외(?)의 것들(zoom 부분)을 등록시켰다.

... 지금에서 난 생각이지만, a 에 num 대신 name 으로 잡았다면 zoom 으로 확대될 부분에 대해
스크립트로 확실(?)하게 표시할 수 있을 것 같다...라는 생각은 드는데,
= =;... 글쎄... 뭐... 지금은 이상태로 계속 진행한다.

...

ktoursSample_1.xsl

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="text" version="8.0" />

<xsl:template match="/">

<![CDATA[
<html><head></head><body>
<style>body { font-size:9pt; font-family:굴림; }</style>
]]>

<xsl:apply-templates select="//summeryTop" />
<xsl:apply-templates select="//item" />

<![CDATA[
</body></html>
]]>

</xsl:template>

<xsl:template match="summeryTop">
<xsl:apply-templates select="image" />
<![CDATA[<br /><br />]]>
<xsl:apply-templates select="document" />
<![CDATA[<br /><br /><br />]]>
</xsl:template>

<xsl:template match="item">
<xsl:apply-templates select="image" /><br />
<![CDATA[<br /><br />]]>
<xsl:apply-templates select="document" /><br /><br />
<![CDATA[<br /><br /><br />]]>
</xsl:template>

<!-- image-->
<xsl:template match="image">

<![CDATA[
<img
]]>

<xsl:if test="name(..)='summeryTop'">

width=
<xsl:value-of select="@Width" />

height=
<xsl:value-of select="@Height" />

</xsl:if>

<xsl:if test="name(..)='item'">

width=640

</xsl:if>

src=
<xsl:value-of select="." />

<![CDATA[
/>
]]>

</xsl:template>

<!-- document-->
<xsl:template match="document">
<xsl:element name="div">
<xsl:value-of select="." />
</xsl:element>
</xsl:template>

</xsl:stylesheet>

...일단 저장...
...

<xsl:stylesheet ...> 부분은 브라우져나 에디터마다 표준화값이 있을 것 같아서 건너띄고...

...

<xsl:output method="text" /> 부분에서 많이 헥갈렸다.

초기에는 "html"로 표시해서 image 에 나올 부분들을

<xsl:template match="image">
<xsl:element name="img">
<xsl:attribute name="width"><xsl:value-of select="@Width" /></xsl:attribute>
<xsl:attribute name="src"><xsl:value-of select="." /></xsl:attribute>
</xsl:element>
</xsl:template>

로 안아볼까...했는데,

"text"로 표시할 땐 img 부분이 안나오고,
"html"로 표시할 땐 <document 에 있는 <![CDATA[ ... ]]> 부분들이 그냥 글자로 나왔다.

어떻게 할까...라는 생각을 하다보니 method="html" 이라는 것이 "html source"를 표시하는 것이라고 판단,
method="text" 로 표시하고, img element 대신 <![CDATA[ <img ]]> 를 쓰기로 결정했다.

음... value-of 에 딱 달라붙에 하는 방법이 있다면 더 좋겠지만,
아직 그 방법까지는 공부를 못해봐서...

그렇게 해서... 간신히(?) attribute 값까지 이용(?)하고...
(해당 값들 안쪽에 space 값이 없어서 다행...)

...

그 외에... <xsl:if 에 대한 것을 진행하다보니
<xsl:if test="" ... 이 부분이 무슨 뜻인지 몰라서 헤메다가

test="" 에 "" 안쪽 부분의 값을 계산(?)해서 표시여부를 결정한다는 것을 알았다.
( 처음에는 test 가 해당 element 인줄로만 알았다... )

= =;... reference 에도 친절하게

<xsl:if
  test = boolean expression >
</xsl:if>

라고 나와있었는데도... 쩝...

...

그것을 확인한 후,
상위 엘리먼트의 태그명을 뽑는 함수 name(..) 을 찾고, ( 현재 엘리먼트일 때에는 name(.) )

그 값이 'summeryTop' 일 때에는 Width, Height 값을 바로 쓰고,
아닐 땐 OWidth (Original Width) 대신(?) 640 을 쓰도록 했다.

( 사실, 여기서 한번 더 <xsl:if test="@OWidth > 640"> 을 써야하겠지만,
xsl:if 내에서 이렇게 계산식(?)을 표현할 수 있을지 확신이 안서서 일단 생략... )

...

Zoom 부분 역시 원본 이미지 기준에서 확대될 이미지의 부분이지만,
확대될 부분이 어느정도의 크기인지, 계산식을 어떻게 넣어야 할지 막막해서 또 생략...

...

... 결국, xml 데이타로 변환된 내용을 가공해서 만들게 된 내용은
기존에 javascript 로 Blog 용으로 전환했던 내용에 아직은 못미치는 내용이 만들어졌다.
(script 수정이 덜되서 현재로써는 공개 안함...)

*참고* http://www.cyworld.com/killofki_ kTours & kCOEX 관련글...

...

음... 뭐랄까...

Zoom 에 대해 서술하기 이전에,
기존에 만들어놓은 Blog 를 따라가야 하는데,

apply-templates 를 두번(?) 해서 map 코드를 만들자니
... xsl 에 있는 ":" 옵션(?)처럼 따로 클래스(?)를 적용해야 하는데...

= =;... 찾을 수 있을까... (xsl:copy-of 를 써야하려나...?)

...

NowMark killofki@.