color-scheme 속성
color-scheme 속성을 사용해 요소가 지원하는 테마를 브라우저에 알립니다.
color-scheme 속성은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
색상 구성표란 무엇인가요
color-scheme 속성은 요소 또는 페이지가 지원하는 색상 구성표를 브라우저에 알려 줍니다. 그러면 브라우저는 이 정보를 사용하여 스크롤바, 양식 컨트롤, 체크박스, 입력 테두리와 같은 자체 UI 요소를 요청된 구성표에 맞게 스타일링합니다.
색상 구성표 값
사용할 수 있는 값:
normal: 요소가 문서 기본값을 사용합니다light: 요소가 밝은 구성표만 지원합니다dark: 요소가 dark 구성표만 지원합니다light dark: 두 구성표를 모두 지원하며 브라우저가 설정에 따라 선택합니다dark light: dark 구성표를 우선하며 밝은 구성표로 대체합니다
브라우저 UI 요소
브라우저는 색상 구성표에 따라 다음 요소를 자동으로 스타일링합니다:
- 스크롤바
- 입력 필드, 텍스트 영역, 선택 드롭다운
- 체크박스, 라디오 버튼
- 범위 슬라이더
- 날짜 및 시간 선택기
HTML 요소에서 설정하기
루트 요소에서 색상 구성표를 설정하면 페이지 전체의 시스템 UI 렌더링이 변경됩니다:
<input type="checkbox" /> <select><option>A</option><option>B</option></select>
메타 태그에 해당하는 선언
CSS가 로드되기 전에 더 일찍 적용되도록 HTML에서 색상 구성표를 메타 태그로 선언할 수도 있습니다:
<pre class="code-sample"><meta name="color-scheme" content="light dark"></pre>
사용자 지정 색상 없이 dark 모드
최소한의 dark 모드 구현으로 color-scheme: dark를 설정하면 브라우저가 양식 요소와 스크롤바를 자동으로 처리하게 할 수 있습니다:
<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />
선호 색상 구성표와 결합하기
prefers-color-scheme을 사용하여 설정을 감지하고 사용자 지정 토큰과 색상 구성표 속성을 함께 설정하세요:
<div class="demo">Themed via variables + color-scheme</div>
범위가 지정된 색상 구성표
특정 요소에 색상 구성표를 적용하여 dark 페이지 안에 독립적인 밝은 영역을 만드세요:
<div class="light-widget">Always-light widget<br/><input type="date" /></div>
강제 색상 / 윈도우 고대비
forced-colors 미디어 쿼리는 윈도우 고대비 모드를 감지합니다. 포괄적인 접근성 지원을 위해 color-scheme과 forced-colors를 함께 사용하세요.
<div class="card">Card respects forced-colors mode</div>
시스템 색상 키워드
강제 색상이 활성화되면 사용자의 접근 가능한 색상 팔레트에 매핑되는 CSS 시스템 색상 키워드를 사용하세요:
<button>System-styled button</button>
빠른 확인
html 요소에 color-scheme: dark를 설정하면 어떤 CSS 동작을 사용할 수 있나요?
요약
color-scheme은 요소 또는 페이지의 자체 UI 컨트롤을 브라우저가 어떻게 스타일링할지 지정합니다. 전역으로 color-scheme: light dark를 사용하면 기본 UI가 설정에 맞게 자동으로 조정됩니다. CSS 사용자 지정 속성과 결합하여 완전한 dark 모드를 구현하세요. CSS가 로드되기 전에 적용하려면 메타 태그를 사용하세요.
자주 묻는 질문
“color-scheme 속성” 강의는 무료인가요?
네 — “color-scheme 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“color-scheme 속성”에서 뭘 배우나요?
color-scheme 속성을 사용해 요소가 지원하는 테마를 브라우저에 알립니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“color-scheme 속성” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- prefers-color-scheme 미디어 쿼리
- 테마 설정을 위한 CSS 변수
- color-scheme 속성
- 자동 및 수동 어두운 모드 전환