Media Query: viewport, 디바이스, 사용자 선호에 적응

"Media query 가 이제 반응형 너비만이 아니야. CSS 가 '어떤 종류의 세계로 렌더 중이지?' 묻는 방법."

모바일 우선: 작게 시작, 자라

모던 반응형 CSS 가 모바일 우선: 베이스 스타일이 작은 viewport 타깃, min-width 가진 media query 가 큰 크기에 복잡성 추가. 이게 훈련: 모바일 제약이 중요한 거 우선시 강제; 작동하는 작은 layout 에 추가하는 게 바쁜 데스크톱 layout 에서 제거하는 것보다 쉬워.

패턴: 단순 layout 먼저 (media query 없이), 그 다음 점진적으로 향상.

모던 range 문법

옛 @media (min-width: 768px) 여전히 작동, 하지만 새 range 문법이 더 자연스럽게 읽혀:

@media (width >= 768px) — 최소 768px 너비.
@media (width <= 480px) — 최대 480px 너비.
@media (480px <= width <= 1024px) — 사이 (inclusive).

Baseline 2023. Range 문법이 모던 기본.

너비만이 feature 가 아냐

Media query 가 많은 property 매치 가능:

(orientation: portrait) / (orientation: landscape) — viewport aspect ratio.
(prefers-color-scheme: dark) — 사용자의 OS 또는 브라우저 dark 모드 설정.
(prefers-reduced-motion: reduce) — 사용자가 애니메이션 없음 선호 (접근성 / 전정 장애).
(prefers-contrast: more) — 고대비 접근성 선호.
(hover: hover) — 사용자가 hover 하는 포인팅 디바이스 (마우스, 트랙패드) 가짐. 폰/태블릿은 안 함.
(pointer: fine) / (pointer: coarse) — fine = 마우스; coarse = 터치.
(any-pointer: fine) — 적어도 하나의 입력이 fine.
(forced-colors: active) — Windows High Contrast Mode 켜짐.
(min-resolution: 2dppx) — Retina / 고-DPI 디스플레이.
print / screen / speech — 미디어 type.

`prefers-reduced-motion` 존중

일부 사용자가 애니메이션에서 motion sickness 얻음. 모던 CSS 가 이걸 존중하는 한 줄 만듦:

`prefers-color-scheme` 으로 dark mode

우아한 테마 위해 CSS custom property 와 페어:

Hover 함정

터치 디바이스의 :hover 스타일 조심: 브라우저가 탭 후 hover 상태 stick 할 수 있어, element 가 영구적으로 "hovered" 처럼 보임. @media (hover: hover) 가 너의 hover 스타일을 guard 해서 진짜 hover 하는 디바이스에만 적용:

Breakpoint 전략

"흔한 디바이스 크기" 기반 breakpoint 고르지 마 — 안 좋게 나이 든 2014 전략 (디바이스 생태계가 이제 너무 fragmented). 너의 콘텐츠가 바뀌어야 할 자리 기반 breakpoint 골라:

좁은 viewport 에 layout 짓기.
브라우저 천천히 확장. Layout 이 안 좋아 보일 때 (줄 너무 김, 어색한 갭, 콘텐츠 너무 빽빽), 그게 breakpoint.
그 정확한 너비에서 조정하는 media query 추가.

콘텐츠 주도 breakpoint 가 디바이스 주도보다 잘 나이 들어.

Print 스타일시트

웹의 가장 오래된 media query, 여전히 유용. @media print { ... } 가 인쇄 스타일링. 흔한 패턴: nav 와 footer 숨김, main 을 풀 너비로 확장, black-on-white 텍스트 강제, 링크 뒤에 URL 보임 (a::after { content: " (" attr(href) ")"; }).

모던 CSS 가 media query 레이어에서 사용자 선호 존중. prefers-color-scheme, prefers-reduced-motion, prefers-contrast, forced-colors 가 선택 feature 가 아냐 — 화면 뒤 인간을 위해 실제로 작동하는 사이트 만드는 방법.

