CSS의 :active 가상 클래스(선택자)를 사용하면 사용자가 링크를 클릭하고 있는 순간, 즉 링크가 '활성화'된 상태일 때 표시되는 색상을 자유롭게 변경할 수 있습니다.
:active란 무엇인가?
:active는 사용자가 마우스 버튼으로 요소를 누르고 있는 동안에만 적용되는 CSS 가상 클래스입니다. 일반적으로 하이퍼링크(a 태그)에 많이 사용되며, 버튼이나 기타 클릭 가능한 요소에도 활용할 수 있습니다.
사용 가능한 색상 값
색상 값은 유효한 형식이라면 어떤 것이든 사용할 수 있습니다.
- 색상 이름 — 예: red, blue
- HEX 코드 — 예: #FF00CC
- RGB / RGBA — 예: rgb(255, 0, 204)
- HSL / HSLA — 예: hsl(315, 100%, 50%)
예제 코드
아래 코드를 실행하면 링크를 클릭하는 순간 분홍색(#FF00CC)으로 변하는 것을 확인할 수 있습니다.
<html>
<head>
<style>
a:active {
color: #FF00CC
}
</style>
</head>
<body>
<a href = "">My Link</a>
</body>
</html>참고: 링크 상태 선택자 작성 순서(LVHA)
여러 링크 상태 선택자를 함께 사용할 경우에는 선언 순서가 중요합니다. 일반적으로 다음과 같은 순서로 작성하는 것이 권장됩니다.
- a:link — 아직 방문하지 않은 링크
- a:visited — 이미 방문한 링크
- a:hover — 마우스를 올려놓은 링크
- a:active — 클릭 중인 링크
이 순서(LVHA)를 지키지 않으면 나중에 선언된 스타일이 앞선 스타일을 덮어써 의도한 대로 표시되지 않을 수 있습니다.