서론

html 목록을 표시하기 위해서 ul,ol 등의 태그들을 많이들 쓴다. 특히 요즈음 들어 css와 이런 태그를 같이 사용하는게 대세를 이루면서 더욱 많이 쓰게되었다. 그러나 이런 태그의 정확한 의미를 모르고 사용을 했었다. 그래서 한번 정리해 두려고 한다.

 

본론

1.태그이름

ul (Unordered List) : 순서 없는 목록

ol (Ordered List) : 순서 있는 목록

li (List Item) : 목록 아이템

dl (Definition List) : 용어 정의 목록

dt (Definition Terms) : 용어

dd (Definition Description) : 용어의 설명

 

2. ul (순서 없는 목록) 예시

- 소스

<ul type=”disc”>
    <li type=”square”>item1</li>
    <li type=”circle”>item2</li>
    <li type=”disc”>item3</li>
    <li>item4</li>
</ul>

- 결과

  • item1
  • item2
  • item3
  • item4

 

3. ol (순서 있는 목록) 예시

- 소스

<ol>

    <li type="a">item1</li>
    <li type="A">item2</li>
    <li type="i">item3</li>

    <li>item4</li>
</ol>

- 결과

  1. item1
  2. item2
  3. item3
  4. item4

 

4. dl (용어 정의 목록) 예시

- 소스

<dl>
    <dt>def1_title</dt>
    <dd>def1_description</dd>
    <dt>def2_title</dt>
    <dd>def2_description</dd>
</dl>

- 결과

def1_title
def1_description
def2_title
def2_description

 

결론

사실 몇년 전만해도 이런 태그들은 그리 주목받지 못했다. 그러나 시맨틱웹 같은 개념이 등장하면서 이러한 태그들은 다시 주목받기 시작했다.  그 이유는 이런 태그들과 css에 의해서 html 에서 데이터와 디자인을 어느정도 분리 할 수 있게 되었기 때문이다. 그러나 아직 완전한 분리는 아니다. 내가 생각하기에 완전한 분리를 위해서는 xml 과 xslt 기술을 이용하여 웹사이트를 제작하여야 가능 할 것이라고 본다.

by cranix 2009. 8. 13. 01:44

div 로 레이아웃을 구성할때 왼쪽에 메뉴를 넣고 오른쪽에 본문을 넣는 경우가 많다.

그런데 만약 오른쪽에 표시되는 본문 div 의크기를 가변적으로 하고싶다면 어떻게 해야할까?

이것을 해결하기위해 여러가지 테스트를 해 보았다.

 

먼저 기본적으로 본문의 너비를 400px 로 한 레이아웃은 아래와 같다.

picc1

 

가장 먼저 생각한것은 main 의 너비를 100% 로 하는것인데 이렇게 하면 아래와같이 된다.

picc2

이건 아니다.

 

다음으로는 left 의 position 을 absolute 로 설정하고 main 의 margin-left 를 left 의 크기만큼 주는것이다.

image

이것역시 위처럼 left 의 크기만큼 오른쪽으로 삐져나가는 현상이 발생했다.

 

결국 아직 답을찾지 못했다.

어떤 방법이 있을까?

' > Web' 카테고리의 다른 글

HTML 목록태그 ul,ol,li,dl,dt,dd  (32) 2009.08.13
IE 에서 focus 의 미묘함..  (27) 2008.02.19
IE vs FF(firefox)  (40) 2008.02.12
홈페이지 작성시 사용되는 스타일시트  (46) 2008.02.04
부분적으로 XSL 적용하기.  (22) 2007.08.22
by cranix 2009. 8. 5. 16:58

크로스 브라우저 웹기반 위지윅 에디터를 만들려고 몇일간 삽질중이었다.

그러던중 IE 에서 자꾸 focus 가 달아나 버리는 이상한 현상이 발생했다.

색상선택기를 열심히 만들어서 클릭을 하면 에디터의 포커스가 없어져 버려서 색상이 바뀌지 않게 되는것이었다.

그런데 이상한건 다른 버튼들과 다른점이 없는데 그 버튼들은 되고 색상선택기만 안된다는것.!

연구에 연구를 거듭한 결과...(아니 삽질에 삽질..;;)

황당한 결과를 얻었다.

색상선택기는 테이블에다가 onclick 이벤트를 걸어서 구현한거고 나머지 버튼들은 이미지에다가 onclick 이벤트를 걸어서 작성했다.

