웹표준 | 선택자 알아보기

어제는 기본적으로 레이아웃을 어떻게 잡는지에 대한 내용을 봤습니다.
오늘은 구조화된 문서에 속성을 효과적으로 적용하기 위해서는 선택자에 대한 내용을 보겠습니다.

CSS에는 많은 속성들이 있습니다.
각각의 속성들에 대해서는 계속적으로 언급할 일이 있으므로 자세한 이야기를 다루진 않겠습니다.

하지만 속성을 정확하게 적용하기 위해서는 선택자를 정확히 사용하는 방법을 알아야 합니다.
선택자를 정확하게 사용하게 되면 구조화된 문서를 제작하는데 도움을 줄 수 있습니다.

선택자의 종류에는 4개가 있습니다.
----------------------------------------------------------------
공용선택자          *        모든 태그를 지정
타입선택자          A        태그 A를 지정
클래스선택자      .A      클래스가 A인 태그를 지정
ID선택자          #A    아이디가 A인 태그를 지정
---------------------------------------------------------------

우리가 전 시간에 보면 #header 라고 해서 아이디를 header라고 지정해 놓은것을 볼 수 있을 겁니다.
자 위에서 보시면 선택자의 종류에는 4가지가 있다고 했는데, 클래스 선택자와 ID선택자는 기능이 유사합니다.
클래스가 A인 태그를 지정, 아이디가 A인 태그를 지정
즉 클래스와 아이디는 유사한 개념입니다.
하지만 id를 사용하지 않고 클래스만 사용하게 되면 다른 페이지나 다른 정의에서 사용된 선택자와 겹치게 되는 상황이 발생하게 됩니다. 그래서 이와 같은 상황을 방지하기 위해서 id를 하나 선언하고 후순위 선택자를 사용하여 CSS를 정의하게 되면 우선순위를 확실하게 구별가능합니다.

선택자는 일반 선택자 와 복합선택자로 나눌 수 있습니다.
하지만 복합선택자 중 몇몇은 IE6에서는 작동을 하지 않는 치명적인 단점이 있습니다.
이것은 CSS의 문제가 아니라 IE6의 문제입니다.
지금도 대다수의 이용자들이 IE6를 사용하기 때문에 발생하는 문제지요.
IE7 은 많은 경우 웹표준을 준수하기 때문에 복합 선택자도 사용가능합니다.
그러니 일단  정확한 웹표준에 맞춰서 작업을 한 후 IE6 에 적용되지 않는 경우에는 IE hack이라는 편법을 동원해야만 합니다.

복합선택자는 3가지 종류가 있습니다.
---------------------------------------------------------------------------------------------------------
하위선택자                  AB                   태그 A로 감싸져 있는 태그 B를 지정
자식선택자                  A > B               태그 A 로 감싸져 있는 태그 B 중 한 단계 밑에 있는 것을 지정
인접선택자                  A + B              태그 A 와 B 가 연속적으로 나와 있는 것을 지정
---------------------------------------------------------------------------------------------------------

또한 가상 클래스 선택자와 동적선택자등이 있는데 이 부분은 실전에서 사용할 기회가 있기 때문에 다른 참조 문헌이나 인터넷에서 검색을 해 보시면 많은 내용이 나와 있다.

구글에게 물어 보세용 ^^