반응형 웹 만들 때 미디어 쿼리 기준 사이즈

Question

반응형 웹을 처음 만들어보는데, 미디어 쿼리의 브레이크포인트를 어떻게 잡아야 하나요? 현재는 그냥 768px 하나만 기준으로 잡고 있는데, 실무에서는 보통 몇 단계로 나누나요? 태블릿, 모바일 등 기기별로 다 다른데 어떤 기준이 표준인지 궁금합니다.

김영삼 · Accepted Answer

2018년 기준으로 가장 많이 사용하는 브레이크포인트입니다 (Bootstrap 4 기준):

```css
/* 모바일 우선 (Mobile First) */
/* Extra small: <576px (기본) */
/* Small: >=576px */
@media (min-width: 576px) { }
/* Medium: >=768px (태블릿) */
@media (min-width: 768px) { }
/* Large: >=992px (데스크톱) */
@media (min-width: 992px) { }
/* Extra large: >=1200px (와이드) */
@media (min-width: 1200px) { }
```

모바일 퍼스트 방식을 추천합니다. `min-width`로 작은 화면부터 설계하고 점점 넓혀가는 방식이에요. 실무에서는 보통 3단계(모바일/태블릿/데스크톱)면 충분합니다.

프론트초보 · Answer

모바일 퍼스트 방식이 좋다는 건 알겠는데, 기존에 데스크톱 기준으로 만들어진 사이트에도 적용 가능한가요?

프론트초보 · Answer

상세한 설명 감사합니다! 3단계로 나눠서 적용해보겠습니다.

댓글 4