CSS 링크 상태

인터넷에서 다양한 웹사이트를 방문할 때, 링크 위에 마우스를 올리면 보통 반응한다는 것을 눈치채셨을 거라 생각합니다. 이러한 효과는 링크의 다양한 상태에 대한 동작을 설정함으로써 얻을 수 있습니다.

예를 들어, 이렇게 - a:hover - 하면 링크 위에 마우스 커서를 올린 상태를 잡을 수 있습니다. 이 순간에, 예를 들어, 링크 색상을 변경하거나 밑줄을 제거/추가할 수 있습니다. 구조 :hover는 가상 클래스라고 불립니다. 가상 클래스는 요소의 다양한 상태를 잡을 수 있게 해줍니다.

:hover 외에도, 방문하지 않은 링크를 잡는 :link 가상 클래스와, 방문한 링크를 잡는 :visited 가상 클래스가 있습니다. 일부 사이트에서는 이것들을 사용하여 사용자에게 어디를 방문했고 어디를 방문하지 않았는지 보여줍니다. 또 다른 가상 클래스로는 :active가 있는데, 이는 다음 상태를 잡습니다: 요소를 마우스로 클릭했지만 아직 버튼을 놓지 않은 상태.

다음 예제에서 링크는 :hover 상태에서 밑줄이 제거되고, :link 상태에서는 빨간색으로, :visited 상태에서는 초록색으로, :active 상태에서는 하늘색으로 설정됩니다. 결과적으로, 처음에는 링크가 빨간색이고, 클릭한 후에는 초록색이 되며, 마우스로 클릭하고 놓지 않으면 하늘색이 되고, 마우스를 올리면 밑줄이 없는 상태가 될 것입니다:

cssa:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  text-decoration: none;
}
a:active {
  color: blue;
}

html<a href="#">link</a>

Результат: