CSS Academy · 강의

prefers-color-scheme 미디어 쿼리

prefers-color-scheme 미디어 쿼리를 사용해 사용자의 시스템이 선호하는 어두운 모드 또는 밝은 모드를 감지합니다.

prefers-color-scheme 미디어 쿼리은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

자동 다크 모드의 이유

많은 사용자가 편안함, 배터리 수명(OLED 화면) 또는 접근성을 위해 OS 수준에서 다크 모드를 활성화합니다. prefers-color-scheme 미디어 쿼리는 이 설정을 감지하여 사이트가 자동으로 적응하도록 합니다.

쿼리 값

두 가지 값이 있습니다:

light — 사용자가 밝은 색 구성표를 선호함(또는 선호 사항이 없음)
dark — 사용자가 다크 모드를 선호함

<p>This page respects your OS dark mode setting.</p>

모바일 우선 dark

대부분의 사용자가 OLED 모바일 기기를 사용한다면 dark를 기본 스타일로 만드는 것을 고려해 보세요:

<p>Dark by default; switches to light in light mode.</p>

CSS 변수 방식

가장 깔끔한 구현은 구성표별로 토큰 집합을 정의하는 것입니다:

<div class="card">Themed card using CSS variables</div>

dark 모드의 이미지

눈부신 이미지를 방지하려면 dark 모드에서 이미지 밝기를 낮추세요:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />

JavaScript에서 감지하기

동적 동작을 위해 JavaScript에서 dark 모드 설정을 확인하세요:

<p id="theme-status">Checking...</p>
<script>
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
  });
</script>

DevTools에서 테스트하기

크롬 DevTools → 렌더링 탭 → CSS 선호 색상 구성표 에뮬레이션을 선택하세요. OS 설정을 변경하지 않고 밝은 모드와 dark 모드 사이를 전환할 수 있습니다. 파이어폭스에서는 DevTools → 검사기 탭 → 눈 모양 아이콘 메뉴를 사용하세요.

dark 모드 색상 원칙

효과적인 dark 모드:

배경에는 순수한 검은색이 아닌 어두운 회색을 사용하세요 — 눈의 피로를 줄여 줍니다
입체감을 주는 그림자를 줄이세요 — 더 높은 표면에는 더 밝은 배경 색조를 사용하세요
테두리 색상을 더 밝게 조정하여 잘 보이게 하세요
텍스트 대비율을 확인하세요 — 서로 다른 비율이 필요할 수 있습니다

색상 반전 안티 패턴

dark 모드에 filter: invert(1)를 사용해 모든 색상을 단순히 반전하지 마세요. 이미지와 아이콘의 색상이 이상하게 변합니다. 각 요소에 적절한 색상을 지정한 올바른 dark 모드 토큰을 사용하세요.

성능: 화면 깜박임 방지

JavaScript로 테마를 전환한다면, 페이지가 렌더링되기 전에 <head>의 <script> 태그에서 <html>에 테마 클래스를 동기적으로 적용하여 스타일이 지정되지 않은 테마가 잠시 나타나는 현상(FOUT)을 방지하세요.

메타 테마 색상

브라우저 UI 색상(모바일 주소 표시줄, 작업 전환기)을 dark 테마에 맞게 업데이트하세요:

<pre class="code-sample">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"&gt;
&lt;meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#1a1a2e"&gt;</pre>

빠른 확인

OS가 dark 모드로 설정되었을 때 dark 모드 스타일을 적용하려면 어떤 미디어 쿼리 값을 사용해야 하나요?

요약

prefers-color-scheme: dark는 OS의 dark 모드 설정을 감지합니다. 미디어 쿼리 안에서 토큰 값을 교체하는 CSS 변수를 사용하여 자동 dark 모드를 구현하세요. dark 모드에서는 이미지 밝기를 낮추세요. DevTools에서 테스트하세요. 모바일 환경을 완성하려면 브라우저의 테마 색상 메타 태그를 업데이트하세요.

자주 묻는 질문

“prefers-color-scheme 미디어 쿼리” 강의는 무료인가요?

네 — “prefers-color-scheme 미디어 쿼리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“prefers-color-scheme 미디어 쿼리”에서 뭘 배우나요?

prefers-color-scheme 미디어 쿼리를 사용해 사용자의 시스템이 선호하는 어두운 모드 또는 밝은 모드를 감지합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“prefers-color-scheme 미디어 쿼리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기