pseudo(수도 가상, 모조의, 가짜의)
수도 클래스 selector = 가상 selector
Class 선택자는 Id 선택자처럼 한가지만 선택하는 것이 아니고,
Tag 선택자는 모든 태그에 대해서만 선택하는 아주 거친 선택자는 아닌 선택자입니다.
Class 선택자처럼 동작하지만 Class 선택자는 아니고, 아주 특수한 선택들을 하게 하는 선택자이고,
요소(element)의 상태에 따라서 요소를 선택하는 선택자입니다.
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: purple;
}
a:visited {
color: yellow;
}
a:hover {
color: red;
}
a:active {
color: green;
}
a:focus {
color: black;
}
</style>
</head>
<body>
<a href="https://openttorials.org">방문함</a>
<a href="https://a.a">방문안함</a>
</body>
</html>- link
방문하지 않은 곳을 나타내는 수도 클래스 - visited
방문한 곳을 나타내는 수도 클래스 - hover
마우스를 올렸을 때 선택되는 수도 클래스 - active
클릭 했을 때 실행되는 수도 클래스 - focus
tap을 사용해서 focusing 되었을 때 실행되는 수도 클래스
focus 수도 클래스는 CSS에서 가장 아래에 사용하는 것이 바람직 합니다. - 마치 class 선택자처럼 동작해서 각각의 요소(element)의 상태에 따라서 선택자가 선택 되기도 하고, 선택 되지 않기도 하는 선택자
- 선택자가 동급일 경우 CSS는 뒤쪽에 있는 선언을 선택합니다.
- visited는 보안적인 문제로 사용할 수 있는 속성들이 제한적입니다. (참고)
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] 속성을 공부하는 방법 (0) | 2022.01.22 |
|---|---|
| [생활코딩] 다양한 선택자들 (0) | 2022.01.21 |
| [생활코딩] 선택자 공부 팁 (0) | 2022.01.20 |
| [생활코딩] 부모 자식 선택자 (0) | 2022.01.20 |
| [생활코딩] 선택자의 종류 : 클래스 선택자 (0) | 2022.01.19 |
댓글