한빛출판네트워크

저자: 디디에르 마틴(Didier Martin), 역 전순재

CSS는 XML에서도 사용할 만한 적당한 스타일 언어인가? CSS가 XSLT를 대체할 수 있는가? 이전에도 이러한 질문들에 대해 들어본 적이 있을 것이다. 아니면 스스로 이렇게 질문을 해보기도 하였을 것이다. 다양한 스타일 언어의 가치와 이점들에 관한 논쟁들은 혼란을 가중시키는 경향이 있었다. 이 기사에서 우리는 CSS를 XML에 적용하는 법을 살펴보겠다.

CSS1과 CSS2는 무엇을 가공처리(Rendered) 하는가?

먼저 질문을 하나 해보자. 이 기사를 더 읽기 전에, 펜과 종이를 가지고 다음 질문에 답해 보자. 아래에 있는 XML 조각을 CSS1와 CSS2를 사용하여 각각 어떻게 화면에 표시할 수 있을까? 천천히 생각해보아도 된다. 기다려 줄테니까.

이제 다른 구조를 하나 시도해보자. 속일 생각하지 말고, 할 수 있는데까지 최선을 다해 보자!

      Jim Barksdale to Donate $100 Million to Literacy

      CNET to Buy Comparison-Shopping Web Site Mysimon.com

어떤가? 최선을 다해 노력했음에도 불구하고, 앞의 XML 조각은 CSS1으로 가공처리 할 수 없다(그렇지만 뒤의 XML 조각은 렌더링 할 수 있음). 왜 그럴까? CSS1은 요소 데이터 내용을 가공처리 할 수 있지만 속성(attributes)을 렌더링 할 수 없기 때문이다. 첫 번째 코드에서 각 요소(element)는 아무런 데이터 내용(data content)도 포함하고 있지 않다; 단지 속성들만을 포함하고 있을 뿐이다. 뒤의 코드조각에서 두개의 요소에는 속성과 더불어 데이터 내용도 있다. 그래서, CSS1 규칙은 오직 그 요소의 데이터 내용만을 가공처리 할 수 있다. CSS1의 세계관(Weltanschauung)은 단순하다. 데이터 내용이 없으면 아무것도 렌더링되지 않는다.

CSS1은 오직 그 요소의 데이타 내용만을 가공처리할 수 있다

그렇지만 CSS2에서는 아직까지 알려지지 않는 content 특성을 가져온다. 이 특성을 사용하면 한 속성의 값을 가공처리 할 수 있다. 그래서 CSS1 규칙은 오직 그 요소의 데이터 내용만을 가공처리 할 수 있는 반면, CSS2 규칙은 요소 속성(element attributes)과 데이터 내용(data content) 모두를 가공처리 할 수 있다.

오직 속성만을 가지고 있는 요소를 가공처리 하려면, (a) 그 요소를 시각적인 객체로 변환하고 (b) CSS 엔진에 어느 내용이 이 시각적 객체에 의해서 화면에 표시될지 알려 주어야 한다. 예를 들어, 각 요소를 화면에 표시하기 위해, 각 에 일치하는 CSS 규칙 하나를 만든다. 규칙의 몸체에서 block이라는 시각적 객체를 content 특성을 가지고 만든다. 이 특성은 xlink:title 속성의 값과 동등한 값을 가지고 있다.

item
{
  display: block;
  content: attr(xlink:title);
}

CSS2는 요소 데이터 내용(element data content)과 속성(attributes)을 모두 가공처리(render)할 수 있다

XSLT 대 CSS

CSS 스타일 엔진을 XSLT 엔진과 비교해 보면, 그 둘 사이의 처리 모델이 다르다는 걸 볼 수 있다. CSS 엔진은 주로 커서(cursor)에 의해 주도되는데 이 커서는 XML 문서의 노드 계층도에서 각 노드를 방문한다. 커서가 한 XML 노드에 위치하면, CSS 엔진은 이 노드를 CSS 규칙에 일치시키려고 한다. 그 일치는 선택자(selector) 표현식에 기초한다. 한 규칙의 선택자는 어느 요소나 속성 노드와도 일치할 수 있다. 그렇지만 CSS1나 CSS2 어느 것도 XML 문서 구조를 변경하는데 사용할 수 없다. 그러므로 가공처리된 문서는 XML 문서 구조에 많이 의존한다.

대조적으로 XSLT를 사용하면 XML 문서 구조를 변형할 수 있다. 예를 들면 요소들을 정렬할 수 있으며, 한 요소의 데이터 내용을 다른 속성들로 변형할 수 있고, 속성들을 데이터 내용으로 변형할 수 있는 등 구조변경이 가능하다. 또다른 주요한 차이점은 CSS를 사용하면 오직 하나의 시각적 객체만을 일치된 각 요소나 속성 노드에 연관지을 수 있다는 것이다. 반면에, XSLT에서는 일단의 시각적 객체들을 어느 노드에나 연관지을 수 있다.

다음은 XSLT과 CSS의 차이점을 요약해 놓은 표이다.

XSLT	CSS2
문서 구조 변경 허용	문서 구조 변경 불가
한 노드를 일련의 시각적 객체에 매핑 허용	한 노드를 오직 한 개의 시각적 객체에 매핑 허용
다양한 목표 렌더링 언어로 매핑 허용	오직 한가지 시각적 모델에만 매핑 허용
모든 문서 노드 탬플릿(template)에 매핑 허용	요소와 속성 노드들만 규칙에 매핑 허용