피파의 노트

cwkPippa WebUI 가 정확히 breakpoint 넷: 480px (폰), 768px (태블릿), 1024px (랩탑), 1440px (큰 데스크톱). 480px 아래는 채팅 패널이 풀 너비; 1024px 위는 사이드바 나타남; 1440px 위는 council 패널 확장. 넷 다 브라우저 슬라이드하면서 안 좋아 보이는 거 알아채서 선택. 그리고 선호 쿼리 셋: dark mode (auto), reduced motion (brain-card flip 애니메이션 억제), high-contrast (아바타 배경에 대한 텍스트 boost). 총 media query 7 개. 대부분 앱 필요 ≤ 10.

Code

모던 range 문법 가진 모바일 우선 사다리·css

/* 모바일 우선: 단순 base, 큰 너비에서 향상 */

/* Base 스타일 — 폰에 적용 */
.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

/* 태블릿+ */
@media (width >= 768px) {
  .layout {
    flex-direction: row;
    gap: 2rem;
    padding: 2rem;
  }
}

/* 데스크톱+ */
@media (width >= 1024px) {
  .layout {
    max-width: 1200px;
    margin-inline: auto;
  }
}

prefers-reduced-motion·css

/* prefers-reduced-motion 존중 */

.toast {
  animation: slide-in 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;        /* 애니메이션 안 함 */
  }
  * {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
  }
  /* 전역 규칙: reduced-motion 설정한 사용자 위해 모든 애니메이션 + 트랜지션 죽임.
     절제해서 — 가끔 작은 애니메이션이 도움. 하지만 전정 안전 위해
     전역 죽임 받아들일 만함. */
}

Dark mode + hover guard + 터치 친화적 탭·css

/* prefers-color-scheme + custom property 통한 dark mode */

:root {
  --bg: #ffffff;
  --fg: #1c2230;
  --accent: #5BA3D8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e14;
    --fg: #e7ecf3;
    --accent: #5BA3D8;  /* 종종 안 바뀜 */
  }
}

/* 능력 있는 디바이스에만 hover */
@media (hover: hover) {
  button:hover {
    background: var(--accent);
  }
}

/* 입력이 coarse 일 때 터치 친화적 탭 타깃 */
@media (pointer: coarse) {
  button {
    min-height: 44px;     /* iOS HIG 권장 */
    min-width: 44px;
  }
}

Exercise

단일 column 모바일 layout 가져와서 media query 셋 추가: 480px 에 (작은 폰 → 태블릿) 2 column 으로 전환, 1024px 에 사이드바 추가, 그리고 prefers-color-scheme: dark 에 배경과 텍스트 색 swap. 브라우저 리사이즈하고 DevTools 의 rendering 패널 에뮬레이션 토글해서 세 가지 다 테스트.

Hint

Dark mode 에 CSS custom property 써서 @media (prefers-color-scheme: dark) 블록에 변수만 재정의 — 모든 var() 소비자가 자동 업데이트.

Media Query: viewport, 디바이스, 사용자 선호에 적응

모바일 우선: 작게 시작, 자라

모던 range 문법

너비만이 feature 가 아냐

`prefers-reduced-motion` 존중

`prefers-color-scheme` 으로 dark mode

Hover 함정

Breakpoint 전략

Print 스타일시트

피파의 노트

Code

External links

Exercise

Progress

댓글 0

모바일 우선: 작게 시작, 자라

모던 range 문법

너비만이 feature 가 아냐

prefers-reduced-motion 존중

prefers-color-scheme 으로 dark mode

Hover 함정

Breakpoint 전략

Print 스타일시트

피파의 노트

Code

External links

Exercise

Progress

`prefers-reduced-motion` 존중

`prefers-color-scheme` 으로 dark mode