결국 table 태그에 onclick 이벤트를 걸어서 클릭한건 포커스가 없어지고 image 태그에 onclick 이벤트를 걸어서 클릭한건 포커스가 그대로 남아있는것이었다.

이런 황당한 시츄에이션으로 색상선택기의 테이블에 걸려있는 onclick 이벤트를 싹빼주고 대신 투명 이미지를 덮어서 거기에 onclick 이벤트를 걸어줬더니 이상없이 잘 돌아간다.

버그.. 겠지?

by cranix 2008. 2. 19. 17:50

IE 와 FF(firefox) 의 차이점

1. hand 는 웹표준이 아니여서 익스에서만 된다. 다음부턴 pointer 를 쓰자.

cursor:hand(x) --> cursor:pointer(0)



2. FF에서의 javascript 는 function 밖에서 변수 초기화가 되지 않는다.
예를들어 아래 소스를 보자.

[code]var timeInterval = 5000;

function startInterval() {
    setTimeout("test()",timeInterval);
}
function test() {
    alert("hello!");
}
startInterval();[/code]

IE 에선 5초있다가 test() 를 실행하게되지만 FF 에선 바로 test() 가 실행된다.
이유는 timeInterval 이 초기화 되지 않기 때문이다.
유의하자.


3. FF 에선 selectSingleNode 와 같은 XPATH 탐색 함수가 지원되지 않는다.
예를들어 IE 의 아래와같은 구문은

[code]var obj = xmlObj.selectSingleNode("root/subnode");[/code]

FF에선안되고 아래와 같이 바꿔야 IE,FF 모두 쓸수있다.

[code]var obj = xmlObj.getElementsByTagName("root")[0].getElementsByTagName("subnode")[0];[/code]

XPATH 가 웹표준이 아니었나? 상당히 편했는데 하루빨리 지원됬으면 좋겠다.


4. IE 에서 노드 탐색시 .text 로 텍스트를 불러올수있는데 FF 에선 불가능하다.
아래 소스는 IE 에서는 가능하나 FF 에선 불가능하다.

[code]var text = xmlObj.getElementsByTagName("root")[0].text[/code]

모두 가능하게 하려면 아래 소스를 쓰자

[code]var text = xmlObj.getElementsByTagName("root")[0].firstChild.nodeValue;[/code]



5. 위지윅 에디터 모드 변경법
IE 에서는 어떤 오브젝트든 contentEditable="true" 라는 플랙만 주면 에디터 모드가 된다. 예를들면 아래와 같다

[code]<div id="editor" contentEditable="true"></div>[/code]

FF 에서는 아래와같이 javascript 로 designMode 를 On 시켜줘야 한다.

[code]editor.contentDocument.designMode="On";[/code]

FF 에서는 document 객체에서 designMode 를 켜줘야 하기때문에 iframe 으로 써야한다.

by cranix 2008. 2. 12. 13:43

[font-style]

1. 'font-style: normal;'
2. 'font-style: italic;'
3. 'font-style: oblique;'

[font-weight]

1. "font-weight: normal;"
2. "font-weight: bold;"
3. "font-weight: bolder;"
4. "font-weight: lighter;"
5. "font-weight: 100"
6. "font-weight: 200"

[font-size]

1. "font-size: 12pt;"
2. "font-size: 16px;"
3. "font-size: 0.86cm;"
4. "font-size: 8.6mm;"
5. "font-size: 0.34in;"
6. "font-size: 200%;"

[font-variant]

1. "font-variant: normal;" : Cascading Style Sheets
2. "font-variant: small-caps;" : Cascading Style Sheets

[text-align]

1. "text-align: left;"
2. "text-align: justify;"

[text-indent]

1. "text-indent: 5px;"
2. "text-indent: 3em;"
3 "text-indent: 5cm;"

[text-decoration]

1. "text-decoration: none;"
2. "text-decoration: underline;"
3. "text-decoration: overline;"
4. "text-decoration: line-through;"
5. "text-decoration: line-through overline underline;"
6. "text-decoration: blink;"

[text-transform]

1. "text-transform: none;"
2. "text-transform: uppercase;"
3. "text-transform: lowercase;"
4. "text-transform: capitalize;"

[letter-spacing]

1. "letter-spacing: 1em;"

[word-spacing]

1. "word-spacing: 1em;"

[color]

1. "color: navy;"
2. "color: #369369;"
3. "color: rgb(80%,80%,80%);"
4. "color: rgb(111,111,999);"

[background-color]

1. "background-color: gray;"
2. "background-color: #EEEEEE;"
3. "background-color: rgb(80%,80%,80%);"

