Prefers-Color-Scheme 및 Prefers-Reduced-Motion
다크 모드와 모션 감소 애니메이션에 대한 사용자의 시스템 환경설정을 존중합니다.
Prefers-Color-Scheme 및 Prefers-Reduced-Motion은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
사용자 선호 미디어 기능
CSS는 화면 크기 외에도 사용자 시스템 설정을 조회할 수 있습니다. 이를 통해 사이트에서 사용자 상호 작용 없이 자동으로 dark 모드를 적용하고 접근성을 고려한 애니메이션을 제공할 수 있습니다.
색 구성표 선호 기능
사용자가 OS를 밝은 모드 또는 dark 모드로 설정했는지 감지합니다.
<p>This page follows your OS color-scheme preference.</p>
자동 dark 모드 구현하기
가장 깔끔한 구현 방식은 선호 설정에 따라 값을 교체하는 CSS 변수를 사용하는 것입니다.
<p>Auto dark mode via CSS variables.</p>
움직임 감소 선호 기능
일부 사용자는 애니메이션으로 인해 메스꺼움이나 불편함을 느낍니다. prefers-reduced-motion: reduce 미디어 기능은 이러한 접근성 설정을 감지합니다.
<div class="box spun"></div>
움직임 선호 설정 존중하기
모든 애니메이션을 없애는 대신, 은은한 대체 애니메이션을 제공하십시오.
<div class="card">Card with motion-aware transition</div>
대비 선호 기능
사용자가 접근성을 위해 더 높은 대비 또는 더 낮은 대비를 선호하는지 감지합니다. 그에 맞게 색상 선택을 조정하십시오.
<p>Contrast-aware text</p>
투명도 감소 선호 기능
일부 시각 장애 사용자는 투명도가 낮은 것을 선호합니다. backdrop-filter와 불투명도 기반 효과를 줄이십시오.
<div class="glass-card">Glass card</div>
JavaScript로 선호 설정에 접근하기
window.matchMedia()를 사용해 JavaScript에서 이러한 선호 설정을 조회하십시오.
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
시스템 설정과 수동 재정의
기본적으로 시스템 설정을 따르되 사용자가 toggle로 재정의할 수 있게 하십시오. 재정의 설정은 localStorage에 저장하고 <html>에 클래스를 적용하십시오.
<div class="theme dark">Manual dark override applied via class</div>
데이터 절약 선호 기능
사용자가 데이터 절약 모드를 활성화했는지 감지합니다. 더 작은 이미지를 제공하거나 필수적이지 않은 리소스를 건너뛰십시오.
<div class="hero">Hero banner</div>
DevTools에서 테스트하기
Chrome DevTools의 Rendering 탭에서는 OS 설정을 변경하지 않고도 dark 모드, 움직임 감소 및 기타 선호 미디어 기능을 에뮬레이션할 수 있습니다.
빠른 확인
수동 사용자 toggle도 지원할 수 있는 자동 dark 모드를 구현하는 가장 좋은 방법은 무엇입니까?
복습
prefers-color-scheme을 사용하면 자동 dark 모드를 적용할 수 있습니다. 접근성을 위해 prefers-reduced-motion은 애니메이션을 비활성화하거나 단순화해야 합니다. 두 기능 모두 CSS 변수를 사용해 깔끔하고 유지 관리하기 쉬운 코드로 구현하십시오. 사용자가 OS와 독립적으로 자신의 설정을 제어할 수 있도록 항상 수동 재정의를 제공하십시오.
자주 묻는 질문
“Prefers-Color-Scheme 및 Prefers-Reduced-Motion” 강의는 무료인가요?
네 — “Prefers-Color-Scheme 및 Prefers-Reduced-Motion” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Prefers-Color-Scheme 및 Prefers-Reduced-Motion”에서 뭘 배우나요?
다크 모드와 모션 감소 애니메이션에 대한 사용자의 시스템 환경설정을 존중합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“Prefers-Color-Scheme 및 Prefers-Reduced-Motion” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 구문과 일반 중단점
- 너비, 높이 및 방향 쿼리
- Prefers-Color-Scheme 및 Prefers-Reduced-Motion
- 여러 미디어 쿼리 결합