웹 페이지에서 링크를 클릭하는 순간의 색상을 바꾸고 싶다면 CSS의 :active 가상 클래스(선택자)를 사용하면 됩니다. :active는 사용자가 링크를 마우스로 누르고 있는 동안, 즉 활성화된 상태에 적용되는 스타일입니다.
활성 링크 색상 변경 예제
아래 코드처럼 a:active 선택자에 원하는 색상 값을 지정하면, 링크를 클릭하는 순간 해당 색상으로 변경됩니다.
<html>
<head>
<style>
a:active {
color: #FF00CC;
}
</style>
</head>
<body>
<a href="#">데모 링크</a>
</body>
</html>코드 설명
- a:active — 링크(<a> 태그)가 클릭되어 활성화된 순간에 스타일을 적용합니다.
- color: #FF00CC; — 활성 상태일 때 표시될 글자색을 지정합니다. 원하는 HEX 코드, RGB 값, 색상 이름 등으로 자유롭게 변경할 수 있습니다.
함께 알아두면 좋은 링크 관련 가상 클래스
링크의 상태별 스타일을 세밀하게 제어하려면 아래 가상 클래스들도 함께 사용해 보세요.
- :link — 아직 방문하지 않은 링크의 기본 색상
- :visited — 사용자가 이미 방문한 링크의 색상
- :hover — 마우스 커서를 링크 위에 올렸을 때의 색상
- :active — 링크를 클릭하고 있는 동안의 색상
이 네 가지 가상 클래스는 보통 LVHA 순서(:link → :visited → :hover → :active)로 작성하는 것이 권장됩니다. 순서가 잘못되면 일부 스타일이 의도대로 적용되지 않을 수 있습니다.