가이드라인

가상 클래스(Pseudo-class)

CSS 가상 클래스(pseudo-class)는 웹 페이지 요소가 특정 상태(예: 클릭, 포커스)일 경우에만 스타일을 적용합니다.

가상 클래스는 선택자 뒤에 콜론(:)을 붙여 사용하며, 자주 사용되는 가상 클래스 예시로는 :hover가 있습니다.

hover 가상 클래스는 마우스 커서가 HTML 요소 위로 올라갈 때만 적용되는 스타일을 지정합니다.

아래에서 가상 클래스 :hover를 사용한 예시를 확인해 보세요.


my-button 클래스를 가진 HTML 버튼
<html> <body> <button class="my-button">Hover Me</a> </body> </html>

CSS

my-button에 CSS 적용
.my-button { display: inline-block; padding: 10px 20px; background-color: #0000ff; color: #fff; border-radius: 5px; transition: background-color 0.3s ease; border: none; } .my-button:hover { background-color: #ff0000; }

위 CSS 코드는 .my-button 클래스를 가진 버튼(<button>) 요소를 스타일링 합니다.

my-button 클래스는 .my-button:hover 가상 클래스를 사용해 마우스 커서가 버튼 위로 올라가면 배경색을 빨간색으로 만듭니다.

참고로 transition 속성은 속성 변화에 부드러운 애니메이션을 추가하는 속성입니다.

이 예시에서는 배경색(background-color) 변경에 0.3초의 전환 효과를 주어, 버튼의 색상이 부드럽게 바뀌도록 합니다.

Mission
0 / 1

CSS 가상 클래스 사용하기

버튼에 마우스를 올렸을 때 버튼의 배경색이 빨간색(#ff0000)으로 변하도록 하려면, 아래 빈칸에 어떤 CSS 코드를 입력해야 할까요?

힌트: HTML 요소에 마우스를 올렸을 때 스타일을 지정하는 가상 클래스는 :hover입니다.

.my-button {

  background-color: #0000ff;

  color: #fff;

}


.my-button:
 {

  background-color: #ff0000;

}

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말