Viewport 태그

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

챌린지

쉬움

다양한 화면 크기에서 웹페이지가 반응형으로 동작하게 하려면, HTML 문서의 <head> 섹션 안에 viewport meta tag를 추가해야 합니다.

다음 단계를 따르세요:

<head> 섹션 안에 다음 <meta> 태그를 추가하세요:

<meta name="viewport" content="width=device-width, initial-scale=1">

이 태그는 웹페이지가 다양한 기기에서 적절한 비율로 조절되도록 보장합니다.
변경 사항을 저장하고 브라우저 창의 크기를 조절할 때 페이지가 어떻게 조정되는지 테스트해 보세요.

직접 해보기

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
<body>
    <nav class="menu">
        <a href="#about">About</a>
        <a href="#experience">Experience</a>
        <a href="#contact">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>