연락처 섹션

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

챌린지

쉬움

이 작업에서는 연락처 정보가 포함된 테이블을 .contact 섹션의 중앙에 배치합니다.

레이아웃 기술을 사용하여 테이블이 적절한 위치에 배치되고 시각적으로 매력적으로 보이도록 하세요. 아래 단계를 따르세요:

.contact 클래스를 가진 <section> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
자식 요소의 유연한 배치를 가능하게 하도록 display를 flex로 설정합니다.
요소를 세로로 쌓기 위해 flex-direction: column을 사용합니다.
콘텐츠를 가로로 중앙 정렬하기 위해 align-items: center를 적용합니다.
콘텐츠를 위한 충분한 공간을 확보하기 위해 min-height를 30vh로 정의합니다.

직접 해보기

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