Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS :active 가상 클래스 완벽 가이드 – 문법과 실전 예제 총정리

가상 클래스(Pseudo Class)는 요소나 CSS 선택자의 다양한 상태를 표현하기 위해 사용됩니다. 그중에서도 :active 가상 클래스는 요소가 활성화된 상태, 즉 사용자가 마우스로 클릭하고 있는 순간을 나타냅니다.

이 가상 클래스는 주로 링크나 버튼처럼 클릭할 수 있는 요소에 적용되며, 링크에 사용하면 해당 링크가 클릭되는 동안 지정된 스타일이 적용됩니다.

문법(Syntax)

a:active { color:green; }

아래 예제들을 통해 :active 가상 클래스의 실제 활용 방법을 다양한 시나리오별로 살펴보겠습니다.

예제 1: 링크 색상 변경

<html>
<head>
   <style>
      a:active { color:green;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

설명

링크는 평소에는 기본 링크 색상(파란색)으로 표시되지만, 마우스로 클릭하고 있는 동안에는 글자색이 초록색으로 변경됩니다.

예제 2: 링크 글자 크기 변경

<html>
<head>
   <style>
      a:active {font-size:20px;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

설명

링크를 클릭하는 동안 글자 크기가 20px로 커지는 효과를 확인할 수 있습니다.

예제 3: 페이지 전체 배경색 변경

<html>
<head>
   <style>
      body:active {
         background: seagreen;
      }
   </style>
</head>
<body>
<div>click anywhere in this window</div>
</body>
</html>

설명

화면의 아무 곳이나 클릭하고 있는 동안 페이지 전체 배경색이 시그린(seagreen)으로 변경됩니다.

예제 4: 버튼 색상 변경

<html>
<head>
   <style>
      #thisButton:active { color: red}
   </style>
</head>
<body>
   <button id="thisButton">Click Me!!</button>
</body>
</html>

설명

버튼을 클릭하는 동안 버튼 텍스트의 글자색이 빨간색으로 변경됩니다.

참고 사항

:active는 보통 :link, :visited, :hover 같은 다른 링크 관련 가상 클래스와 함께 사용됩니다. 이때 CSS 선언 순서에 따라 적용 우선순위가 달라지므로, 일반적으로 :link → :visited → :hover → :active(LVHA) 순서로 작성하는 것이 권장됩니다.

브라우저 호환성

ChromeFirefoxEdgeIESafariOpera
11Yes415