CSS의 :active 선택자는 사용자가 링크를 클릭하는 순간, 즉 마우스 버튼을 누르고 있는 동안 활성화된 상태의 링크에 특별한 스타일을 적용할 때 사용합니다. 이를 활용하면 사용자에게 즉각적인 시각적 피드백을 제공하여 더 나은 사용자 경험을 만들 수 있습니다.
:active 선택자의 동작 원리
:active 상태는 요소가 실제로 '활성화'되는 아주 짧은 순간에만 적용됩니다. 일반적으로 마우스 버튼을 누르는 순간부터 떼는 순간까지 유지되며, 버튼을 놓으면 해당 스타일은 사라집니다.
아래 예제 코드를 실행하고 링크를 클릭해 보면, 클릭하는 동안 링크의 배경색이 주황색(orange)으로 변경되는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
a:active {
background-color: orange;
}
</style>
</head>
<body>
<a href = "https://qries.com">Welcome to Qries</a>
<p>Click on the above link to see the effect.</p>
</body>
</html>알아두면 좋은 팁
:active 선택자는 링크(<a>)뿐만 아니라 버튼(<button>) 등 다양한 요소에도 적용할 수 있습니다. 또한 :link, :visited, :hover 같은 다른 링크 관련 가상 클래스와 함께 사용할 경우, CSS 명시도 충돌을 피하기 위해 LVHA 순서(:link → :visited → :hover → :active)대로 작성하는 것이 좋습니다.