▶ 가상 클래스 선택자(link, visited, active, hover, text-decoration)
● 가상 클래스 선택자
: 선택자라는 것은 태그, id, class등과 같이 html문서에 존재하는것들을 지정하는것입니다.
반면에, 가상클래스 선택자는 어떤상태를 의미하고 이런 상태에는 태그, id, class처럼 html문서 상에 있는 것이 아닙니다.
예를 들어서 상태를 지정하는 가상 선택자에는 hover선택자, link선택자, visited선택자, active선택자가 있습니다.
- link : 웹 문서에서 사용자가 방문하지 않았던 곳을 표시합니다.
- visited : 웹 문서에서 사용자가 방문한 곳을 표시합니다.
- hover : 웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 나타냅니다.
- active : 웹 문서에서 사용자가 링크를 클릭하는 순간을 나타냅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<style>
/* 가상 클래스 */
a:link { color: pink; text-decoration: none;}
a:visited { color: red; }
a:hover { text-decoration: overline; color:black;}
a:active { background-color:yellow; }
</style>
</head>
<body>
<h2>Pseudo Class</h2>
<p><a href="#" target="_blink">test</a>
: 마우스 이벤트에 따른 링크의 변화</p>
<p><a href="#" target="_blink">test</a>
: 마우스 이벤트에 따른 링크의 변화</p>
<hr>
link : 웹 문서에서 사용자가 방문하지 않았던 곳을 표시한다.<br>
visited : 웹 문서에서 사용자가 방문한 곳을 표시힌다.<br>
hover : 웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 나타낸다.<br>
active : 웹 문서에서 사용자가 링크를 클릭하는 순간을 나타낸다.<br>
</body>
</html>위 소스는 link, visited, hover, active를 각각 color를 다르게 줘서 테스트한 소스입니다.
아래 실행결과를 보면서 설명해드리겠습니다.
제일 왼쪽 주황색을 보면 아무것도 하지않은 기본 실행결과입니다.
두번째 초록색은 마우스포인터를 test라는 곳에 가져다 대면 검정색으로 폰트가 변경되고, text-decoration속성을 사용해서 글자 위에 선을 만들었습니다.
세번째 파란색은 test를 마우스로 클릭하고나서 즉, 방문을 했기때문에 빨강색으로 color를 변경해주었습니다.
이번에는 사용자가 링크를 클릭하는 순간 노란색으로 폰트색을 변경됬습니다.
위에 선이 그어지는 이유는 마우스포인터를 올렸기때문에 hover가 작동이 된걸 같이 확인할수있습니다.
'Dev. Front-End > CSS' 카테고리의 다른 글
| [CSS] id와 class(아이디와 클래스)의 개념 및 차이점 (0) | 2019.08.14 |
|---|---|
| [CSS] CSS의 개념이해 및 사용법 ( 간단한 실습 ) (0) | 2019.08.13 |
