[날마다 3분 CSS] 가상클래스 :active

:active는 CSS의 가상 클래스로 웹 브라우저에서 사용자가 활성화한 요소(버튼 등)를 나타낸다. 

즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다.

( 한 요소에서 마우스를 클릭한 후 떼지 않고 꾹누르고 있으면 계속 활성화 되어있는 것이다.)

 

아래는 마우스 클릭 시 박스색깔이 파란색으로 바뀌며 넓이가 300px로 커지는 active 효과입니다.

//main.css .box2:active { width: 300px; background-color: blue; }

css 선택자뒤에 :active 붙여 코드를 작성합니다.

//main.css .box2 { width: 100px; height: 100px; margin-top:10px; background-color: orange; transition: 1s; }

.box2와 .box:active와 비교했을때 .box:active에서 변경사항인 width, background-color 값이 사용자
마우스 클릭 시 활성화되어 색깔과 모양이 변하게 된다. 

 

💫실습

- 주황색 박스 마우스로 꾹 눌러보세요!!

See the Pen active by Zookeeper0 (@zookeeper0) on CodePen.

위의 codepen의 코드와 같이 변하기전 css인 .box2의 마지막 속성으로 transition : 1s; 를 볼 수있다.
:active가상클래스 사용시 transition 코드와 함께 사용하면 자연스럽게 페이드인-아웃되는 효과를 낼 수 있어서
상당히 좋은 조합이다.( 대부분의 모양변환 가상클래스 사용시 부드러운 전환효과 제공 )