[background-image]

1. "background-image: url(list1.gif)"

[background-repeat]

1 "background-repeat: repeat;"
2. "background-repeat: repeat-x;"
3. "background-repeat: repeat-y;"
4. "background-repeat: no-repeat;"

[background-position]

1. "background-position: 10% 10%;"
2. "background-position: 1cm 1cm;"
3. "background-position: top;"
4. "background-position: center;"
5. "background-position: right bottom;"

[background-attachment]

1. "background-attachment: scroll;"
2. "background-attachment: fixed;"

[background]

1. "background: url(list1.gif) yellow no-repeat top left"

[padding]

1. "padding: 0 0 0 0; background-color: #EEEEEE;"
2. "padding: 50px; background-color: rgb(80%,80%,80%);"

[margin]

1. "margin: 0; background-color: #EEEEEE;"
2. "margin: 50px 50px 50px 50px; background-color: rgb(80%,80%,80%);"
3. "margin: 0 0 0 -30px; background-color: rgb(80%,80%,80%);"

[border-style]

1. "border-style: none;"
2. "border-style: solid;"
3. "border-style: dotted;"
4. "border-style: dashed;"
5. "border-style: double;"
6. "border-style: groove;"
7. "border-style: ridge;"
8. "border-style: inset;"
9. "border-style: outset;"
10. "border-style: solid dashed dotted outset;"



[border-width]

1. "border-width: 1px 1px 1px 1px;"
2. "border-width: 0 0 0 0; border-style: solid;"
3. "border-width: 1px 1px 1px 1px; border-style: solid;"
4. "border-width: 3px; border-style: solid;"
5. "border-width: 3mm; border-style: solid;"
6. "border-width: 1px 1cm 1mm 1in; border-style: solid;"
7. "border-width: thin; border-style: solid;"
8. "border-width: medium; border-style: solid;"
9. "border-width: thick; border-style: solid;"

[border]

1. "border: 1px;"
2. "border: #999999;"
3. "border: solid;"
4. "border: solid #999999;"
5. "border: 1px solid #999999"

[float]

1. "float: left;"

[visibility]

1. "visibility: visible;"
2. "visibility: hidden;"
3. "visibility: collapse;"

[list-style-type]

1 "list-style-type: default;"
2. "list-style-type: disc;"
3. "list-style-type: circle;"
4. "list-style-type: square;"
5. "list-style-type: decimal;"
6. "list-style-type: decimal-leading-zero;"
7. "list-style-type: lower-roman;"
8. "list-style-type: upper-roman;"
9. "list-style-type: lower-greek;"
10."list-style-type: lower-alpha;"
11."list-style-type: upper-latin;"
12."list-style-type: none;"

[list-style-image]

1. "list-style-image: url(list1.gif)"
2. "list-style-image: url(list2.gif)"

[list-style-position]

1. "list-style-position: inside"
2. "list-style-position: outside"

[list-style]

1 "list-style: url(list1.gif) inside;"
2. "list-style: square outside;"
3. "list-style: url(list1.gif);"
4. "list-style: square;"
5. "list-style: inside;"

[cursor]

1. cursor: auto;
2. cursor: crosshair;
3. cursor: default;
4. cursor: pointer;
5. cursor: move;
6. cursor: e-resize;
7. cursor: ne-resize;
8. cursor: nw-resize;
9. cursor: n-resize;
10. cursor: se-resize;
11. cursor: sw-resize;
12. cursor: s-resize;
13. cursor: w-resize;
14. cursor: text;
15. cursor: wait;
16. cursor: help;
17. cursor: url(list1.gif);


' > Web' 카테고리의 다른 글

IE 에서 focus 의 미묘함..  (27) 2008.02.19
IE vs FF(firefox)  (40) 2008.02.12
부분적으로 XSL 적용하기.  (22) 2007.08.22
XSL 엘리먼트 정리  (22) 2007.08.22
텍스트 로 자바스크립트 실행하는 방법  (44) 2007.08.01
by cranix 2008. 2. 4. 01:30

HTML 페이지에 부분적으로 XML/XSL 을 적용할수 있게 하는 javascript

[code]    var xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async=false;
    xml.load("a.xml");

    var xsl = new ActiveXObject("Microsoft.XMLDOM");
    xsl.async=false;
    xsl.load("a.xsl");

    document.write(xml.transformNode(xsl));[/code]

' > Web' 카테고리의 다른 글

