네비게이션 메뉴

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

챌린지

쉬움

이 프로젝트에서는 아름다운 폴리네시아 섬인 통가에 관한 간단한 웹페이지를 구축하고 스타일을 지정해 보겠습니다.

이 프로젝트는 실제 스타일링 기법을 적용하여 CSS를 연습하는 데 도움이 될 것입니다. 진행 과정에서 필수 레이아웃 및 반응형 디자인 개념에 집중할 것입니다. 이 프로젝트에서는 외부 CSS 파일을 사용하여 HTML 문서의 스타일을 지정합니다. HTML 파일과 이미 연결되어 있는 CSS 파일 두 가지를 볼 수 있습니다. 이 섹션을 마치면 웹페이지가 대략 다음과 같이 보일 것입니다:

다음 단계에 따라 탐색 메뉴의 스타일을 지정하세요:

.menu 클래스를 가진 요소를 선택합니다.
페이지 상단에 fixed(고정)되도록 스타일을 적용합니다.
눈에 띄도록 배경색을 설정합니다.
메뉴 내부에 여유 공간을 주기 위해 패딩(padding)을 추가합니다.
스크롤하는 동안 메뉴가 페이지 상단에 머물도록 top과 left를 0으로 설정합니다.
메뉴가 페이지의 전체 너비를 차지하도록 만듭니다.
메뉴가 항상 위에 표시되도록 z-index 속성을 100으로 설정합니다.

메뉴 내부의 링크 a의 스타일을 지정하세요:

text-decoration: none;을 사용하여 링크에서 기본 밑줄을 제거합니다.
링크를 명확하고 읽기 쉽게 만들기 위해 font-weight를 bold로 적용합니다.
링크 사이의 간격을 균등하게 벌리기 위해 마진(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>