lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<html>
  <body>
    <button class="my-button">Hover Me</a>
  </body>
</html>

# 가상 클래스(Pseudo-class)

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

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

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

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

<br />

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

<br />

## CSS

```css title="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초의 전환 효과를 주어, 버튼의 색상이 부드럽게 바뀌도록 합니다.

### CSS 가상 클래스 사용하기

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

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