XML과 CSS, XSLT

## 자료출처 ~ Devpia XML 게시판 김병희 님 자료를 -_- 무단으로 복사해왔습니다 ;;

XML과 CSS, XSLT

저번 시간에는 XML를 본격적 으로 배우기 전에 기본적으로 숙지해야할 개념 들에 대해
알 아 보았다. 간단하게 복습해 보자. 우선 문서(document)에 대해 이해 했다. 즉 문서
의 구성요소가 의미와 내용 그리고 구조 라고 했었다. 그리고 마크업 언어는 그런 문서
를 표현해 주기 위한 기호들의 규칙의 집합이라고 했었다. 이 두가지를 이해 했다면 일
단 성공이다. 오늘은 ‘마크업 언어로 작성된 코드 즉, 태그 들을 어떻게 브라우저가 스
크린 상에서 보여주는가?’ 에 대한 대답의 내용으로 강좌를 하려고 한다. 오늘 배워야
할 용어는 CSS와 XSLT이다.


1.CSS(cascading style sheets)
HTML은 학자들이 쓴 논문의 내용을 구조화 하여 보여주기 위해 처음 고안된 마크업 언어
라고 저번에 설명 했었다. HTML소스는 보여주려는 내용과 그 내용을 어떻게 표현 할 것
인가를 나타내는 태그로 구성된다. 물론 동적인 웹페이지의 경우 스트립트 소스와 ASP등
의 소스들이 서로 섞여 있지만 여기서는 일단 HTML만 생각하자.

여러분이 초기에 마크업 언어를 만든 개발자라고 하자. 그리고 논문을 웹페이지에 보여
주려고 한다. 그러면 다음 문제를 생각 하지 않을 수 없을 것이다.
즉 논리적 구조를 바탕으로 도큐먼트를 만드는 대신에 요소의 위치를 어떻게 잡을 것인
가, 글자(폰트)를 무엇으로 할 것인가, 색을 무엇으로 바꿀까 하는 문제들 이다.
한마디로 표현해 웹상에서 어떻게 가시적으로 보여줄 것인가 하는 문제인 것이다. 어떻
게 이쁘게 어떻게 눈에 띄도록 하는 것들이 그런것이다.

그래서 고안된 것이 CSS이다. 이제 CSS에 대해 간략히 정리하자.
‘CSS는 만들어진 도큐멘트를 어떻게 디스플레이(표현-presentation) 할 것인지 대한 스
타일 시트이다.’

웹브라우저에서 어떤 문서를 보여주기 위해 필요한 것은 보여줄 문서의 내용과 그 내용
에 대한 구조를 나타내는 마크업언어인 HTML, 그리고 그것들을 웹브라우저에서 표현해
줄 스타일 시트가 필요하다. CSS는 물론 HTML태그가 어떻게 표현될것인지를 정해주는 것
이다. 그러므로 HTML로 작성되지 않은 순수한 문서에 CSS를 적용시키는 것은 말이 성립
되지 않는다. HTML 태그가 있음으로 해서 CSS가 있는 것이다.!

CSS는 HTML 코드 안에 삽입 되거나 따로 *.CSS라는 확장자로한 파일로 저장되어 있다.
Text/css란 코드를 본적이 있을 것이다. *.CSS라는 파일명이 삽입된 HTML코드를 본적도
있을 것이다. 즉 ‘다음 HTML코드를 *.CSS파일에 정의된 대로 웹브라우저에서 보여 주어
라’하는 뜻이다. 물론 이것을 해석하는 엔진은 당연히 브라우저 안에 있다.
여기서 잠깐 헷갈려 하는 사람들을 위해 서버에서 클라이언트로 오는 데이터가 무엇인
지 설명해야겠다.


클라이언트가 서버에서 요청하는 파일은 모두 HTML코드로 되어있다. ASP등의 서버쪽 언
어들은 서버 측의 ASP엔진에서 이미 해석되고 순수한 HTML코드 데이터만 클라이언트로
오게 되는 것이다. 그리고 클라이언트의 웹브라우저에서 그 태그들을 해석하여 웹페이지
에 나타내는 것이다. 자바스크립트 또한 웹브라우저안에서 해석된다.
시간 날 때 서버측 언어와 클라이언트측 언어에 대해 설명할 기회가 있을 것이다.  
이제 CSS에 대해 이해가 가는가? 그럼 다음을 보자.




