아이템 배치하기

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

챌린지

쉬움

간단한 가로 내비게이션 바를 만들기 위해 flexbox를 연습해 봅시다. 아래 이미지의 디자인과 일치하도록 CSS를 사용하여 메뉴 스타일을 지정하세요.

아래 단계를 따르세요:

내비게이션 바를 flex 컨테이너로 설정하세요.
링크 사이에 간격을 추가하세요.
1. 링크를 고르게 분산시키기 위해 justify-content: space-around를 사용하세요.
내비게이션 바의 스타일을 지정하세요.
1. 배경색을 dark blue로 설정하세요.
2. 링크 주변에 여백을 만들기 위해 패딩(padding)을 추가하세요.
내비게이션 링크의 스타일을 지정하세요.
1. <a> 요소를 선택하세요.
2. 텍스트 색상을 white로 설정하세요.
3. 기본 밑줄을 제거하세요.
4. 글꼴 크기를 18px로 설정하세요.
5. 더 나은 간격을 위해 8px 15px 패딩을 추가하세요.

직접 해보기

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>