link 스타일링(visited, focus, hover)

링크는 link, visited, focus, hover, active 가상 클래스와 함께 사용하면 각 상태별 스타일링을 할 수 있다.

ex)

a:link

a:visited

a:focus

focus는 링크를 클릭했을 때 뿐만 아니라 키보드 탭으로 특정 위치로 이동했을 때에도 해당하는 상태이다. 따라서 키보드로 웹사이트를 사용하는 사람들에게 편리한 기능이다. 접근성 문제로 키보드로 웹사이트를 사용하는 사람들이 분명 있으니
✨ focus 상태일 때의 스타일링을 꼭 하기.

hover와 focus 상태를 둘 다 스타일링할 때는 hover를 아래에 쓰기

a {
	color: yellow;
}

a:hover {
	color: pink;
}

a:focus {
	color: blue;
}

이렇게 적으면 키보드 탭으로 링크로 이동한 상태에서(focus) 마우스를 갖다 댔을 때 pink로 바뀌지 않고 여전히 파란 색이다. 왜냐하면 hover이면서 동시에 focus 상태이기 때문이다. css는 더 아래쪽에 쓴 코드를 우선적으로 적용하기 때문에 링크가 파란색이 된다.

마찬가지로, a 스타일링 코드를 맨 밑에 놓으면 어떤 상태든 다 노랑색이 돼 버린다.

active 상태도 있으나 클릭하는 찰나의 순간에 해당하므로 링크에는 별로 쓸 일이 없는 것 같다.

✨ 링크를 스타일링할 때 이렇게 상태별로 색깔이 바뀌게 해서 사용자가 링크와 상호작용할 수 있다는 걸(ex)클릭) 분명하게 알 수 있게 해야 한다.

링크에 마우스를 댔을 때 커서가 손 모양으로 바뀌는 걸로는 충분하지 않다.

hover, focus 시에 색깔이 바뀌게 해야 한다.(hover과 focus 상태를 같이 선택해서 두 개를 같은 색으로 설정하는 방법도 괜찮다!)

사용자는(우리 모두) 마우스를 갖다 대거나 키보드 탭을 했을 때 색깔이 바뀔 거라고 기대한다. 그렇게 사용해 왔기 때문에.

그리고 링크의 text-decoration(기본 밑줄)은 그대로 두고, 만약 text-decoration을 없앴다면 이게 링크라는 걸 분명하게 알 수 있게끔 해야 한다.