2.XSLT(Extensible Stylesheet Language for Transformations)
우리가 공부하고자 하는 것은 XML이다. 그런데 자꾸 HTML에 대한 설명을 집어 넣는 이유
는 우선 HTML을 조금 이라도 아는 분들이 XML을 배우려고 하지 전혀 모르는 사람이 XML
을 배우려고 하지는 않는다는 것이다. 그러기 때문에 HTML에 대한 설명을 XML에 대한 설
명을 위해 집어 넣는 것이다.


그럼 이제 본격적으로 XSLT에 대해 알아 보자.
XSLT에 대해 이해하기 전에 스타일 시트에 대해 어떤 질문이 생겨야 한다. XML도 어차
피 마크업 언어 이고 XML태그를 웹상에서 표현해 주려면 CSS가 필요해야 한다. 그런데
처음 강좌에서 XML의 강력한 장점 중의 하나가 사용자가 마음대로 태그를 만들 수 있다
는 것이었다. 이제 본격 적인 질문이다. 사용자 마음대로 태그를 만들어 버리면 브라우
저가 어떻게 그 태그를 해석해서 웹페이지에 보여준다는 것인가? 대답부터 말하면 웹브
라우저는 ‘전혀 모른다’ 이다. HTML에 쓰이는 태그는 HTML 스펙에 따라 정의되어 있
고 브라우저는 그 스펙에 대한 정보를 포함하고 있기 때문에 즉 정해진 태그는 얼마든
지 해석해서 보여 줄 수 있다. 하지만 XML의 경우 당연히 보여 줄 수 없다. 따라서 스타
일 시트를 쓰지 않고 XML파일을 작성하고 웹상에 출력해 본다면 파일 그대로 보여주게
된다.

즉 XML 문서를 웹상에서 디스 플레이 하려면 당연히 스타일 시트가 있어야 한다. 물론
CSS를 쓴다. 하지만! 정해진 대로 어떤 태그를 어떤 식으로 디스 플레이 할 필요는 없다
는 것이다. 만약 <안녕>이라는 태그(XML에서는 요소라 부른다)를 사용한다면 CSS에서 <
안녕>태그에 포함된 내용은 어떻게 보여주라고 지정할 수 있다는 말이다.
XML에서는 이것을 <?xml-stylesheet ?>라는 처리 지시문을 통해 정해 준다.


이제 XSLT에 대해 파고 들어 보자.
XML도 충분히 CSS를 이용해서 웹상에서 디스플레이 해 줄 수 있다고 했다. 근데 굳이 다
른 스타일 시트를 쓰려는 이유는 무엇일까?
‘XSLT는 XML문서를 텍스트를 기반으로 하는 다른 XML뿐만 아니라 어떤 다른 형식으로
도 변환 하는 것을 가능하게 한다’ transformation이라는 단어가 ‘변환’이라는 뜻을
가지고 있다는 것을 명심하자.

즉 XSLT는 XML변환 언어이다. XML는 순수하게 문서의 데이터 구조만을 나타낸다. 그리
고 XML의 강력한 장점 중의 하나가 서로 다른 플랫폼의 서로 다른 어플리케이션과 상관
없이 쓸 수 있다는 것이었다. 이것을 이식성이 강하다고 말하는데 XML을 다른 웹상 뿐
만 아니라 다른 어떤 어플리케이션에 나타내고자 할 때 즉 XML을 다른 용도를 사용하고
자 할 때 XSLT를 사용한다.


정리하자면 하나의 XML문서가 있다면 이것을 가지고 이 XML문서를 사용하고자 하는 각각
의 어플리 케이션이 그 어플리케이션에 맞게 표현할 XSLT를 이용하여 표현 할 수 있다.
물론 각각의 경우 적용할 XSLT는 다를 것이다.
XSLT변환을 하기 위해 필요한 것은 XML문서, XSLT스타일 시트 그리고 XSLT엔진 이다.
HTML의 경우 웹브라우저에 자체 해석 엔진이 있다고 했다. 물론 CSS해석 엔진도 포함된
다. XML의 경우도 웹브라우저에 당연히 엔진이 있어야 한다.
MSXML라고 본적이 있을 것이다. 어디 가서 MSXML3.0 또는 4.0을 깔아야 한다고 다운로
드 주소까지 친절하게 나와있는 사이트를 보았을 것이다. 이것이 쉽게 말해 XML해석 엔
진이다. 이쪽 업계에서 이것을 파서라고 부른다. MSXML은 IE(Internet Explorer)에 장착
된 XML파서로서 XSLT엔진 또한 포함하고 있다.
이제 XSLT에 대해 이해가 가는가…?


다음 시간에는 XSLT예제와 직접 실습해 보도록 하겠다. 그리고 특히 전자 상거래 에서
왜 XSLT가 중요한지에 대한 설명과 그 예도 들어 보도록 하겠다.