호버 효과

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 8번째.

:hover 의사 클래스는 사용자가 마우스를 요소 위에 올렸을 때 해당 요소의 스타일을 변경할 수 있게 해줍니다.

버튼 위에 마우스를 올렸을 때 텍스트 색상을 변경하는 간단한 예제입니다:

button {
  color: black;
}

button:hover {
  color: red;
}

이 예제에서 버튼 텍스트는 기본적으로 검은색이지만, 마우스를 올리면 텍스트가 빨간색으로 변합니다.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

마우스를 올렸을 때 스타일이 변경되어야 하는 버튼이 있습니다. 여러분의 작업은 다음과 같습니다:

사용자가 버튼 위에 마우스를 올렸을 때 :hover 가상 클래스를 사용하여 버튼의 배경색을 green으로 변경하세요.
호버 효과 동안 버튼에 박스 그림자를 적용하여 버튼이 떠 있는 것처럼 보이게 만드세요. 다음과 같이 box-shadow를 사용하세요:

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

이것은 오프셋, 블러 및 색상이 포함된 그림자를 추가합니다.

치트 시트

:hover 가상 클래스는 사용자가 요소 위에 마우스를 올렸을 때 요소의 스타일을 변경합니다:

button {
  color: black;
}

button:hover {
  color: red;
}

이 예제에서 버튼 텍스트는 기본적으로 검은색이지만, 마우스를 올리면 텍스트가 빨간색으로 바뀝니다.

직접 해보기

<html>
<head>
    <title>Hover Effects</title>
    <style>
        .hover-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <button class="hover-button">Hover over me!</button>
</body>
</html>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.