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

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단계(모바일/태블릿/데스크톱)면 충분합니다.

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

기존 사이트라면 `max-width`로 데스크톱 퍼스트 방식을 쓰셔도 됩니다. 새로 만드는 사이트에서는 모바일 퍼스트를 추천드립니다.

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