가상 클래스 선택자(Pseudo-Class Selector) - :active, :focus

:active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다.
 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.

:active 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :hover, :visited)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요.

 

 

See the Pen Untitled by Jeong-Dagyeong (@jeong-dagyeong) on CodePen.

input[type=button]:focus {
  background-color : blue;
}

이와같이 button에 focus인 경우, 여러 button에 tab키를 사용하여 버튼을 옮겨서 이동할 때 focus기능이 활성화 된다.