1.5 의사 클래스(pseudo-class)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기

1.5 의사 클래스(pseudo-class)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기

pseudo라는 의미가 원래 “가짜의”, “모조의”, “의사(擬似)의”라는 의미이며 pseudo-class를 의사 클래스라고 합니다. 이렇게 명명된 이유는 실제로는 클래스가 아닌데 마치 HTML에서 클래스와 유사하기 때문입니다.
의사 클래스(pseudo-class)라는 개념은 1996년 CSS1 권고안(Recommendation)이 완성되었을 때 처음 대두되었고 이 때 HTML의 a 요소에 웹 사이트 방문 전, 후, 활성화를 나타내는데 사용되는
:link, :visited, :hover, :active 같은 의사 클래스(pseudo-class)를 이용한 선택자가 HTML의 a 요소에 대해서 주로 사용되었으며 이는 CSS3에서 dynamic pseudo-class로 분류하여 정의되어 있습니다.

2011년 CSS2.1(“http://www.w3.org/TR/CSS2/”) 권고안(Recommendation)에 기존의 CSS1에 포함된 dynamic pseudo-class에 :first-child pseudo-class가 추가되어 첫 번째 자식 요소(Element)를 선택하여 스타일을 적용할 수 있게 되었고 마지막으로 :lang pseudo-class를 이용하여 웹 페이지 사용 언어를 설정할 수 있도록 강화되었습니다.
그리고 2011년 9월 W3C는 CSS3 선택자(Selector)에 대한 권고안(Recommendation)을 채택하였는데 이 CSS3 선택자(Selector)에는 기존의 의사 클래스(pseudo-class)인 dynamic pseudo-class, language pseudo-class와 함께 target pseudo-class, UI element pseudo-class, structural pseudo-class가 추가되었습니다.

그러면 “왜 의사 클래스(pseudo-class)를 사용하는 것인가?”라는 의문이 들 수 있을 것입니다. 보통의 선택자(selector)를 이용하여 선택될 수 없는 HTML 문서 밖에 정보에 기초하여 요소들을 선택하는 방법을 제공하거나 보통의 선택자(selector)로 나타낼 수 없는 정보를 선택하는 방법을 제공하여 여러분이 동적으로 스타일을 적용할 수 있도록 합니다.
여러분들은 의사 클래스(pseudo-class)들을 이용해서 웹 문서 내에 존재하는 요소(Element)들의 위치, 상태에 기초하여 동적으로 스타일을 적용할 수 있도록 해 줄 있다는 것입니다.

이러한 의사 클래스(pseudo-class)들은 기본적으로 콜론(:)으로 시작되며 좌, 우에 공백을 포함하지 않는 다음과 같은 형식을 사용합니다.

selector:의사클래스이름 { property:value; property:value; …}

이제 의사 클래스(pseudo-class)를 사용하는 방법을 순서대로 구체적으로 알아봅니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.