dojo 자바스크립트 툴킷이 dojo.query라는 dojo를 위한 CSS Query Engine을 공개했다. CSS Query Engine이란 HTML DOM structures를 CSS 선택자로 접근할 수 있도록 하여, 보다 쉽고 빠르며 효율적으로 DOM을 이용할 수 있는 방법을 제공한다.

이 CSS Query Engine라는 단어는 IE7 스크립트 라이브러리를 개발한 Dean Edwards가 2004년에 처음 사용한 것으로 알고 있다. 그는 이미 cssQuery를 개발해서 배포중이다. 또한 jQuery, MochiKit, Prototype, behavior.js들도 CSS 선택자 형식으로 DOM에 접근할 수 있는 CSS Query Engine이다.

CSS는 아래의 그림처럼 선택자와 선언으로 구성되며, 선언은 속성과 값으로 구성된다.

2년 전, 현석님은 CSS에서 선택자의 중요성을 아래처럼 한마디로 표현했다.

선택자를 알면, CSS의 절반을 안다.

위의 그림에서 볼 수 있듯이, CSS의 문법상 선택자는 CSS의 절반이다. 그렇다고, 단순히 문법상에서 선언(속성+값)과 동등한 위치에서 선택자가 절반의 위상을 갖는 것으로 오해하면 안된다. CSS의 핵심인 속성의 상속(inherit)과 겹침(cascade)을 효과적으로 사용하기 위해선 CSS 선택자를 명확히 이해해야하기 때문에 그 비중이 CSS의 다른 모든 것들을 합친 것과 동등한 비중을 갖는다는 뜻이다.

CSS를 얼마나 잘 사용하느냐는 것은 CSS 선택자를 얼마나 잘 사용하느냐와 같다. CSS를 처음 작성하는 초급 CSS 디자이너나 왠만큼 작성해봤다는 중급 CSS 디자이너의 CSS를 비교해 보자. 둘 코드의 차이를 한눈에 파악할 수 있을 것이다. 즉, 고급 CSS 디자이너는 CSS 선택자를 효율적으로 사용하여, 디자인 시안을 단순히 코드로 옮기는 것이 아니라, 눈에 보이지 않는 디자인 영역까지 촘촘히 디자인하는 것이다. (말로 표현하기엔 아직 나의 내공부족인듯.. ㅠ.ㅠ)

CSS 선택자를 잘 사용하기 위해선, 나무를 보지 말고 산을 봐야만 한다. 즉, 뫼 산 CSS 디자인 프로세스를 익힐 필요가 있다.

CSS는 Cascading Style Sheet의 약자이다. 의역하면, 계단형(상속형) 스타일 시트이다. CSS는 (x)HTML의 외양을 꾸미는 역할을 하며, 이름에서 알 수 있듯이 CSS의 가장 큰 특징은 상속형이다. 각각의 CSS 요소들의 정의된 성질들이 조상/자손, 부모/자식 관계 속에서 상속된다는 것이다.

이렇게 상속되는 특징을 잘 이해하고, CSS를 제작한다면, 웹문서는 출렁이는 파도처럼 부드러움을 갖게될 것이다. 웹사이트 전체적인 통일성과 유동성을 쉽게 구성할 수 있고, 추후 수정/보완할 수 있다.

그렇지 않고 CSS를 제작한다면 흡사, 웹문소의 구성요소들은 각개전투를 벌이다가 웹사이트 전체적인 전투진형을 흩뜨릴 것이며, 장군(제작자)의 작전명령을 오만년이 걸려서야 수행할 것이다. ^^;

이런 상속되는 특징을 이해하기 위해선 먼저 CSS 선택자를 이해해야 한다. 즉, CSS 선택자 이해 -> CSS 상속성 이해 -> CSS 이해가 되려남.. 이와 관련해서 현석님은 “선택자를 알면 CSS의 절반을 안다”라고 말했었다.

최근 UTF-8 인코딩을 지원하고, 웹표준을 준수한 GR보드가 공개됐다. 또한 개인화기능이 추가되고, 웹표준을 준수한 올블로그V2가 베타 테스트 중이다. 이 두 사이트가 웹표준을 준수한다고 해서 코드를 잠깐 확인해보니, CSS 선택자(HTML 요소, Class 선택자, ID 선택자)가 남용된 걸 알 수 있었다.

웹 유효성 검사(Validate)는 수단이지 목적이 아니다. 검사를 통과했다고 표준도 아닐 것이다. 충분히 의미있고(sementic), 구조적인(Structual)인 마크업을 사용하도록 조금 더 노력한다면, 정말 멋진 사이트가 될 것이다.

GR보드와 올블로그 개발자 여러분 조금 더 힘내세요! 파이팅~!

웹브라우저마다 h1~6의 머릿글이나 p, hr, ul, ol, li 등 여러 기본 선택자들의 마진과 패딩값이 다르게 표현된다. 이런 차이는

* 는 전체 선택자이다. CSS는 이름그대로 계단형식으로써 부모/자식 사이에 각 속성들을 상속하기 때문에, 전체 선택자의 속성에 특정값을 지정할 경우 자식이 되는 모든 선택자들이 그 속성을 따르게 된다.

@/* =reset
--------------------------------------------------*/
* {margin:0; padding:0;border:none;}
@

나는 CSS 파일을 제작할 때, 가장 상단에 이렇게 코드를 작성한다. 이는 모든 선택자들의 마진과 패딩의 속성값을 0으로 만들고, 보더값을 없게 만든다. (이외에도 폰트나 body 설정을 하는 편이지만, 내용과 맞지 않아서 생략)