CSS :active 가상 클래스 완벽 가이드 – 클릭하는 순간 스타일 적용하기

웹사이트를 디자인하다 보면 사용자가 요소를 활성화하는 순간에만 특정 스타일을 적용하고 싶은 경우가 있습니다. 예를 들어, 버튼이나 링크를 클릭했을 때 색상이 바뀌도록 만들고 싶을 수 있죠.

바로 이럴 때 CSS :active 가상 클래스가 유용합니다. :active 가상 클래스를 사용하면 사용자가 활성화한 요소를 선택하고, 해당 요소에 원하는 스타일을 적용할 수 있습니다.

이 글에서는 예제와 함께 CSS 가상 클래스의 기본 개념과 :active 가상 클래스를 코드에 적용하는 방법을 살펴봅니다. 끝까지 읽으면 :active 가상 클래스를 능숙하게 활용할 수 있게 될 것입니다.

CSS 가상 클래스(Pseudo-class)란?

CSS에서 셀렉터(selector)는 스타일을 적용할 대상 요소를 선택하는 데 사용됩니다. 예를 들어, 웹 페이지의 모든 <h1> 태그나 <select> 태그를 선택한 뒤, 그 요소들에 일괄적으로 스타일을 적용할 수 있습니다.

하지만 웹사이트를 스타일링할 때는 요소가 특별한 상태에 있을 때만 스타일을 적용하고 싶은 경우가 많습니다. 사용자가 클릭했을 때나 마우스 포인터를 올렸을 때처럼 말이죠. 이럴 때 필요한 것이 바로 가상 클래스입니다.

가상 클래스는 셀렉터에 추가하는 키워드로, 특정 상태에 있는 요소를 선택할 수 있게 해줍니다.

이 글에서는 여러 가상 클래스 중에서도 :active 가상 클래스에 집중해서 다뤄보겠습니다.

CSS :active 가상 클래스

:active 가상 클래스는 사용자가 활성화하고 있는 요소를 선택할 수 있게 해줍니다. CSS 관점에서 '활성화(activating)'란 사용자가 마우스 버튼을 눌러 요소를 클릭하는 순간을 의미합니다.

:active 가상 클래스는 주로 <a> 태그와 <button> 요소와 함께 사용됩니다. 예를 들어, 링크를 클릭하면 글자색이 빨간색으로 바뀌게 하거나, 버튼을 클릭하면 배경색이 연한 파란색으로 변하도록 만들 수 있습니다.

사용자가 클릭을 멈추면 요소는 더 이상 '활성화' 상태가 아닙니다. 따라서 클릭이 끝난 요소는 :active 셀렉터에 의해 더 이상 선택되지 않습니다.

CSS :active 예제

그럼 두 가지 예제를 통해 :active 가상 클래스의 활용법을 하나씩 살펴보겠습니다.

예제 1: 활성화된 링크 스타일링

펜실베이니아주 필라델피아에 위치한 카드 게임 동아리 '위저즈 오브 더 보즈(Wizards of the Boards)' 웹사이트를 디자인한다고 가정해 보겠습니다. 우리는 동아리 회원들이 즐기는 카드 게임 목록을 보여주는 페이지로 연결되는 링크가 포함된 '소개(About)' 페이지를 만드는 임무를 맡았습니다.

기본적으로 이 링크는 연한 파란색으로 표시되어야 하고, 링크를 클릭하는 동안에는 글자색이 주황색으로 바뀌어야 합니다. 이 작업은 :active 가상 클래스로 간단히 구현할 수 있습니다. 링크 클릭 시 글자색을 변경하는 코드는 다음과 같습니다.

<html>
<p>위저즈 오브 더 보즈(Wizards of the Boards)는 펜실베이니아주 필라델피아에 기반을 둔 카드 게임 동아리입니다. 2004년 마이클 존슨(Michael Johnson)과 가브리엘라 파텔(Gabriella Patel)이 설립한 이 동아리는 모든 카드 게임 플레이어에게 열려 있습니다. 동아리는 매주 월요일과 금요일 두 번 모여 회원들이 즐기는 최신 카드 게임 소식을 나누고, 좋아하는 게임으로 몇 판 대결을 벌입니다.
위저즈 오브 더 보즈에서 하는 게임이 궁금하다면 <a href="/games.html">여기를 클릭하세요</a>.</p>
</html>

