소개 섹션

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

챌린지

쉬움

다음으로, 모든 화면 크기에서 멋지게 보이도록 유동형 레이아웃(fluid layouts)과 가변 이미지(flexible images)를 사용하여 About 섹션의 스타일을 지정해 보겠습니다.

여러분의 과제는 about 클래스를 가진 섹션에 유동형 레이아웃 기술과 가변 이미지를 적용하여 반응형으로 만드는 것입니다. 아래 단계를 따르세요:

1. 섹션 컨테이너 스타일 지정

about 클래스를 가진 <section> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
내부에 공간을 만들기 위해 패딩(padding)을 추가합니다.
섹션이 너무 넓게 늘어나는 것을 방지하기 위해 max-width를 설정합니다.

2. 텍스트 스타일 지정

h2 요소를 대상으로 하는 CSS 규칙을 작성하고 색상을 설정합니다.
p 요소를 대상으로 하는 CSS 규칙을 작성하고 가독성 좋은 텍스트 색상을 적용합니다.

3. 이미지 스타일 지정

img 요소를 대상으로 하는 CSS 규칙을 작성합니다.
반응형으로 만들기 위해 width를 40vw로 설정합니다.
텍스트 옆에 배치하기 위해 float: right;를 사용합니다.
이미지 주변에 간격을 만들기 위해 10px 여백(margin)을 추가합니다.

직접 해보기

<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>