환영 헤더

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 68번째.

챌린지

쉬움

다음으로, .welcome 클래스를 사용하여 헤더의 스타일을 지정합니다. 이 섹션은 사용자가 페이지를 방문했을 때 가장 먼저 보게 되는 부분이므로 눈에 띄어야 합니다.

.welcome 섹션이 고정된 메뉴 뒤에 숨겨져 있습니다. 이 섹션이 완전히 보이도록 아래로 밀어내야 합니다.

다음 단계를 따르세요:

CSS에서 .welcome 섹션을 선택합니다.
상단에 공간을 만들기 위해 padding-top 속성을 추가합니다.
간격이 다양한 화면 크기에 적응할 수 있도록 값을 10vh로 설정합니다.

10vh는 전체 화면 높이의 10%를 차지합니다. 이는 고정된 픽셀 값에 비해 다양한 기기에서 레이아웃을 더 유연하게 만들어 줍니다.

직접 해보기

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="menu">
            <a href="#">About</a>
            <a href="#">Experience</a>
            <a href="#">Contact</a>
        </nav>    
        <header class="welcome">
            <h1>Swim with Whales in Tonga</h1>
            <p>Experience the magic of swimming alongside majestic humpback whales.</p>
        </header>    
        <section class="about">
            <h2>About Tonga</h2>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Hawaiian_Islands_Humpback_Whale_National_Marine_Sanctuary_breaching_2018.png">
            <p>Tonga is a stunning Polynesian archipelago in the South Pacific, famous for its crystal-clear waters and vibrant marine life. From July to October, humpback whales migrate here to breed, offering a rare chance to swim with these gentle giants. Beyond whale encounters, Tonga boasts pristine beaches, lush tropical landscapes, and a rich cultural heritage. Visitors can explore traditional villages, experience authentic Tongan hospitality, and enjoy activities like snorkeling, diving, and sailing. Whether you're seeking adventure or relaxation, Tonga provides an unforgettable escape into nature’s beauty.</p>
        </section> 
        <section class="contact">
            <h2>Plan Your Adventure</h2>
            <table>
                <tr>
                    <td>Phone Number</td>
                    <td>+676 123 4567</td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td>info@tongawhales.com</td>
                </tr>
            </table>
    </section>
</body>
</html>