미디어 쿼리는 어떻게 반응형 디자인을 가능하게 하나요?

Question

Accepted Answer

**미디어 쿼리**는 디바이스 특성 — 가장 흔하게는 **뷰포트 너비** — 에 따라 CSS를 조건부로 적용해, 하나의 스타일시트가 폰, 태블릿, 데스크톱에 적응하게 합니다.

```css
/* 기본 스타일 (모바일 우선) */
.container { padding: 1rem; }

/* 뷰포트가 최소 768px 너비일 때만 적용 */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## 모바일 우선(min-width) vs 데스크톱 우선(max-width)

```css
/* ✅ 모바일 우선: 기본 = 모바일, 넓어질수록 개선 사항을 쌓아 올림 */
@media (min-width: 768px) { ... }

/* 데스크톱 우선: 기본 = 데스크톱, 작은 화면을 위해 아래로 덮어씀 */
@media (max-width: 767px) { ... }
```

**모바일 우선**(`min-width`)이 일반적으로 선호됩니다: 작은 화면을 위한 단순한 기본 스타일을 작성한 뒤, 큰 화면을 위해 점진적으로 복잡성을 추가합니다. 이는 더 깔끔하고 가벼운 CSS를 만드는 경향이 있고 콘텐츠가 재배치되는 방식과 일치합니다.

## 그 외 유용한 쿼리

```css
@media (max-width: 600px) { }                 /* 작은 화면 */
@media (orientation: landscape) { }            /* 디바이스 방향 */
@media (prefers-color-scheme: dark) { }        /* 사용자가 다크 모드를 원함 */
@media (prefers-reduced-motion: reduce) { }    /* 사용자가 애니메이션을 싫어함 — 접근성 */
@media print { }                                /* 인쇄용 스타일시트 */
```

`prefers-reduced-motion`과 `prefers-color-scheme`는 화면 크기가 아니라 사용자 *선호*에 반응합니다 — 접근성과 테마화에 중요합니다.

## 조건 결합하기

```css
@media (min-width: 768px) and (max-width: 1023px) { /* 태블릿만 */ }
```

## 미래에 대한 참고: 컨테이너 쿼리

미디어 쿼리는 **뷰포트**에 반응하지만, 더 새로운 **컨테이너 쿼리**(`@container`)는 *부모 요소의* 크기에 반응합니다 — 진정으로 재사용 가능한 컴포넌트에 더 적합합니다. 미디어 쿼리를 대체하기보다 보완합니다.

## 왜 중요한가

미디어 쿼리는 반응형 디자인의 기초입니다 — 레이아웃, spacing, 열을 화면 크기에 맞춥니다.

모바일 우선 `min-width` 접근은 CSS를 관리 가능하게 유지하고, 선호 쿼리(`prefers-reduced-motion`, `prefers-color-scheme`)는 반응성을 접근성과 테마화로 확장합니다.