CSS 변수 Custom Properties

핵심 개념

--변수명으로 처리과정을 정의하고 var(--변수명)으로 사용합니다. :root에 정의하면 전역 변수로 사용 가능합니다. 디자인 토큰(색상/간격/폰트)을 변수로 관리하면 테마 변경이 한 곳에서 가능합니다. --primary 값을 변경하며 전체 UI가 한번에 바뀌는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (2줄)

<style>.cv{--primary:#10b981;--bg:#0d1117;--text:#e8e8e8;--accent:#991b1b;background:var(--bg);padding:16px;border:1px solid var(--primary);font-family:monospace;}.cv-title{color:var(--text);font-size:18px;font-weight:bold;margin-bottom:8px;}.cv-btn{background:var(--primary);color:var(--bg);padding:8px 16px;border:none;cursor:pointer;font-family:monospace;font-weight:bold;margin-right:6px;}.cv-btn-sec{background:var(--accent);color:var(--text);padding:8px 16px;border:none;cursor:pointer;font-family:monospace;}</style>
<div class='cv'><p class='cv-title'>CSS 변수 시스템</p><button class='cv-btn'>PRIMARY</button><button class='cv-btn-sec'>SECONDARY</button></div>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'CSS 변수 Custom Properties' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'CSS 변수 Custom Properties'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'CSS 변수 Custom Properties' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'CSS 변수 Custom Properties'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

CSS 변수 Custom Properties는 이 3가지만 확실히 잡으세요

1.같은 색상값을 50곳에 하드코딩하면 테마를 변경할 때 50곳을 전부 찾아 수정해야 합니다

2.--변수명으로 선언하고 var(--변수명)으로 사용하며, :root에 정의하면 전역 변수로 어디서든 접근 가능합니다

3.다음 챕터에서 화면 크기에 따라 레이아웃을 바꾸는 미디어 쿼리를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.22 — 질문하거나 답변을 확인하세요

→

진행도 22 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)