IE vs FF(firefox)  (40) 2008.02.12
홈페이지 작성시 사용되는 스타일시트  (46) 2008.02.04
XSL 엘리먼트 정리  (22) 2007.08.22
텍스트 로 자바스크립트 실행하는 방법  (44) 2007.08.01
xsl 에서 태그 속성 바꾸기.  (23) 2007.07.16
by cranix 2007. 8. 22. 05:14

CSS 에서는 엘리먼트의 데이터만 출력 가능하다.

CSS 에서는 한글을 지원하지 않기 때문에 엘리먼트 명을 한글로 하지 않도록 한다.

 

스타일 시트(CSS) 문제점과 XSL

1.       CSS 출력내용을 XML문서 구조 그대로 출력한다.

2.       CSS XML 문서에 없는 내용이나 계산된 결과 출력 불가능

3.       CSS XML 문서의 모든 내용 출력 불가능

 

XSL (Extensible Stylesheet Language)

1.       XSLT (XSL Transformation)

A.       XML 문서의 구조를 다른 구조로 변환시키는 마크업 언어
ex) XML -> HTML, XML -> WML, XML -> XML

2.       XPath (XML Path Language)

A.       XML 문서 내에서 특정 파트(element, attribute) 찾아가기 위해 사용되는 경로 표기 언어

B.       XSLT XPointer 사용하기 위해 설계

3.       XSL-FO (XSL Formatting Objects)

A.       Formatter 통해서 XML 문서를 XML 문서로 변환

B.       변환될 XML 문서는 XSL-FO 마크업 언어로 작성되어야 한다.

 

 

XSL 처리과정

1.       Transformation : XML 문서에서 다른 구조의 XML 문서로 구조를 변환하는 과정

2.       Formatting : XML 문서를 XML 문서로 변환하는 과정

 

Transformation

-          특정 마크업 언어로 작성된 XML 문서를 다른 마크업 언어로 작성된 XML 문서로 바꾸는 것을 말한다.

-          XSL 변환기의 결과물은 파일형태의 문서가 아니라, 메모리 상에서 트리를 이루는 DOM 객체들로 생성된다. (Result tree)

-          처리과정을 담당하는 XSL Transformer XSL Processor 프로그램에 포함

 

Formatting

-          XML 권고안 문법을 따라 작성된 텍스트 형식의 파일이 아닌 특정 포맷 형식으로 작성된 문서로 XML 문서를 변환

-          XML 문서는 XSL-FO 언어로 작성해야 한다.

-          처리과정을 담당하는 XSL Formatter XSL Processor 프로그램에 포함

-          만약 XML 문서가 XSL-FO 언어로 작성되어 있지 않다면, XSL 변환기를 거쳐서 XSL-FO 문서구조로 변경하고 Formatting 과정을 처리

 

XSL Processor

-          XSL 변환기와 Formatter 기능이 함께 있는 프로그램을 뜻한다.

-          하지만 현재 나와있는 XSL Processor XSL 변환 기능만 구현 (XSL-FO 권고안이 XSL 변환기에서 사용하는 XSLT 보다 늦게 권고안으로 채택)

 

XSL 문서의 루트 엘리먼트

1.       루트 엘리먼트

A.       stylesheet (주로 사용)

-          transform 사용할 수도 있다. (차이는 없음)

B.       접두사는 관례상 xsl 사용

C.       xmlns:xsl=http://www.w3.org/1999/XSL/Transform

D.       <?xml version="1.0" encoding="euc-kr" ?>
<xsl:stylesheet version="1.0"
    xmlns:xsl
="http://www.w3.org/1999/XSL/Transform">

   
자식 엘리먼트 (최상위 엘리먼트)
</xsl:stylesheet>

 

2.       루트 엘리먼트의 자식 엘리먼트

A.       최상위 엘리먼트라고도 한다.

B.       XSL 문서의 결합과 관련된 최상위 엘리먼트

-          Import

-          Include

C.       Result Tree 문서 종류를 결정하는 최상위 엘리먼트

-          Output

D.       Result Tree 엘리먼트 내용을 담고 있는 최상위 엘리먼트

-          *template

E.       기타 최상위 엘리먼트

-          strip-space

-          preserver-space

-          key

-          decimal-format

-          variable

-          param

-          attribute-set

 

 

1.        output 엘리먼트

-          Result Tree 문서 종류를 지정

-          종류 뿐만 아니라 XML  선언 기타 설정도 가능

-          <xsl:output 속성명="" 속성명="…/>

-          method : 문서 종류를 지정 (xml, html, text…) 생략되었을 경우 루트 엘리먼트가 html 이면 html 기본값, 루트엘리먼트가 html 아니면 xml 기본값이다.

