[CSS] 미디어 쿼리(Media Queries)와 모바일 퍼스트 전략

이번 포스팅에서는 [반응형 웹] 파트의 세부 주제인 효율적인 브레이크포인트 설계에 대하여 상세히 알아보겠습니다.

1. 데스크톱 퍼스트 vs 모바일 퍼스트 (Mobile First)

과거에는 PC 화면(가장 복잡함)을 먼저 짜고 모바일을 나중에 짰습니다(max-width 사용). 하지만 현대 웹은 모바일(가장 단순함)을 먼저 짜고, 화면이 커질 때(min-width) 구조를 추가하는 모바일 퍼스트 전략이 대세입니다. 이 방식이 코드가 훨씬 적고 브라우저 렌더링 성능도 좋습니다.

/* 1. 모바일 뷰 (기본 스타일: 미디어 쿼리 바깥에 작성) */
.menu {
  display: block; /* 모바일에서는 세로로 나열 */
}

/* 2. 태블릿 뷰 이상 (768px 이상일 때 덮어쓰기) */
@media screen and (min-width: 768px) {
  .menu {
    display: flex; /* 화면이 커지면 가로로 나열 */
  }
}

2. 디바이스의 호버(Hover) 기능 지원 여부 감지하기

터치 기반 모바일 기기에서는 마우스 :hover가 제대로 동작하지 않거나 버그를 일으킵니다. 최신 미디어 쿼리인 @media (hover: hover)를 사용하면 마우스가 있는 기기에서만 호버 효과를 적용할 수 있습니다.

/* 마우스를 사용하는 기기(PC 등)에서만 호버 효과 활성화 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background-color: var(--accent-color);
    transform: translateY(-2px);
  }
}

---

지금까지 모바일 퍼스트 전략과 Hover 미디어 쿼리 노하우에 대해 살펴보았습니다. min-width를 기준으로 브레이크포인트를 설정하는 습관을 들여보세요.