<style>
a {
	color: lightblue;
}

a:active {
	color: orange;
}
</style>

코드 실행 결과는 다음과 같습니다. CSS :active 가상 클래스 완벽 가이드 – 클릭하는 순간 스타일 적용하기 위 코드 편집기의 버튼을 눌러 HTML/CSS 코드의 실행 결과를 직접 확인해 보세요.

HTML 파일에서는 <p> 태그로 위저즈 오브 더 보즈 동아리의 연혁을 담은 단락을 정의했습니다. 이 <p> 태그 안에는 'games.html' 페이지로 연결되는 <a> 태그가 있으며, 사용자가 '여기를 클릭하세요' 텍스트를 클릭하면 해당 링크가 작동합니다.

CSS 코드에는 두 가지 스타일 규칙을 지정했습니다. 첫 번째 규칙은 모든 <a> 태그의 글자색을 연한 파란색(lightblue)으로 설정합니다. 두 번째 규칙은 :active 셀렉터를 사용해 활성화된 <a> 태그의 글자색을 주황색(orange)으로 변경합니다. 즉, 사용자가 링크를 클릭하고 있는 동안에만 링크 색상이 바뀌는 것입니다.

예제 2: 활성화된 버튼 스타일링

이번에는 위저즈 오브 더 보즈 동아리에 가입 의사를 전달할 수 있는 폼을 작업하고 있다고 가정해 보겠습니다.

폼 마지막 부분에는 '지원 의사 제출하기'라는 문구가 담긴 버튼을 만들려고 합니다. 이 버튼을 클릭하면 버튼 주위에 3px 두께의 주황색 테두리가 나타나야 합니다.

다음 코드로 이 버튼을 만들 수 있습니다.

<html>
<button>지원 의사 제출하기</button>
</html>

<style>
button:active {
	border: 3px solid orange;
}
</style>

코드를 하나씩 살펴보겠습니다. HTML 파일에서는 <button> 태그로 버튼을 정의했으며, 이 버튼 안에는 '지원 의사 제출하기'라는 텍스트가 들어 있습니다.

CSS 스타일시트에는 사용자가 버튼을 활성화했을 때 적용되는 규칙을 하나 정의했습니다. 이 규칙은 버튼 주위에 3px 두께의 실선(solid) 테두리를 만듭니다. :active 셀렉터를 사용했기 때문에 이 규칙은 버튼이 활성화된 상태일 때만 적용됩니다.

따라서 버튼을 클릭하면 주황색 테두리가 나타나고, 클릭을 멈추는 즉시 테두리가 사라집니다.

알아두면 좋은 팁

:active는 :hover처럼 다른 가상 클래스와 함께 자주 사용됩니다. 이때 선언 순서가 중요합니다. 링크 관련 가상 클래스는 :link → :visited → :hover → :active 순서(LVHA 순서)로 작성해야 의도한 대로 동작합니다.

또한 스마트폰이나 태블릿처럼 마우스가 없는 환경에서는 :active가 손가락으로 화면을 터치하는 짧은 순간에만 적용되며, 기기나 브라우저에 따라 동작 방식이 조금씩 다를 수 있다는 점도 기억해 두세요.

마무리

CSS :active 가상 클래스를 사용하면 '활성화' 상태에 있는 요소를 선택할 수 있습니다. 활성화된 요소를 선택한 후에는 해당 요소에 하나 이상의 스타일을 적용할 수 있습니다.

:active 가상 클래스는 주로 <a> 태그와 <button> 태그와 함께 사용되며, 각각 링크나 버튼이 클릭되는 순간 발동하는 인터랙티브 효과를 만드는 데 활용됩니다.

이 글에서는 CSS 가상 클래스의 기본 개념과 :active 가상 클래스의 사용법을 예제와 함께 살펴봤습니다. 이제 여러분도 :active 가상 클래스를 전문가처럼 활용할 준비가 되었습니다.