-          version : XML 문서일 경우 version 표기

-          encoding : 인코딩 방식 지정

-          standalone : 외부 문서 참조 (yes, no)

-          indent : 화이트 스페이스 포함여부 (yes, no)

-          doctype-public : public 식별자 지정

-          doctype-system : system 식별자 지정

-          *method 생략될 경우 Result Tree 루트 엘리먼트가 네임스페이스 접두사가 없는 html 경우 method="html" 이고 외에는 전부 method="xml" 기본값이다.

2.        Template Rule

-          어떤 구조를 다른 구조로 바꾸는 방법

-          XML 문서에서는 원본 XML 문서의 특정 노드(엘리먼트) 다른 구조의 노드(엘리먼트) 바꾸는 실제 내용이 기술된다.

-          여러 개의 Template Rule 원본 XML 노드 구조를 새로운 노드 구조로 바꾸는 처리를 한다.

-          Template 엘리먼트 단위로 변환을 적용하며 변환 대상은 노드와 노드셋이다.

-          노드 노드셋

-          트리 구조에서 사용되는 용어 (매듭부분)

-          XML 문서 구조가 트리구조라 XML 문서의 구성요소를 노드라 표현

-          루트노드 (Root Node) : XML 문서 자체를 뜻하는 노드

-          엘리먼트 노드 (Element Node) : 루트 엘리먼트를 포함해서 자식 엘리먼트를 뜻하는 노드

-          텍스트 노드 (Text Node) : 데이터 부분을 뜻하는 노드

-          노드셋 (NodeSet) : 같은 엘리먼트 이름을 가지고 있는 노드들

-          Template Rule 정의

-          보통 XML 문서에서 변환될 대상 노드 숫자만큼 Template Rule 정의

-          <?version="1.0" encoding="UTF-8"?>
<xsl:stylesheet

     version
="1.0"

     xmlns:xsl
="http://www.w3.org/1999/XSL/Transform
">
     <!-- Template Rule
-->
     <xsl:template match="원본 XML문서의 대상 노드 지정
">
          대상 노드 대신에 대치되는 새로운 노드 내용

    
</xsl:template>
     <!-- Template Rule
-->
     <xsl:template match="원본 XML문서의 대상 노드 지정
">
          대상 노드 대신에 대치되는 새로운 노드 내용

    
</xsl:template>
          .
          .
          .
</xsl:stylesheet>

-          Template 하위로 다른 Template 바로 없고 하위에 넣으려면 독립된 Template 만든 참조해서 넣어야 한다.

-          match 속성 : 원본 XML문서에서 변환되어야 대상 노드를 지정하는 패턴(Pattern) 온다. 패턴에는 XPath 표현식 개의 노드 또는 노드셋을 가리키는 표현식이 온다.

-          / : 문서 자체를 뜻하는 루트 노드

-          /노드명/…/노드명 : 특정 경로를 가지는 노드 or 노드들

-          //노드명 or 노드명 : 경로와는 상관없이 동일한 이름의 노드 or 노드들

-          /노드명/노드명[@속성명='속성값'] : 특정 속성값을 가지는 노드 or 노드들

-          /노드명/노드명[@속성명!='속성값'] : 특정 속성값을 가지지 않는 노드 or 노드들

-          ex)     <xsl:template match="/">...</xsl:template>
     <xsl:template match="//book">...</xsl:template
>
     <xsl:template match="book">...</xsl:template
>
     <xsl:template match="/booklist/book/title">...</xsl:template
>
     <xsl:template match="/booklist/book[@kind='computer']">...</xsl:template>

-   Template Rule 적용

-          해당 Template Rule 통해 변환된 내용을 Result Tree 어는 부분에 포함할 것인지 알려준다.

-          XSL 변환기가 XSL문서를 해석해서 원본 XML 문서를 변환시킬 제일 먼저 Template Rule match 속성에 루트 노드("/") 지정된 Template 찾아서 적용시킨다.

-          <xsl:template match="/">...</xsl:template>

-          위의 Template Rule 일종의 시작 Template Rule이다.

-          시작 Template Rule 포함하고 있는 내용

1.   Result Tree 루트 엘리먼트 기타 자식 엘리먼트

2.   다른 Template Rule 적용

A.       ex)
<xsl:template match="/
">
  <
루트엘리먼트
>
    <
엘리먼트
>
      다른 Template Rule 적용

       
     
다른 Template Rule 적용
       
    </
