가상 클래스 선택자 - 바로 실행해보면서 배우는 HTML5/CSS3
가상 클래스 선택자
learn
Practice
learn
10 선택자(Selector)
가상 클래스 선택자

이제 마지막 선택자를 살펴봅시다. 가상 클래스 선택자(Pseudo-class Selector)는 그 이름만큼 쓰임도 특이합니다. 가상 클래스 선택자는 요소의 특별한 상태를 정의하는데 사용합니다.

먼저 가상 클래스(Pseudo-class)가 무엇인지 알아봅시다. 우리가 일반적으로 아는 클래스는 <div class="foo">, .foo{ ... }와 같이 사용하지만, 가상 클래스는 일반 클래스와는 조금 다릅니다.

스타일을 지장할 때 쓰인다는 점에선 클래스와 비슷하지만, 클래스와 달리 가상 클래스는 직접 정의할 수 없고 실제 HTML에 보이지 않습니다. 그렇기 때문에 가상 클래스(pseudo-class)라고 불립니다. 클래스와 비슷한 역할을 하지만 실제가 아닌 가상의 클래스라는 점이 핵심입니다.

이제 가상 클래스를 사용해봅시다. 선택자에 가상 클래스를 붙여 가상 클래스 선택자로 이용합니다.

가장 대표적인 가상 클래스는 링크 태그와 관련된 가상 클래스 입니다.

a:link
방문하지 않은 링크일 때
a:visited
방문한 링크일 때
a:hover
링크에 마우스를 올렸을 때
a:active선택된 링크일 때
바로 예시와 함께 살펴 보겠습니다.


a:link


방문하지 않은 링크 상태입니다. 방문하지 않은 상태의 링크에 대한 스타일을 지정할 수 있습니다.


a:visited


방문한 링크 상태입니다. 방문한 상태의 링크에 대한 스타일을 지정할 수 있습니다. 이미지에서 볼 수 있듯이, 원래는 옥색이었던 링크 색깔이 페이지를 방문한 뒤 a:visited로 정의한 초록색으로 변해 있는 것을 확인할 수 있습니다.


a:hover


링크에 마우스를 올렸을 경우 스타일을 적용할 때 사용합니다. 아래의 이미지에서 볼 수 있듯이 마우스를 올리고 있는 동안에는 배경색이 노란색으로 바뀌는 것을 확인할 수 있습니다.


a:active


선택된 링크일 경우 스타일을 적용할 때 사용합니다. 링크를 마우스 왼쪽으로 클릭하였을 때 즉 링크 태그를 선택했을 때 스타일을 정의합니다. 이미지에서도 볼 수 있듯이 클릭 시 배경색이 파란색으로 바뀝니다.

Practice

이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

learn
Practice
Q & A
Q&A forum that anyone can ask and answer.
Share your questions and answers with other students and grow together!
Registered Questions(0)