반응형
5. 가상 클래스 선택자
1. 소개
가상(pseudo) 클래스 선택자는 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼
여러 엘리먼트를 선택할 수 있다는 점에서 붙은 이름입니다. 여기서는 주요 클래스 선택자를 알아봅니다.
ex_css_5.html
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<style>
a:link
color:black;
a:visited
color:red;
a:hover
color:yellow;
a:active
color:green;
a:focus
color:white;
</style>
</head>
<body>
<ahref="https://opentutorials.org">방문함</a>
<ahref="https://a.a">방문안함</a>
</body>
</html>
실행 화면
마우스를 갖다대면 다음과 같이 노란색이 됩니다.
탭을 눌러서 포커스를 주면 다음과 같이 하얀색 박스처리가 됩니다. 이러한 처리를 하는 것을 가상 클래스 선택자라고 합니다.
링크와 관련된 가상 클래스 선택자
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다.
- color
- background-color
- border-color
- outline-color
- The color parts of the fill and stroke properties
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 9. font (0) | 2017.10.03 |
|---|---|
| 생활코딩 css 정리 - 8. color 그리고 text-align (0) | 2017.09.30 |
| 생활코딩 css 정리 - 7. font-size (0) | 2017.09.26 |
| 생활코딩 css 정리 - 6. 속성을 공부하는 방법 (0) | 2017.09.25 |
| 생활코딩 css 정리 - 4. 부모 자식 선택자 (0) | 2017.09.21 |
| 생활코딩 css 정리 - 3. 선택자의 종류 (0) | 2017.09.18 |
| 생활코딩 css 정리 - 2. 선택자와 선언 (0) | 2017.09.18 |
| 생활코딩 CSS 정리 - 1. inline과 style태그를 이용한 css 적용하기 (0) | 2017.09.14 |