동적 의사 클래스
동적 의사 클래스(dynamic pseudo-class)
CSS에서 사용할 수 있는 동적 의사 클래스는 다음과 같습니다.
- :link
- :visited
- :hover
- :active
- :focus
동적 의사 클래스를 사용하면 링크의 상태에 따라 각각의 스타일을 별도로 설정할 수 있습니다.
예제
<style>
a:link {color: orange;}
a:visited {color: gray;}
a:hover {color: blue;}
a:active {color: red;}
div:hover { background-color: blue; color: white; }
</style>
링크(link)의 상태
링크는 총 5가지의 상태를 가지며, 각 상태마다 별도의 스타일을 적용할 수 있습니다.
1. link : 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다.
2. visited : 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태입니다.
3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다.
4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태입니다.
5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태입니다.
예제
<style>
input { border: 3px solid #FFEFD5; transition: 0.5s; }
input:focus { border: 3px solid #CD853F; }
</style>
CSS 동적 의사 클래스(dynamic pseudo-class)
| 의사 클래스 | 설명 |
|---|---|
| :link | 사용자가 아직 한 번도 이 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 선택함. (기본 상태) |
| :visited | 사용자가 한 번이라도 이 링크를 통해서 연결된 페이지를 방문한 상태를 선택함. |
| :hover | 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 선택함. |
| :active | 사용자가 마우스로 링크를 클릭하고 있는 상태를 선택함. |
| :focus | 포커스를 가지고 있는 input 요소를 모두 선택함. |