이글을 쓰고 있는 현재, XML과 관련하여 CSS 권장안을 완전하게 지원하는 브라우저는 없다. 그래서 광범위한 XML+CSS 렌더링 지원이 없다면 XML 개발자 도구모음에서 CSS가 의미하는 중요성은 무엇인가? 그 대답은 그 두 언어의 보조수단으로서 브라우저와 플러그인에서 광범위하게 구현된 컨텐츠(content)들을 가공처리하는데 사용된다는 것이다.

1. HTML (그리고 그의 후계자인 XHTML)
2. SVG

(X)HTML, SVG와 찰떡 궁합을 이루는 CSS

대부분의 HTML과 SVG 요소들은 시각적 객체들을 표현한다. 예를 들어

요소는 문단이라는 의미구조를 전달하지만, 또한 브라우저)가 화면에 표시할 수 있는 시각적 객체를 기술하기도 한다. HTML 인터프리터(즉, 브라우저)는 비록 이 모델이 권장안으로 문서화되어 있지 않을지라도, HTML 문서를 묵시적인 시각적 모델을 사용하여 처리한다. 예를 들어 모질라(Mozilla), 인터넷 익스플로러(Internet Explorer), 그리고 오페라(Opera) 브라우저는 HTML 문서를 대략 비슷하게 가공처리할 것이다. 약간의 차이는 있겠지만 문서의 전체적인 시각 느낌은 똑같을 것이다. 비록 명시적으로 문서화되어 있지 않을지라도 이러한 브라우저는 비슷한 시각적 모델을 지원한다.

이것이 이른바 무언의 지식인가? 어떤 면에서 지식 관리 전문가라면 시각적 모델 규격은 아직 명시적으로 완성되지 않았다고 말하겠지만, 여전히 브라우저 디자이너들의 머리에는 무언의 지식이 존재한다. 일본의 장인이 전통적인 검을 만들어 내는 것처럼 브라우저 디자이너들은 장인의 창조과정을 지켜 보면서 배운 것이다!

CSS는 그 시각적 객체의 특성들을 변경함으로써 기본설정된 묵시적인 시각적 모델을 변경하는데 사용된다. HTML에서 요소들은 대부분 시각적 객체와 연관된다. 그 요소들의 시각적 특징들은 한 모둠의 특성들로 인코딩되고, 이것은 CSS로 변경될 수 있다. 여기에서 주목할 것은 CSS가 HTML 요소의 속성들을 변경한다고 내가 말하지 않았다는 것이다. 오히려 CSS는 한 HTML 요소와 연관된 시각적 객체의 특성을 변경한다.

SVG와 HTML 모두에서 CSS는 기본설정된 시각적 객체의 특성 모둠을 변경하는데 사용된다. 예를 들면

요소는 묵시적으로 block이라는 시각적 객체와 연관되어 있는데, 이것은 약간의 기본설정된 특성 값들을 가지고 있다. 특성들을 변경하려면

요소에 일치하는 CSS 규칙을 만들거나 style 속성을 해당

요소에 부착하면 된다. style 속성은 CSS 특성 모둠을 가지고 있다. 시각적 객체 특성들을 CSS로 변경하려면 묵시적인 객체의 시각적 특징들을 변경하면 된다. 예를 들면

를 렌더링할 때 CSS를 사용하여 색상이나 글꼴을 변경해도 좋다.

SVG 디자인 팀은 CSS를 사용하여 SVG 요소의 시각적 특징을 설정하기로 결정하였다. 예를 들어 아래의 그림은 SVG 문서를 사용하여 만들어진 것인데, 그림 아래는 그 코드이다.

요소는 path 객체들과 같은 SVG의 시각적 객체들을 그룹화하는데 사용되는데, 이 객체들은 요소들로 인코딩된다. SVG는 철저하게 CSS의 상속 특징을 사용한다. CSS 요소의 style 속성 값은 기본설정 특성 모둠을 산출하는데 이 특성 모둠은 보유하고 있는 모든 요소들에 적용된다. 그리하여, 첫 번째 요소는 그룹에 적용된 스타일로부터 상속될 것이다 (기본으로 색상은 푸른 색으로 설정되어 있다). 두 번째 요소는 그의 값을 변경함으로써 fill 특성을 오버로드한다 (fill: blue 특성/값은 fill: green 특성/값으로 대치된다).

맺는 말

CSS는 XML 세계에서 멸종위기에 처한 족속이 아니라, 오히려 HTML과 SVG와 더불어 더욱 공생할 족속이다. CSS가 제공하는 메커니즘을 통해 시각적 객체들의 특징을 설정할 수 있고, 그렇게 하여 렌더링 언어는 더욱 가치있게 된다.

결론을 말하면, CSS는 XSLT와 상대 되지 않다고 생각될 수도 있겠지만 XSLT를 어느 정도는 보완해 준다. XSLT는 XML 문서를 HTML이나 XHTML 또는 SVG와 같은 목표 언어로 변환하는데 사용될 수 있다. CSS가 추가로 제공하는 이점은 목표 언어의 시각적 객체들의 특성을 변경할 수 있다는 것이다. 그리고 그 목표 언어가 순수하게 XML인 경우, CSS를 사용하면 이러한 시각적 특징들을 바닥에서부터 정의할 수 있다.