CSS의 pseudo class

CSS를 이용해서 간단하게 문서를 더 생동감있게 만들 수 있다.

:hover

마우스를 올려 놓았을 때 상태를 변화시킨다.

button:hover {
  background-color: red;
}

• 위와 같은 코드는 마우스를 올렸을 때 버튼의 색을 붉은색으로 바꾼다.

:active

이 가상 클래스는 마우스가 클릭되는 등 활동이 일어났을 때 사용됩니다.

button:active {
  background-color: blue;
  box-shadow: 3px 5px black;
  transform: translate(6px, 3px);
}

• 위의 코드는 버튼을 클릭했을 때 버튼의 색을 바꾸고 눌리는 느낌을 주며 그림자를 만듭니다.

:visited

이 가상클래스는 a 태그와 함께 쓰이며 사용자가 방문했던 링크를 나타낼 수 있습니다.

a:visited {
  color: pink;
}

• 위의 코드는 링크를 방문하면 링크의 색깔을 분홍색으로 바꾼다.

:link

link 가상클래스는 아직 방문하지 않은 a 태그에 CSS 설정을 할 수 있게 한다.

a:link{
  color: tomato;
}

• 위의 코드는 아직 방문하지 않은 링크가 있다면 토마토 색을 띄게 한다.

• 가상클래스는 띄어쓰기 없이 선택자와 써야 한다.
  ex) a:link { }

참고 문서 : https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes