미디어 쿼리

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

챌린지

쉬움

이 레슨에서는 웹페이지가 다양한 화면 크기에서 보기 좋게 표시되도록 설정합니다. 화면 너비에 따라 서로 다른 스타일을 적용할 수 있게 해주는 미디어 쿼리(media queries)를 사용해 보세요.

너비가 400px보다 작은 화면을 위한 미디어 쿼리를 생성합니다. 아래 단계를 따르세요:

화면 너비가 400px 이하일 때 스타일을 적용하도록 @media (max-width: 400px)를 사용하여 CSS 규칙을 작성합니다.
.menu를 대상으로 지정하고 padding을 10px로 설정하여 더 콤팩트하게 만듭니다.
img를 대상으로 지정하고 float 속성을 none으로 설정하여 작은 화면에서 이미지과 텍스트 위로 이동하도록 합니다.
.about 내부의 img의 width를 80vw로 설정하여 작은 화면에 맞춰 조정되도록 합니다.
.contact 섹션을 대상으로 지정하고 height를 auto로 설정하여 콘텐츠에 따라 섹션이 확장되거나 축소되도록 함으로써, 다양한 화면 크기에서 모든 요소가 적절하게 보이고 정렬되도록 합니다.

이러한 변경 사항을 적용한 후, 브라우저 창의 크기를 조절하여 레이아웃이 어떻게 조정되는지 테스트해 보세요.

직접 해보기

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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>