워로디스

CSS. 변수 사용 방법 본문

개발/CSS

CSS. 변수 사용 방법

워로디스 2026. 7. 11. 19:51

CSS 변수는 스타일시트에서 반복해서 사용하는 값을 이름으로 정의하고 재사용할 수 있게 해주는 표준 CSS 기능입니다.

일반적으로 “CSS 변수”라고 부르지만, 공식 명칭은 CSS 커스텀 속성(Custom Properties) 입니다. 별도의 라이브러리나 Sass 같은 전처리기 없이 브라우저에서 직접 사용할 수 있습니다.

1. CSS 변수 선언하기

CSS 변수의 이름은 반드시 --로 시작해야 합니다.

:root {
  --main-color: #333;
  --content-padding: 20px;
}

위 코드에서는 두 개의 CSS 변수를 선언했습니다.

  • --main-color: 기본 색상
  • --content-padding: 기본 여백

CSS 변수에는 색상, 크기, 간격, 글꼴, 그림자 등 일반적인 CSS 속성값을 저장할 수 있습니다.

:root {
  --primary-color: #2563eb;
  --font-size-base: 16px;
  --spacing-medium: 16px;
  --border-radius: 8px;
  --card-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

2. CSS 변수 사용하기

선언한 CSS 변수는 var() 함수를 사용하여 참조합니다.

div {
  color: var(--main-color);
  padding: var(--content-padding);
}

전체 코드는 다음과 같습니다.

:root {
  --main-color: #333;
  --content-padding: 20px;
}

div {
  color: var(--main-color);
  padding: var(--content-padding);
}

이 방식은 같은 값을 여러 선택자에서 반복해서 작성하지 않아도 된다는 장점이 있습니다.

:root {
  --primary-color: #2563eb;
}

.button {
  background-color: var(--primary-color);
}

.link {
  color: var(--primary-color);
}

.icon {
  fill: var(--primary-color);
}

기본 색상을 변경해야 할 때는 변수 선언부의 값만 수정하면 됩니다.

:root {
  --primary-color: #7c3aed;
}

그러면 해당 변수를 사용하는 모든 스타일에 변경된 값이 함께 반영됩니다.

3. :root에 CSS 변수를 선언하는 이유

문서 전체에서 사용할 CSS 변수는 일반적으로 :root 선택자에 선언합니다.

:root {
  --text-color: #222;
  --background-color: #fff;
}

HTML 문서에서 :root는 <html> 요소를 선택합니다. 여기에 선언된 CSS 변수는 하위 요소로 상속되므로 문서 전체에서 사용할 수 있습니다.

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

이 때문에 :root에 선언된 CSS 변수는 흔히 전역 변수처럼 설명됩니다.

다만 JavaScript의 전역 변수처럼 독립적으로 존재하는 값은 아닙니다. CSS 변수는 일반 CSS 속성과 마찬가지로 상속과 캐스케이드 규칙을 따릅니다.

4. 특정 영역에서 변수 재정의하기

CSS 변수는 특정 요소나 영역에서 같은 이름으로 다시 선언할 수 있습니다.

:root {
  --main-color: #333;
}

.warning {
  --main-color: red;
}

.message {
  color: var(--main-color);
}
<p class="message">일반 메시지</p>

<section class="warning">
  <p class="message">경고 메시지</p>
</section>

첫 번째 메시지는 :root에 선언된 #333을 사용합니다.

두 번째 메시지는 .warning 영역 안에 있으므로 해당 영역에서 다시 선언된 red를 사용합니다.

이 기능을 활용하면 전역 기본값을 유지하면서 특정 컴포넌트나 영역에서만 값을 변경할 수 있습니다.

:root {
  --button-background: #2563eb;
  --button-text: white;
}

.button-danger {
  --button-background: #dc2626;
}

.button {
  color: var(--button-text);
  background-color: var(--button-background);
}

5. 기본값 지정하기

var() 함수에는 CSS 변수가 정의되지 않았을 때 사용할 기본값을 지정할 수 있습니다.

div {
  color: var(--main-color, #000);
}

--main-color가 정의되어 있으면 해당 변수의 값이 사용됩니다.

변수가 정의되어 있지 않으면 두 번째 값인 #000이 사용됩니다. 이를 폴백 값이라고 합니다.

.card {
  color: var(--card-text-color, #222);
  background-color: var(--card-background, #fff);
}

폴백 값을 사용하면 일부 변수가 누락되더라도 기본 스타일을 유지할 수 있습니다.

6. CSS 변수의 상속

CSS 변수는 기본적으로 부모 요소에서 자식 요소로 상속됩니다.

.container {
  --text-color: blue;
}

.container p {
  color: var(--text-color);
}

.container에 선언된 --text-color는 그 안에 있는 <p> 요소에서도 사용할 수 있습니다.

<div class="container">
  <p>파란색 텍스트</p>
</div>

그러나 변수의 적용 범위 밖에서는 사용할 수 없습니다.

.container {
  --text-color: blue;
}

.outside {
  color: var(--text-color);
}

.outside가 .container의 하위 요소가 아니라면 --text-color를 상속받지 못합니다.

문서 전체에서 사용해야 하는 값은 :root에 선언하고, 특정 컴포넌트에서만 필요한 값은 해당 컴포넌트 선택자에 선언하는 것이 좋습니다.

7. CSS 변수와 일반 CSS 속성의 차이

CSS 변수는 값을 선언하는 것만으로는 화면에 직접적인 변화가 생기지 않습니다.

:root {
  --main-color: red;
}

위 코드는 --main-color라는 값을 정의할 뿐입니다.

실제 스타일에 적용하려면 일반 CSS 속성에서 참조해야 합니다.

body {
  color: var(--main-color);
}

또한 CSS 변수에는 문자열처럼 보이는 다양한 값을 저장할 수 있지만, 실제로 사용되는 속성에 맞는 유효한 값이어야 합니다.

:root {
  --box-size: 100px;
}

.box {
  width: var(--box-size);
  height: var(--box-size);
}

반대로 다음과 같이 해당 CSS 속성에서 사용할 수 없는 값이 들어가면 선언이 정상적으로 적용되지 않습니다.

:root {
  --box-size: red;
}

.box {
  width: var(--box-size);
}

red는 width 속성의 유효한 값이 아니므로 너비에 적용할 수 없습니다.

8. 계산식과 함께 사용하기

CSS 변수는 calc() 함수와 함께 사용할 수 있습니다.

:root {
  --base-spacing: 8px;
}

.card {
  padding: calc(var(--base-spacing) * 2);
  margin-bottom: calc(var(--base-spacing) * 3);
}

기준값 하나를 사용해 여러 크기를 계산할 수 있기 때문에 간격 체계를 일관되게 관리하는 데 유용합니다.

:root {
  --unit: 4px;
}

.component {
  padding: calc(var(--unit) * 4);
  gap: calc(var(--unit) * 2);
  border-radius: calc(var(--unit) * 2);
}

9. 반응형 스타일에 활용하기

CSS 변수는 미디어 쿼리 안에서 값을 변경할 수도 있습니다.

:root {
  --page-padding: 16px;
  --title-size: 28px;
}

@media (min-width: 768px) {
  :root {
    --page-padding: 32px;
    --title-size: 40px;
  }
}

main {
  padding: var(--page-padding);
}

h1 {
  font-size: var(--title-size);
}

화면 크기에 따라 개별 스타일을 반복해서 작성하는 대신 변수값만 변경하여 전체 레이아웃을 조정할 수 있습니다.

10. 테마 전환에 활용하기

CSS 변수는 라이트 모드와 다크 모드 같은 테마 기능을 구현할 때 특히 유용합니다.

:root {
  --background-color: #fff;
  --text-color: #222;
  --card-background: #f5f5f5;
}

[data-theme="dark"] {
  --background-color: #111;
  --text-color: #eee;
  --card-background: #222;
}

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

.card {
  background-color: var(--card-background);
}

HTML 요소에 테마 속성을 지정하면 해당 영역의 변수값이 변경됩니다.

<html data-theme="dark">

각 요소의 색상을 개별적으로 다시 선언하지 않고, 테마별 변수만 변경하면 전체 디자인을 전환할 수 있습니다.

11. 실무 활용 예시

실무에서는 색상, 여백, 글꼴 크기, 테두리, 그림자 등의 디자인 값을 변수로 관리할 수 있습니다.

:root {
  --color-primary: #2563eb;
  --color-danger: #dc2626;
  --color-text: #222;
  --color-background: #fff;

  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;

  --font-size-small: 14px;
  --font-size-base: 16px;
  --font-size-large: 24px;

  --border-radius-small: 4px;
  --border-radius-medium: 8px;

  --shadow-card: 0 2px 8px rgb(0 0 0 / 10%);
}

이 변수들은 여러 컴포넌트에서 공통으로 사용할 수 있습니다.

.button {
  padding: var(--spacing-small) var(--spacing-medium);
  color: white;
  background-color: var(--color-primary);
  border-radius: var(--border-radius-small);
}

.card {
  padding: var(--spacing-large);
  color: var(--color-text);
  background-color: var(--color-background);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-card);
}

이처럼 공통 디자인 값을 변수로 관리하면 스타일의 일관성을 유지하기 쉽고, 전체 디자인을 수정할 때도 변경 범위를 줄일 수 있습니다.

12. 브라우저 지원

CSS 변수와 var() 함수는 현대적인 주요 브라우저에서 표준 기능으로 지원됩니다.

따라서 일반적인 웹사이트나 웹 애플리케이션에서는 별도의 플러그인이나 전처리 도구 없이 사용할 수 있습니다.

다만 Internet Explorer와 같은 오래된 브라우저는 CSS 변수를 지원하지 않습니다. 이러한 브라우저까지 지원해야 한다면 일반 CSS 값을 먼저 선언하는 방식으로 대체 스타일을 제공할 수 있습니다.

.button {
  background-color: #2563eb;
  background-color: var(--primary-color);
}

CSS 변수를 지원하지 않는 브라우저는 두 번째 선언을 무시하고 첫 번째 값을 사용합니다.

정리

CSS 변수는 반복되는 스타일 값을 이름으로 정의하고 여러 곳에서 재사용할 수 있게 해주는 표준 CSS 기능입니다.

변수 이름은 --로 시작하며, var() 함수로 값을 참조합니다.

:root {
  --main-color: #333;
}

body {
  color: var(--main-color);
}

문서 전체에서 사용할 값은 주로 :root에 선언하고, 특정 컴포넌트나 영역에서는 같은 변수를 다시 선언하여 값을 변경할 수 있습니다.

CSS 변수는 상속과 캐스케이드 규칙을 따르며, 폴백 값, 계산식, 반응형 스타일, 테마 전환 등에도 활용할 수 있습니다. 이를 적절히 사용하면 스타일의 중복을 줄이고 디자인 시스템을 더 일관되고 효율적으로 관리할 수 있습니다.

반응형

'개발 > CSS' 카테고리의 다른 글

CSS. 중앙 정렬 방법 정리  (0) 2026.07.11
CSS visibility 상속과 재정의 규칙 정리  (0) 2026.04.29
'개발/CSS' Related Articles more