엘리먼트>
  </
루트엘리먼트
>
</
xsl:template>

B.       다른 Template Rule 적용 : xsl:apply-templates
<xsl:apply-templates select="
원본 XML 문서의 대상 노드 지정"/>

                                                                           i.      xsl:apply-templates select에서 참조되는 Template 가리키는 것이 아니라 원본의 대상 노드를 가리키는 것에 주의. 이유는 아래 적용순서를 이해하면 된다.

C.       xsl:apply-templates 적용순서

                                                                           i.  select 속성에 지정된 대상 노드를 찾는다.

                                                                          ii.  대상 노드를 match 값으로 가지고 있는 Template Rule 찾아서 적용한다.

                                                                        iii.  적용 변환된 내용을 xsl:apply-templates 엘리먼트와 대치 시킨다.
**
만약 select 속성이 생략되면 모든 Template Rule 적용시켜 변환된 내용을 xsl:apply-templates 엘리먼트와 대치시킨다.

D.       Template Rule name 속성

                                                                           i.  name 속성이 지정된 Template Rule 원본 XML 문서 노드를 변환시키는 것이 목적이 아니라 XSL 문서 내에서 반복해서 자주 적용되는 내용을 재사용하기 위해서 사용한다. XSL 문서 작성량을 줄이기 위한 수단.

                                                                          ii.  Template Rule 반드시 match 또는 name 하나를 기술해야 한다.

                                                                        iii.            <xsl:template name="Template Rule ">
   반복되는 내용
</xsl:template>

                                                                         iv.            Template Rule 명은 QName 기술한다. 다른 Template Rule에서 참조할 사용

                                                                          v.            참조 방법은 xsl:apply-templates 대신에 xsl:call-template 사용한다.

                                                                         vi.            <xsl:call-template name="Template Rule "/>

E.       Template Rule priority 속성

                                                                           i.            원본 XML 문서의 대상 노드를 변환시키는 Template Rule 여러 개가 있을 경우 우선순위가 높은 Template Rule 적용시키도록 하는 속성값

                                                                          ii.            <xsl:template match="노드 XPath" priority="우선순위 번호">
   
</
xsl:template>

                                                                        iii.            우선순위 번호 : 음수 or 양수의 실수 값이 온다. 높은 수가 우선순위가 높다.

                                                                         iv.            **name 속성을 갖는 Template에는 적용불가, 적용(match) Template에서만 사용한다.

                                                                          v.            응용 게시판의 공지나 최근 글을 강조하고자
     
게시판 답변글을 표현할

     
여러 카테고리의 아이템을 같이 출력할

F.       Template Rule mode 속성

                                                                           i.            일반적으로 match 속성 값이 동일한 Template Rule 여러 두는 경우는 별로 없다. 경우에 따라 변환 내용을 달리해야 하는 경우 Template Rule 여러 정의해서 적용하는 것도 가능

                                                                          ii.            mode 이름으로 구별해서 각각의 Template Rule 적용

                                                                        iii.            <xsl:template match="노드 XPath" mode="모드명">
   
</
xsl:template>

                                                                         iv.            name 속성을 갖는 template에는 적용 불가. 적용(match) template 에서만 사용한다.

                                                                          v.            실제 구분해서 적용하려면 xsl:apply-templates에서 mode 기술한다.

                                                                         vi.            <xsl: apply-templates select="노드 XPath" mode="모드명"/>

                                                                       vii.            응용 : 조건별 서식, 홀짝수 구분, 부분합 표시

 

원본 XML문서의 내용 가져오기

1. 엘리먼트의 content 내용 속성 가져오기

A.       원본 XML문서에서 엘리먼트 content 내용 가져오기

B.       <xsl:template match="원본 XML 문서 대상 노드 지정">
    <
xsl:value-of select="대상 노드의 자신 or 자식 노드명[note1]"/>
</
xsl:template>

[1] 위의 Template의 match안에 있는 XPath를 기준으로 한 상대경로로 표기

C.       <xsl:value-of select=" "/> 대상 노드의 자식 노드의 content 내용을 가져와서 자리에 대치시키는 엘리먼트이다.

D.       대치되는 content 내용이 숫자일 경우 포맷팅도 가능
<xsl:value-of select="format-number(
자식노드명,'포맷형식')"/>

E.       가져올 데이터가 속성값일 경우
<xsl:value-of select="@
대상 노드의 속성명"/>

F.        value-of select 절대경로를 쓰면 처음 나온 값만을 반복해서 똑같이 나오게 된다. 반복되면서 각각의 값을 가져오려면 반드시 상대경로로 기술해야 한다.

