CSS / 2026 모던 CSS 2026.06.02

Part 2: 커스텀 프로퍼티(Custom Properties) — 진짜 변수의 힘

Sass 변수와 완전히 다른 CSS 커스텀 프로퍼티의 개념과 활용법을 배웁니다. 런타임 변경, 상속, JavaScript 제어, 다크모드 구현까지 실전 예제를 중심으로 설명합니다.

Part 2: 커스텀 프로퍼티(Custom Properties) — 진짜 변수의 힘

Part 1에서 선택자와 특정도를 배웠습니다. 이제부터는 실제로 코드를 더 깔끔하고 유지보수하기 쉽게 만들어주는 강력한 기능들을 하나씩 알아보겠습니다. 그중에서도 가장 먼저 배워야 할 것이 바로 커스텀 프로퍼티(Custom Properties)입니다.

많은 개발자들이 Sass나 Less 같은 전처리기를 사용하면서 $primary-color나 $font-size-base 같은 변수를 사용해왔습니다. CSS에도 이제 비슷한 개념이 공식적으로 들어왔는데, 이름은 커스텀 프로퍼티입니다. 그런데 이 기능은 단순히 Sass 변수를 대체하는 수준이 아니라, 여러 면에서 훨씬 더 강력하고 유연합니다.

이번 파트에서는 커스텀 프로퍼티의 기본 사용법부터 시작해서, Sass 변수와의 차이점, 실전에서 어떻게 활용하는지까지 자세히 알아보겠습니다.

1. 커스텀 프로퍼티란?

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

기준봉 매매 전성시대 드립니다.

₩600,000

크몽

도쿄 해리포터 스튜디오 투어 입장권

₩59,768

KKday

도쿄 지하철 패스 (Tokyo Subway Ticket | 1일권·2일권·3일권)

₩8,538

₩9,487

KKday

커스텀 프로퍼티는 개발자가 직접 이름을 붙여 값을 저장하고, 필요할 때 불러서 사용하는 CSS의 변수 기능입니다. 기존 CSS 속성과 구분하기 위해 반드시 --로 시작하는 이름을 사용해야 합니다.

:root {
  --primary-color: #0a66c2;
  --text-color: #111827;
  --border-radius: 12px;
  --card-shadow: 0 10px 15px rgb(0 0 0 / 0.1);
  --spacing-unit: 8px;
}

:root는 HTML 문서의 최상위 요소를 선택하는 특수한 선택자입니다. 여기서 변수를 선언하면 전체 문서 어디에서든 해당 변수를 사용할 수 있습니다.

2. var() 함수로 값 불러오기

선언한 커스텀 프로퍼티는 var() 함수를 사용해서 불러올 수 있습니다.

.btn-primary {
  background-color: var(--primary-color);
  color: white;
  border-radius: var(--border-radius);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
  box-shadow: var(--card-shadow);
}

.card {
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  padding: calc(var(--spacing-unit) * 3);
}

이렇게 하면 같은 값을 여러 곳에서 반복해서 작성할 필요가 없어집니다. 나중에 색상이나 간격을 변경하고 싶을 때 :root 안의 값만 수정하면 전체가 한 번에 바뀌는 장점이 있습니다.

3. Sass 변수와 커스텀 프로퍼티의 결정적 차이

많은 사람들이 “Sass 변수랑 비슷한 거 아니야?”라고 생각하지만, 실제로는 큰 차이가 있습니다. 아래 표를 통해 비교해보겠습니다.

구분	Sass 변수 ($var)	CSS 커스텀 프로퍼티 (--var)
값이 결정되는 시점	빌드(컴파일)할 때 결정됨	런타임(브라우저 실행 중)에도 변경 가능
상속	상속되지 않음	자식 요소로 상속됨
미디어 쿼리에서 변경	불가능	가능
JavaScript로 제어	불가능	가능
다크모드 대응	상대적으로 어려움	매우 쉬움

가장 큰 차이점은 런타임에 값을 변경할 수 있다는 점입니다. Sass 변수는 컴파일이 끝나면 일반 CSS 값으로 고정되지만, 커스텀 프로퍼티는 브라우저가 실행되는 동안에도 값을 동적으로 바꿀 수 있습니다.

4. 실전 예제: 다크모드 구현

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

데이톡 - 매일 100만 회원과 새로운 인연

커스텀 프로퍼티를 사용하면 다크모드를 매우 깔끔하고 효율적으로 구현할 수 있습니다.

:root {
  --bg-color: #ffffff;
  --text-color: #111827;
  --card-bg: #ffffff;
  --border-color: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0f172a;
    --text-color: #f1f5f9;
    --card-bg: #1e293b;
    --border-color: #334155;
  }
}

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

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

이 코드의 핵심은 @media (prefers-color-scheme: dark) 안에서 :root의 커스텀 프로퍼티 값을 다시 정의했다는 점입니다. 이렇게 하면 사용자의 시스템 설정에 따라 색상이 자동으로 전환됩니다.

5. 컴포넌트 단위로 커스텀 프로퍼티 사용하기

커스텀 프로퍼티는 전역뿐만 아니라 컴포넌트 단위로도 유용하게 사용할 수 있습니다.

.user-card {
  --padding: 24px;
  --avatar-size: 64px;
  --title-size: 1.1rem;
  
  padding: var(--padding);
}

.user-card.compact {
  --padding: 16px;
  --avatar-size: 48px;
  --title-size: 1rem;
}

이렇게 하면 .compact 클래스를 붙이는 것만으로 패딩, 아바타 크기, 제목 크기가 한 번에 조절됩니다. 나중에 값을 변경하고 싶을 때도 변수 하나만 수정하면 됩니다.

6. JavaScript로 커스텀 프로퍼티 제어하기

커스텀 프로퍼티는 JavaScript에서도 쉽게 읽고 쓸 수 있다는 큰 장점이 있습니다.

// 값 변경하기
document.documentElement.style.setProperty('--primary-color', '#e11d48');

// 현재 값 읽어오기
const currentColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color')
  .trim();

이 기능은 테마 변경, 사용자 설정 저장, 실시간 미리보기 등에서 매우 강력하게 활용됩니다.