CSS3 – 선택자 (추천 권고안) – 소개

CSS 3 현재까지의 표준화 작업 중에서 그나마 현재 ’확정 권고안’ 결정을 앞두고 있는 항목이 바로 ‘선택자’ 부분이다. 일단 2010년 6월에 확정권고안 예정으로 나와 있는데 표준안 작업 사이클 상에서 보면 이것이 이번에 확실히 확정될지 다시 주기의 이전 단계로 돌아가버릴지는 모를 일이다. 그래도 레벨3에서 크게 바뀔 가능성 보다는 차라리 추가될 사항이 생긴다면 레벨4로 넘어가지 않을까 하는 개인적인 상상과 근거없이 미스테리한 추측이 앞선다.

선택자가 별 거 아니게 보일지 몰라도 분량 면에서 상당히 방대하고, 사실상 이해적인 측면이 아닌 단순 암기적 측면에서만 보자면 선택자가 CSS에서 엄청난 지분을 갖고 있음을 알 수 있다. 따라서 선택자만 확실히 알고 있어도 세부적인 항목들로의 적용력을 높일 수 있다.

이 연재에서도 너무 방대한 분량 상 한번에 다룰 순 없고 극히 일부분씩만을 꾸준히 설명해나갈 수밖에 없겠다.

선택자란, XML 노드 선택에 사용 가능한 몇 가지 기술 중 한 형태로, 트리 상의 요소들에 대응되는 패턴을 지칭한다. 선택자는 XML과 HTML에 사용하도록 최적화 되었으며, 성능 위주의 코드에 사용하게끔 설계됐다.

선택자에는 ‘표현 ∗ 요소 → 불값‘ 이라는 함수가 정의돼 있는데, 이는 요소와 선택자가 지정돼 있을 경우 요소가 선택자와 일치하는지 여부를 정의하는 표현식이다. 이 표현식을 사용하면 하위 트리의 모든 요소들을 이 표현식으로 검사해서 여러 요소를 선택하거나 여러 요소 중 한 요소를 선택할 수 있다.

CSS3 선택자가 CSS2 선택자에서 달라진 점

1. 기본 정의들이 바뀌었다. 특히 CSS2에서의 ‘단순 선택자‘가 ‘단순 선택자 시리즈‘라는 용어로 바뀌었고, 기존의 ‘단순 선택자’는 이 시리즈의 컴포넌트들로 그 의미가 변경됐다.

2. 옵션 이름공간 컴포넌트를 이제는 요소 종류 선택자, 전체 선택자, 특성 선택자 안에 사용할 수 있게 됐다.

3. 조합자 개념이 새로 도입되었다.

4. 새 단순 선택자에 특성 선택자와 일치하는 하위문자열이 포함되었고, 가짜 클래스가 새로 생겼다.

5. 가짜 요소가 새로 등장하고, 가짜 요소에 :: 명령 문법이 신설되었다.

6. 문법이 수정됐다.

7. 기타 CSS 선택자 관련 명세 부분이 바뀌었다(이 부분들은 선택자의 사용 자체와는 무관하므로 일단 생략).

* 위에 새로 도입된 개념에 대해 필자가 원 문서 번역 중 새로 지어낸 주황색 표시 용어들은 분홍토끼 용어버전 1.0으로 아직 확정적이지 않으니 유의 바랍니다. 추후 각종 문서와 서적의 문맥을 두루 살펴서 이에 관련된 모든 환경에 끼워맞춰도 무난한 확정 용어가 마련되면 이 CSS 연재 글 중에서 알려드리겠습니다. 현재로서는 일단 그 용어로 받아들이셔도 무난하리라 생각합니다.