Hover, Active, Focus, Disabled, Selected, Visited, UI 상태 6종

한 줄로

인터랙티브 요소의 6가지 상태입니다. 각각 CSS pseudo-class로 표현 가능합니다.

6가지 상태

1. Hover (:hover)

마우스 커서가 위에 있을 때입니다. Bill Atkinson의 MacPaint(1984)에서 처음 등장했습니다. 모바일에는 없습니다 (터치 디바이스).

2. Active (:active)

누르는 순간입니다. 클릭이 일어나는 짧은 시간입니다. 사용자에게 "눌렸음"의 피드백을 줍니다.

3. Focus (:focus)

키보드로 Tab해서 도달한 상태입니다. 접근성의 핵심입니다. focus indicator (보통 파란 outline)를 제거하면 안 됩니다.

4. Disabled

동작 불가입니다. 회색 처리에 cursor: not-allowed를 더합니다. 사용자에게 "왜 안 되는지" 설명이 필요합니다.

5. Selected

다중 선택에서 선택된 상태입니다. 체크박스, 라디오 버튼, 카드 선택.

6. Visited (:visited)

이미 방문한 링크입니다. 보통 보라색입니다. 1993년 Mosaic 브라우저가 표준화했습니다. 검색 결과에서 "이미 본 페이지"를 구분합니다.

CSS 예시

.button:hover { background: #eee; }
.button:active { transform: scale(0.95); }
.button:focus-visible { outline: 2px solid blue; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.link:visited { color: purple; }

접근성

:focus-visible는 2021년 표준화된 새 pseudo-class입니다. 마우스 클릭 시에는 안 나오고 키보드 사용 시에만 focus indicator를 표시합니다. 디자인과 접근성의 절충점입니다.

바이브 메이커가 챙길 한 가지

focus-visible를 모든 인터랙티브 요소에 정의합시다. 키보드 사용자의 10% 이상이 본인 사이트를 그렇게 씁니다. 보이지 않는 사용자입니다.

관련

Affordance · Signifier · ARIA