링크 상태별 스타일과 식별 가능성을 설계합니다.
링크에는 :link, :visited, :hover, :focus-visible, :active 상태가 있습니다. 색상만으로 일반 텍스트와 구분하지 말고 밑줄 같은 추가 단서를 유지하는 것이 좋습니다.
링크는 초록 글자에 2px 두께의 밑줄을 글자에서 3px 띄워 긋습니다. 마우스를 올리면 a:hover가 color만 갈색으로 바꾸는데, 밑줄 색을 따로 정하지 않았으므로 밑줄도 글자색을 따라 함께 바뀝니다. Tab으로 링크에 도착하면 a:focus-visible이 노란 외곽선을 둘러 키보드 위치를 보여 줍니다.
:visited에는 개인정보 보호를 위해 color, background-color, border-color처럼 색과 관련된 속성만 적용됩니다. 방문한 링크의 글자 크기나 배경 이미지는 바꿀 수 없고, 스크립트로 계산된 스타일을 읽으면 방문하지 않은 상태의 값이 돌아옵니다.
hover만 꾸미고 keyboard focus를 빼면 키보드 사용자에게 상태가 보이지 않습니다.
직접 바꿔보세요Tab과 마우스로 링크 상태를 각각 확인하세요.