가상 클래스(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초의 전환 효과를 주어, 버튼의 색상이 부드럽게 바뀌도록 합니다.

가상 클래스(Pseudo-class)

CSS​

CSS