복습 챌린지

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

챌린지

쉬움

이번 요약 챌린지에서는 지금까지 배운 모든 대화형 의사 클래스(pseudo-classes)를 결합하여 완전히 대화형인 내비게이션 버튼을 만들어 보겠습니다.

여러분의 과제는 주어진 HTML 코드에 다음과 같은 동작을 스타일링하는 것입니다:

button 위에 마우스를 올렸을 때(hover), green background color로 변경되고 font size of 20px를 가져야 합니다.
input field에 포커스가 되었을 때(클릭하거나 입력 중일 때), yellow background color와 black border를 가져야 합니다. 테두리 두께와 스타일은 원하는 대로 설정할 수 있으며, 이에 대한 구체적인 요구 사항은 없습니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <title>Recap Challenge</title>
    <style>
        /* General page styling */
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f0f8ff;
        }
        input {
            padding: 8px;
            font-size: 16px;
            border: 2px solid #ccc;
        }
        a {
            display: inline-block;
            margin-top: 10px;
            color: #0077cc;
            text-decoration: none;
        }
        /* Write your CSS here */

    </style>
</head>
<body>
    <h1>Join the Jungle Adventure!</h1>
    <p>Ready to embark on an epic journey? Sign up below:</p>

    <button>Start Adventure</button>

    <br><br>

    <input type="text" placeholder="Enter your explorer name">

    <br><br>

    <a class="more" ref="#">Learn more about the adventure</a>
</body>
</html>