처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
퀴즈 / CSS / 문제

CSS @media (prefers-reduced-motion: reduce) 미디어 쿼리의 용도는?

보통 MDN Web Docs
보기 및 정답
A 사용자가 운영체제에서 모션 감소를 설정했을 때 애니메이션을 줄이거나 제거한다
B 반응형 이미지를 위해 max-width: 100%를 설정하면 이미지가 왜곡된다
C container query는 미디어 쿼리와 동일하게 뷰포트 기준으로 동작한다
D 미디어 쿼리는 JavaScript 없이 화면 크기를 감지할 수 없다

해설

prefers-reduced-motion은 사용자의 OS 설정(예: macOS의 '동작 줄이기', Windows의 '애니메이션 표시')을 감지합니다. 멀미, 전정 장애 등이 있는 사용자를 위해 과도한 애니메이션을 줄이거나 대체하여 웹 접근성을 향상시킵니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기