링크 상태별 스타일과 식별 가능성을 설계합니다.
링크에는 :link, :visited, :hover, :focus-visible, :active 상태가 있습니다. 색상만으로 일반 텍스트와 구분하지 말고 밑줄 같은 추가 단서를 유지하는 것이 좋습니다.
이번 예제의 출발점은 a:hover { ... } a:focus-visible { ... }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 Tab과 마우스로 링크 상태를 각각 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
hover만 꾸미고 keyboard focus를 빼면 키보드 사용자에게 상태가 보이지 않습니다.
직접 바꿔보세요Tab과 마우스로 링크 상태를 각각 확인하세요.