의사 클래스(pseudo-class)

---

• CSS에서 의사 클래스란 선택하고자 하는 HTML 요소의 특별한 상태(state)를 명시할 때 사용한다.

• 의사 클래스는 HTML 선택자 뒤에 콜론(:)으로 연결한다.

• 의사 클래스의 이름은 대소문자를 구분하지 않는다.

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

---

1) :link

• 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태를 나타낸다.

기본 문법

a:link {
    /* 속성 */
}

2) :visited

• 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태를 나타낸다.

기본 문법

a:visited {
    /* 속성 */
}

3) :hover

• 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 나타낸다.

기본 문법

a:hover {
    /* 속성 */
}

4) :active

• 사용자가 마우스로 링크를 클릭하고 있는 상태를 나타낸다.

기본 문법

a:active {
    /* 속성 */
}

5) :focus

• 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus) 되어 있는 상태를 나타낸다.

• :active는 마우스 클릭이 끝나는 순간 원래대로 되돌아가지만 :focus는 포커스를 잃지 않는 이상(다른 곳을 클릭하지 않는 이상) 원래대로 되돌아가지 않는다.

기본 문법

a:focus {
    /* 속성 */
}