2. 엘리먼트 속성을 복사해서 가져오기

A.       원본 XML 문서를 다른 구조의 XML문서로 변환할 일부 노드들은 결과 트리에서 구조변경 없이 그대로 사용되어질 경우.

B.       일부분을 복사해서 결과트리에 붙여 사용한다.

C.       <xsl:template match="원본 XML 문서 대상 노드 지정">
    <
xsl:copy-of select="복사할 자식 노드명 or @속성명"/>
</
xsl:template>

 

 

정렬하기

-        원본 XML 노드의 값을 정렬된 상태로 결과트리를 생성할

-        xsl:sort

-        <xsl:apply-templates match="원본 XML 문서 대상 노드 지정">
    <
xsl: sort
         
select="정렬 대상이 노드명 or @속성명
"
        
data-type="정렬 대상 데이터 유형
('text' | 'number')"
        
order="정렬 방식
('ascending' | 'descending')"
         />

</
xsl:apply-templates>

-        먼저 원본 XML 문서의 대상 노드를 정렬시티고, 후에 Template Rule 적용시켜 변환한다.

-        Data-type 기본값은 text 이다. 숫자정렬이면 반드시 number 지정

-        ** xsl:sort xsl:apply-templates xsl:for-each 자식 엘리먼트로만 사용 가능하다 (반복되는 형태에서만 가능)

-        <xsl:apply-templates select="원본 XML 문서 대상 노드 지정">
    <!--
1 정렬 -->
    <
xsl: sort select=" "/>
    <!--
2 정렬 -->
    <
xsl: sort select=" "/>
</
xsl:apply-templates>

 

번호 매기기

-        XSL 변환기가 Result Tree 만들 자동으로 번호를 삽입할 있는 기능

-        xsl:number

-        <xsl:template match="원본 XML 문서 대상 노드 지정">
    <
xsl:number format="번호 형식"/>
</
xsl:template>

-        번호 형식 : 1, a, A, i, I, (1), [1], 1), - 1 -…

 

제어 엘리먼트

1. xsl:if

A.       프로그래밍 언어에서 if문과 동일

B.       조건식을 평가하여 true 변환내용을 적용하고 false이면 변환내용을 적용하지 않는다.

C.       <xsl:template match="원본 XML 문서 대상 노드 지정">
    <
xsl:if test="조건식">
        변환 내용
    </xsl:if>
</
xsl:template>

D.       조건식 : 참과 거짓을 반환하는 XPath 표현식이 온다.

                                     i.          노드명="문자열" : 컨텐트 내용이 문자열이면 true

                                   ii.          @속성명="속성값" : 속성값이 일치하면 true

                                  iii.          @속성명!="속성값" : 속성값이 불일치하면 true

                                  iv.          starts-with(노드명, "문자열") : 노드의 content내용이 "문자열" 시작하면 true

                                    v.          contains(노드명, "문자열") : 노드의 content내용이 "문자열" 포함하면 true

2. xsl:choose

A.       여러 조건식을 평가해서 참을 돌려주는 조건식을 포함한 변화 내용만 적용

B.       <xsl:template match="원본 XML 문서 대상 노드 지정">
    <
xsl:choose>
        <
xsl:when test="조건식1">

   
        변환 내용1
        </xsl:when>
        <xsl:when test="
조건식2">

   
        변환 내용2
        </xsl:when>

           

        <xsl:otherwise test="
조건식3">
   
        변환 내용3
        </xsl:otherwise>
    </xsl:choose>

</
xsl:template>

C.       otherwise 생략가능

3. xsl:for-each

A.       대상노드의 숫자만큼 반복해서 변환내용을 적용시킨다.

B.       Template Rule 비슷한 동작을 한다.

C.       <xsl:template match="원본 XML 문서 대상 노드 지정">
    <
xsl:for-each select=" 원본 XML 문서 대상 노드 지정 ">
        <!—
정렬 -->
        <
xsl:sort ../>
        변환 내용 기술
    </xsl:for-each>
</
xsl:template>

D.       외부 Template Rule 사용하지 않아도 된다. 정렬도 가능하다. , 재사용은 없다. Template 보다 빠르다.

 

변수 & 파라미터

-        xsl:variable

-        <xsl:variabe name="변수명" select="변수값"/>

-        <xsl:variabe name="변수명">변수값</xsl:variable>

-        변수값은 select 속성이나 엘리먼트 데이터 값으로 할당 가능

