'모바일 퍼스트'의 의미

Coddy HTML 여정의 실전 프론트엔드 섹션에 포함된 레슨. 35개 중 6번째.

모바일 우선은 먼저 모바일 기기에 맞춰 웹사이트를 만든 다음, 더 큰 화면에 맞게 점진적으로 개선하는 디자인 전략입니다.
핵심은 이제 대부분의 사용자가 휴대전화로 웹을 탐색하므로, 작은 화면부터 시작하면 대다수 방문자에게 사이트가 잘 작동한다는 것입니다.

먼저 모바일 스타일을 작성하세요:

body {
  font-size: 16px;
  padding: 10px;
}

그런 다음 미디어 쿼리를 사용해 더 큰 화면에 맞게 디자인을 조정하세요:

/* 너비가 768px보다 큰 기기에 적용되는 스타일 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

이 접근 방식은 먼저 작은 화면에서 사이트가 원활하게 작동하도록 하고, 그다음 더 큰 기기를 사용하는 사람들의 경험을 향상합니다.

챌린지

쉬움

간단한 내비게이션 메뉴가 있는 HTML이 주어집니다. 모바일 우선 접근 방식을 사용하여 스타일을 지정하세요.

1. 모바일 스타일 먼저

각 메뉴 항목이 컨테이너의 전체 너비를 차지하도록 하세요(세로로 쌓이도록).
링크가 전체 너비를 차지하도록 display: block으로 설정하세요. 나머지 스타일(색상, 테두리 등)은 원하는 대로 지정하면 됩니다. 아래 예시 이미지와 같이 보일 수 있습니다.

2. 더 큰 화면을 위한 스타일

min-width: 768px인 화면을 위한 미디어 쿼리가 이미 제공되어 있습니다.
미디어 쿼리 안에서 .menu에 display: flex를 적용하여 메뉴 레이아웃을 가로로 바꾸세요.
아래 예시 이미지처럼 메뉴 항목(.menu li)마다 margin-right를 추가해 항목 사이에 간격을 두세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <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>
</body>
</html>