[css] CSS 의사 클래스

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다.
사용자의 action에 따라 스타일에 변화를 주고 싶을 때 사용한다.

// 예시
// <a>태그와 함께 active 의사 클래스를 사용하였다.
a:active {
  color: red;
}

의사클래스 종류

1. :link

• :link CSS 의사 클래스는 아직 방문하지 않은 요소를 나타냅니다. href 속성을 가진 a, area, link 태그 중 방문하지 않은 모든 요소를 선택합니다.

2. :visited

사용자가 방문한 적이 있는 링크를 나타냅니다. :visited가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.

3. :active

(계산기 목업 만들때 버튼에 사용한 의사 클래스)

• 사용자가 마우스 버튼을 누르는 순간부터 떼는 시점까지 요소가 선택된다.
• :active 의사 클래스는 대개 a태그, button태그와 함께 사용합니다.

4. :hover

• 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택된다.
• 터치 스크린에서는 문제가 많다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 한다.

5. :focus

• 양식의 입력 칸 등 포커스를 받은 요소를 나타낸다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동한다.

LVHA 순서

링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라 코드를 작성해주어야 한다.