활성(active) 상태의 링크에 스타일을 적용하려면 CSS의 :active 선택자를 사용합니다. :active 선택자는 사용자가 링크를 클릭하는 순간부터 마우스 버튼을 떼기 전까지의 상태를 의미하며, 이를 활용하면 클릭 순간에만 나타나는 시각적 효과를 손쉽게 구현할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
a:active {
background-color: green;
}
</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>코드 설명
위 예제에서는 a:active 선택자를 사용하여 링크가 클릭되는 순간 배경색이 초록색(green)으로 변경되도록 설정했습니다. 페이지의 링크를 마우스로 눌러 보면 클릭하는 동안에만 배경색이 적용되는 것을 확인할 수 있습니다.
참고로 :active 선택자는 링크뿐 아니라 버튼 등 다양한 요소에도 적용할 수 있으며, :hover, :visited 같은 다른 가상 클래스와 함께 사용하면 더욱 풍부한 인터랙션 효과를 만들 수 있습니다.