0Pricing
Frontend Academy · 강의

테마 설정을 위한 CSS 변수

--로 사용자 지정 속성을 선언하고 var()를 사용하며, 중첩된 범위에서 속성을 재정의하고 라이트·다크 테마 전환을 구현합니다.

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

CSS 사용자 지정 속성이란 무엇입니까

CSS 사용자 지정 속성(CSS 변수)은 스타일시트 전체에서 재사용할 수 있는 값을 저장합니다. --name: value로 선언하고 var(--name)으로 사용합니다. Sass 같은 전처리기 변수와 달리 동적이므로 JavaScript로 값을 업데이트할 수 있습니다.

사용자 지정 속성 선언하기

:root에 속성을 선언하면 전역에서 사용할 수 있습니다. 어떤 요소에든 선언하여 해당 요소의 하위 트리로 범위를 제한할 수도 있습니다.

:root {
  --color-primary: #3182ce;
  --color-bg: #f7fafc;
  --color-text: #1a202c;
  --spacing-md: 16px;
  --border-radius: 8px;
  --font-sans: 'Inter', system-ui, sans-serif;
}

사용자 지정 속성 사용하기

var(--name)으로 변수를 참조합니다. 두 번째 인수로 대체값을 포함할 수 있습니다. var(--color-primary, #3182ce)처럼 작성합니다. 변수가 정의되지 않은 경우 대체값이 사용됩니다.

.card {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

.btn {
  background: var(--color-primary, blue); /* fallback */
}

캐스케이드: 범위가 지정된 변수

사용자 지정 속성은 캐스케이드되고 상속됩니다. 자식 요소에서 변수를 다시 정의하면 해당 요소와 모든 하위 요소에 대해 부모 요소의 값이 재정의됩니다.

:root { --accent: blue; }

.card { color: var(--accent); } /* blue */

.special-section {
  --accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */

CSS 변수로 다크 모드 구현하기

가장 깔끔한 다크 모드 패턴은 밝은 색상 팔레트와 어두운 색상 팔레트를 CSS 변수로 정의하는 것입니다. 클래스를 전환하거나 prefers-color-scheme 미디어 쿼리를 사용하여 전환합니다. 개별 색상 속성을 재정의할 필요가 없습니다.

:root {
  --bg: #ffffff;
  --text: #1a202c;
  --card-bg: #f7fafc;
}

[data-theme='dark'], @media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a202c;
    --text: #f7fafc;
    --card-bg: #2d3748;
  }
}

body { background: var(--bg); color: var(--text); }

JavaScript로 다크 모드 전환하기

루트 요소의 데이터 속성이나 클래스를 전환하는 버튼을 추가합니다. 나머지는 CSS 변수가 처리하므로 개별 스타일을 재정의하지 않고 JavaScript 한 줄로 구현할 수 있습니다.

const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  document.documentElement.setAttribute(
    'data-theme',
    current === 'dark' ? 'light' : 'dark'
  );
});

JavaScript로 변수 업데이트하기

element.style.setProperty('--name', value)는 인라인으로 사용자 지정 속성을 업데이트합니다. removeProperty로 삭제하면 캐스케이드 값이 복원됩니다. 이를 통해 동적 테마와 애니메이션 값을 구현할 수 있습니다.

// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');

// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
  document.documentElement.style.setProperty('--primary-hue', hue.value);
});

디자인 토큰을 CSS 변수로

모든 디자인 결정 사항—색상 팔레트, 간격 눈금, 글꼴 크기 체계—을 CSS 변수로 정의합니다. 이렇게 하면 컴포넌트가 사용하는 단일 기준점이 만들어집니다. 토큰을 변경하면 모든 곳에 즉시 반영됩니다.

:root {
  /* Colour scale */
  --blue-50: #ebf8ff;
  --blue-100: #bee3f8;
  --blue-500: #3182ce;
  --blue-900: #1a365d;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
}

calc()에서 변수 사용하기

CSS 변수는 calc() 내부에서도 작동하므로 토큰 값에 기반한 반응형 계산을 할 수 있습니다.

:root { --header-height: 64px; }

.content {
  /* Leave room for fixed header */
  padding-top: calc(var(--header-height) + 24px);
  min-height: calc(100vh - var(--header-height));
}

브라우저 지원

CSS 사용자 지정 속성은 모든 최신 브라우저에서 지원됩니다(주요 브라우저 기준 2016년부터). 이 기능에는 전처리기가 필요하지 않습니다. 매우 오래된 브라우저에 대한 대체 방법으로 var() 앞에 정적 값을 제공합니다.

.btn {
  background: blue;                    /* IE fallback */
  background: var(--color-primary);    /* modern browsers */
}

사용자 지정 속성과 Sass 변수 비교

Sass 변수는 정적 값으로 컴파일됩니다. CSS 사용자 지정 속성은 실행 시점에 존재하며 동적이고, JavaScript로 변경할 수 있으며, DOM을 통해 상속됩니다. 테마 지정에는 CSS 변수를, 빌드 시점 상수에는 Sass 변수를 사용합니다.

빠른 확인

JavaScript에서 CSS 사용자 지정 속성을 어떻게 읽고 업데이트할 수 있습니까?

복습: CSS 사용자 지정 속성

전역 범위에서는 :root에 --를 사용해 선언합니다. var()와 함께 사용합니다. 범위가 지정된 변수는 하위 요소로 상속됩니다. 다크 모드에서는 미디어 쿼리나 데이터 속성에서 색상 토큰을 다시 정의합니다. JavaScript에서는 style.setProperty()로 업데이트합니다. 변수를 사용한 디자인 토큰은 단일 기준점입니다.

자주 묻는 질문

“테마 설정을 위한 CSS 변수” 강의는 무료인가요?

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

“테마 설정을 위한 CSS 변수”에서 뭘 배우나요?

--로 사용자 지정 속성을 선언하고 var()를 사용하며, 중첩된 범위에서 속성을 재정의하고 라이트·다크 테마 전환을 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“테마 설정을 위한 CSS 변수” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. Flexbox 심화: 정렬, 줄바꿈, 순서
  2. CSS Grid: template-areas, auto-fit, minmax
  3. Flexbox와 Grid 조합하기
  4. 테마 설정을 위한 CSS 변수
← Frontend Academy(으)로 돌아가기