:active 의사 클래스란?
CSS의 :active 의사 클래스는 사용자가 요소를 활성화하는 순간, 즉 마우스 버튼을 누르고 있는 동안 해당 요소에 특별한 스타일을 적용할 때 사용합니다. 주로 링크(<a> 태그)나 버튼에 활용되며, 클릭하는 찰나의 시각적 피드백을 제공해 사용자 경험을 한층 향상시켜 줍니다.
적용할 수 있는 값은 유효한 형식이라면 어떤 색상이든 자유롭게 지정할 수 있습니다. HEX 코드, RGB, HSL, 색상 이름 등 모두 사용 가능합니다.
사용 예제
아래 예제는 링크를 누르고 있는 동안 글자 색이 분홍색(#FF00CC)으로 변경되도록 설정한 코드입니다.
<html>
<head>
<style>
a:active {
color: #FF00CC;
}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>알아두면 좋은 팁
- LVHA 선언 순서: 링크 관련 의사 클래스는
:link→:visited→:hover→:active순서로 작성해야 각 상태가 의도대로 정상 동작합니다. - 모바일 환경: 터치 기기에서는 손가락으로 화면을 누르고 있는 동안
:active상태가 적용됩니다. - 적용 대상: 링크뿐만 아니라 버튼, 목록 항목 등 페이지 내 모든 요소에 활용할 수 있습니다.