모바일 퍼스트 내비게이션

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 8번째.

모바일 우선 탐색(Mobile-first navigation)은 작은 화면을 위한 단순하고 터치 친화적인 메뉴로 시작하여, 큰 화면에 맞춰 이를 개선하는 것을 의미합니다.

기본적인 모바일 네비게이션 구조로 시작하세요: <nav> 요소 안에 버튼과 리스트를 포함하세요.

<nav class="main-nav">
  <button class="menu-toggle">Menu</button>
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

모바일 스타일을 먼저 적용하세요. 작은 화면에서는 → “메뉴” 버튼을 표시하고 목록을 숨깁니다.

.menu-toggle {
  display: block;
  //스타일 추가
}

.nav-list {
  display: none;
  //스타일 추가
}

그런 다음 더 큰 화면을 위해 미디어 쿼리를 사용하세요. 더 큰 화면에서는 → 메뉴를 상단에 가로 목록으로 표시하고 “메뉴” 버튼을 숨깁니다.

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  
  .nav-list {
    display: flex;
  }
}

이 접근 방식은 내비게이션이 모바일 기기에 먼저 최적화되도록 보장하며, 그 다음 더 큰 화면에 맞게 개선됩니다.

챌린지

쉬움

메뉴 버튼과 리스트를 포함하는 내비게이션이 있는 HTML 파일이 주어졌을 때, 현재 리스트는 항상 표시되는 상태입니다.

다음 작업을 통해 모바일 우선(mobile-first) 내비게이션 스타일을 수정하세요:

모바일 화면에서 내비게이션 리스트를 기본적으로 숨김 처리합니다.
더 큰 화면에서는 내비게이션 리스트를 표시합니다 (display: flex).

치트 시트

모바일 우선(Mobile-first) 내비게이션은 작은 화면을 위한 간단하고 터치 친화적인 메뉴로 시작하여, 큰 화면에 맞춰 이를 개선합니다.

기본적인 모바일 내비게이션 구조:

<nav class="main-nav">
  <button class="menu-toggle">Menu</button>
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

모바일 스타일링 (버튼 표시, 목록 숨김):

.menu-toggle {
  display: block;
}

.nav-list {
  display: none;
}

미디어 쿼리를 사용한 데스크톱 스타일링 (버튼 숨김, 가로 목록 표시):

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  
  .nav-list {
    display: flex;
  }
}

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Navigation</title>
  <style>
    :root {
      --primary-color: #4a6de5;
      --text-color: #333333;
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-weight: bold;
      color: var(--primary-color);
      text-decoration: none;
      font-size: 1.5rem;
    }
    
    .menu-toggle {
      display: block;
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
    
    .nav-list {
      list-style: none;
      padding: 0;
      margin: 1rem 0 0 0;
      width: 100%;
    }
  
    .nav-list li a {
      color: var(--text-color);
      text-decoration: none;
      display: block;
      padding: 0.5rem 0;
    }
    
    @media (min-width: 768px) {
      .menu-toggle {
        display: none;
      }
      
      .nav-list {
        margin: 0;
        width: auto;
      }
      
      .nav-list li {
        margin: 0 0 0 1.5rem;
      }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <nav class="nav-container">
      <a href="#" class="logo">MySite</a>
      <button class="menu-toggle">Menu</button>
      <ul class="nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>