-        ** 변수값이 문자열일 경우 반드시 " " 묶어 준다. 그렇지 않으면 노드명으로 인식한다.

-        문자값

-        <xsl:variabe name="변수명"/>

-        <xsl:variabe name="변수명" select="' '"/>

-        변수값이 단순 문자열이고 Result Tree 엘리먼트 컨텐트 내용으로 사용될
<
엘리먼트><xsl:value-of select="$변수명"/></엘리먼트>

-        변수값이 단순 문자열이고 Result Tree 속성값으로 사용될
속성명="{$변수명}"

-        변수값이 단순 문자열이고 XPath 표현식에서 사용될
[
노드명=$변수명] or [@속성명=$변수명]

-        변수값이 Result Tree 일부분을 이루는 엘리먼트들로 구성되었을 경우
<
엘리먼트><xsl:copy-of select="$변수명"/></엘리먼트>

-        변수의 사용 범위

1.     글로벌 변수 : 최상위 엘리먼트로 작성(stylesheet 자식), 모든 Template Rule 에서 사용 가능

2.     로컬 변수 : Template Rule 내에서 작성, 해당 Template Rule 안에서만 사용 가능




 

' > Web' 카테고리의 다른 글

홈페이지 작성시 사용되는 스타일시트  (46) 2008.02.04
부분적으로 XSL 적용하기.  (22) 2007.08.22
텍스트 로 자바스크립트 실행하는 방법  (44) 2007.08.01
xsl 에서 태그 속성 바꾸기.  (23) 2007.07.16
웹페이지 인코딩  (23) 2007.06.11
by cranix 2007. 8. 22. 04:12

텍스트를 눌렀을때 자바스크립트가 실행되게 하는 방법에는 여러가지가 있다.

첫번째로 가장 흔히 쓰이는 href 속성을 이용하는것이다.

<a href="javascript:test()">test</a>

다음으로 쓰이는 방법이 onclick 속성을 이용하는것인데.

<a href="#" onclick="test()">test</a>

이 방법은 클릭 했을때 # 에 의해 문서의 제일 처음으로 간다는 단점이 있어서 잘 쓰지는 않는다.

그럼 첫번째 방법은 단점이 없느냐?

없는줄 알았다..ㅡ.ㅡ;

두 방법의 차이점은 바로 event 객체의 사용 유무 이다.

첫번째 href 속성으로 했을경우 event 객체를 사용하면 거기서 스크립트가 멈춰버린다..

오류도 없다. 메시지도 없다.. 그냥 멈춘다..ㅡ.ㅡ;

a 태그가 그런 단점을 가진다면 어떻게 하는것이 좋을까?

경험으론 아래와같이 span 태그를 이용하는 방법이 가장 좋다.

<span style="cursor:hand" onclick="test()">test</span>

그냥 쓰면 커서가 변하지 않아서 링크처럼 안보이기때문에 부득이 style 을 쓰느라고 조금 길어졌다.

그러나 긴만큼 a 태그사용에서 오던 문제점은 없다.

' > Web' 카테고리의 다른 글

부분적으로 XSL 적용하기.  (22) 2007.08.22
XSL 엘리먼트 정리  (22) 2007.08.22
xsl 에서 태그 속성 바꾸기.  (23) 2007.07.16
웹페이지 인코딩  (23) 2007.06.11
JAVASCRIPT 에서 XML 문서 DOM,XPATH 로 파싱하기  (26) 2006.12.16
by cranix 2007. 8. 1. 01:19

예를들어

링크 태그에 href 속성을 xsl 에서 뽑은 어떤 노드의 값으로 변경하려면 아래와같이 하면된다.


<a>

<xsl:attribute name="href">http://cranix.net</xsl:attribute>

</a>


' > Web' 카테고리의 다른 글

부분적으로 XSL 적용하기.  (22) 2007.08.22
XSL 엘리먼트 정리  (22) 2007.08.22
텍스트 로 자바스크립트 실행하는 방법  (44) 2007.08.01
웹페이지 인코딩  (23) 2007.06.11
JAVASCRIPT 에서 XML 문서 DOM,XPATH 로 파싱하기  (26) 2006.12.16
by cranix 2007. 7. 16. 20:44

웹페이지를 UTF-8 로 작성했는데 깨져서 보이는데도 있고..

제대로 나오는데도 있을경우엔.

페이지 head 에다가 아래 내용을 추가해서 강제로 맞춰주면 된다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

by cranix 2007. 6. 11. 21:30
| 1 2 |