CSS 가상 클래스 반응 선택자 (:hover, :active 등)

웹 페이지에서 사용자가 요소를 마우스 포인터로 올리거나 또는 클릭을 하게 되면 특정 동작이 발생하는데 해당 시점에 원하는 스타일을 변경할 수 있습니다. 그럴 경우에 의사 클래스(가상 클래스) 선택자를 사용하시면 됩니다. 그럼 가상 클래스 중에서 사용자 동작에 반응하는 선택자에 대해서 알아보죠.

CSS 가상 클래스 반응 선택자

1. 가상 클래스 중에서 자주 사용하는 반응 선택자

종류	설명
:link	방문하지 않은 링크에 스타일 적용
:visited	방문한 링크에 스타일 적용
:hover	마우스를 링크에 올려 놓을때 스타일 적용
:active	마우스를 클릭 했을때 스타일 적용
:focus	해당 요소에 초점이 맞추어 질때 스타일 적용

☞ a 태그는 다른 텍스트와 구분을 하기 위해서 텍스트에 파란색 밑줄이 생깁니다(:link). 그리고 마우스를 올려(:hover) 클릭(:active)을 하게 되면 방문한 사이트(:visited)로 글자색이 자주색으로 변경이 됩니다. 그런데 웹 페이지가 깔끔하지 않기 때문에 대부분 CSS를 사용하여 변경을 합니다.

2. 사용 예제

<!DOCTYPE html>
<html>
<head>
<title>반응 선택자</title>
<style>
* { font-size: 30px; }

/* 방문하지 않는 링크와 방문한 링크 적용 */
a:link, a:visited {
     color: black;
     text-decoration: none;   /* 밑줄 없애기 */
}
/* 마우스를 올리거나 포커스된 경우 */
a:hover, a:focus {
     color: red;
}
/* 마우스를 클릭한 경우 */
a:active {
     color: blue;
}
</style>
</head>
<body>
     <a href="#">BlueShare 블로그</a>
</body>
</html>

3. 실행 결과 화면