'모바일 퍼스트'의 의미

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

모바일 퍼스트(Mobile-first)는 웹사이트를 모바일 기기용으로 먼저 구축한 다음, 더 큰 화면에 맞춰 점진적으로 향상시키는 디자인 전략입니다.
주요 개념은 현재 대부분의 사용자가 휴대폰으로 웹을 탐색하므로, 작은 화면부터 시작하는 것이 대다수의 방문자에게 사이트가 잘 작동하도록 보장한다는 것입니다.

모바일 스타일 작성부터 시작해 보겠습니다:

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

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

/* 768px보다 넓은 기기를 위한 스타일 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

이 방식은 사이트가 작은 화면에서 먼저 잘 작동하도록 보장한 다음, 더 큰 기기를 사용하는 사용자들을 위해 경험을 향상시킵니다.

챌린지

쉬움

간단한 내비게이션 메뉴가 포함된 HTML이 제공됩니다. 여러분의 작업은 모바일 퍼스트(mobile-first) 방식을 사용하여 스타일을 지정하는 것입니다.

1. 모바일 스타일 우선 적용

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

2. 더 큰 화면 스타일

min-width: 768px 화면을 위한 미디어 쿼리가 이미 제공되어 있습니다.
그 내부에서 .menu에 display: flex를 사용하여 메뉴 레이아웃을 가로로 변경합니다.
메뉴 항목 사이의 간격을 조정하여 아래 예시 이미지와 일치하도록 만듭니다.

치트 시트

모바일 퍼스트(Mobile-first)는 웹사이트를 모바일 기기용으로 먼저 구축한 다음, 더 큰 화면에 맞춰 점진적으로 기능을 향상시키는 디자인 전략입니다.

먼저 모바일 스타일을 작성하는 것부터 시작하세요:

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

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

/* 768px보다 넓은 기기를 위한 스타일 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

이러한 접근 방식은 사이트가 작은 화면에서 먼저 잘 작동하도록 보장한 다음, 더 큰 기기를 사용하는 사용자를 위해 경험을 향상시킵니다.

직접 해보기

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