css 마우스 클릭 효과 - active

CSS에서는 요소를 마우스로 클릭할 때 시각적인 효과를 적용할 수 있습니다. CSS의 Active 효과에 대해 알아보고, 실제 예시를 통해 설명하겠습니다.

 

 

Active 효과란?

Active 효과는 사용자가 요소를 마우스로 클릭하는 동안 적용되는 스타일을 의미합니다. 클릭된 요소에 특정 스타일을 적용함으로써 사용자에게 시각적인 피드백을 제공할 수 있습니다.

 

 

Active 효과 적용 방법

Active 효과를 적용하기 위해서는 다음과 같은 CSS 선택자와 속성을 사용할 수 있습니다.

 

선택자:active {
	/* 스타일 속성 */
}

 

위 코드에서 선택자 부분은 클릭되는 요소를 선택하는 CSS 선택자입니다. :active는 클릭된 상태일 때 적용될 스타일을 지정하는 의사 클래스입니다.

 

 

Active 효과 예시

아래는 버튼 요소를 클릭할 때 Active 효과를 적용하는 예시입니다.

 

<button class="btn">클릭</button>

 

.btn:active {
    background-color: red;
    color: white;
}

 

위 코드에서는 btn 클래스가 지정된 버튼 요소를 클릭할 때, 배경색을 빨간색으로, 글자색을 흰색으로 변경합니다. 이를 통해 클릭한 순간 사용자에게 시각적인 피드백을 제공할 수 있습니다.

 

 

결론

CSS의 Active 효과는 요소를 마우스로 클릭할 때 적용되는 시각적인 효과를 구현하는 방법입니다. :active 의사 클래스를 사용하여 클릭된 요소에 스타일을 적용할 수 있습니다. 이를 활용하여 사용자에게 클릭 동작에 대한 피드백을 제공할 수 있습니다.