..

Search

28) 동적 의사 클래스

동적 의사 클래스


동적 의사 클래스(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:hoverbackground-color: bluecolor: white; }

</style>

코딩연습 ▶


링크(link)의 상태

링크는 총 5가지의 상태를 가지며, 각 상태마다 별도의 스타일을 적용할 수 있습니다.

 

1. link : 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다.

2. visited : 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태입니다.

3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다.

4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태입니다.

5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태입니다.

 

:hover는 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작합니다.
:active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작합니다.

 

예제

<style>

    inputborder: 3px solid #FFEFD5; transition: 0.5s; }

    input:focus { border: 3px solid #CD853F; }

</style>

코딩연습 ▶


CSS 동적 의사 클래스(dynamic pseudo-class)

의사 클래스 설명
:link 사용자가 아직 한 번도 이 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 선택함. (기본 상태)
:visited 사용자가 한 번이라도 이 링크를 통해서 연결된 페이지를 방문한 상태를 선택함.
:hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 선택함.
:active 사용자가 마우스로 링크를 클릭하고 있는 상태를 선택함.
:focus 포커스를 가지고 있는 input 요소를 모두 선택함.

연습문제