:root로 CSS 색상 전역 변수 정의하고 사용 방법

CSS의 :root 선택자를 사용해 색상 변수를 정의하면 웹 전역에서 쉽게 활용할 수 있습니다.
변수명만으로 색상을 적용할 수 있어 유지보수 효율이 높고, 코드 작성 시간도 단축됩니다.
또한 일관된 색상 체계를 유지해 웹 디자인 품질을 향상시킬 수 있습니다.

🗂️ css 전역변수

전역변수는 프로젝트 전반에서 공통적으로 접근할 수 있는 변수로, 코드 재사용성과 일관성을 높이는 핵심 요소이다.
공통 값이나 색상, 테마와 같이 여러 곳에서 반복적으로 사용하는 데이터를 한 곳에서 관리할 수 있다. CSS에서도 전역변수를 활용하면 색상이나 디자인 요소를 일괄적으로 변경할 수 있으며, HTML에서는 class나 :root를 통해 손쉽게 정의할 수 있다.
이러한 전역변수의 활용은 유지보수 효율을 높이고 코드 품질을 향상시키는 중요한 웹 개발 방법이다.

🔑 css 전역변수 정의 방법

전역변수는 프로젝트 전반에서 공통적으로 사용하는 요소를 한 번에 정의하고, 코드 전체에서 재사용할 수 있도록 돕는 핵심 개념이다.
CSS에서도 전역변수를 활용할 수 있으며, :root 선택자를 통해 손쉽게 정의할 수 있다.
예를 들어, 웹사이트의 색상 체계를 효율적으로 관리하기 위해 주요 색상을 다섯 가지로 구분해 전역변수로 설정하면 유지보수와 디자인 일관성을 높일 수 있다.
아래는 색상을 5가지로 구분하여 전역변수로 정의하였다.

:root {
    --color-b: #000000; /* 색상: 검정색 */
    --color-r: #ff0000; /* 색상: 빨강색 */
    --color-g: #00ff00; /* 색상: 녹색 */
    --color-b: #0000ff; /* 색상: 파란색 */
    --color-w: #ffffff; /* 색상: 하얀색 */
}

위처럼 전역변수를 정의했다면 코드 전체에서 정해진 변수를 사용할 수 있다.
전역변수를 정의해두면 프로젝트 내 모든 코드에서 동일한 값을 손쉽게 재사용할 수 있다.
CSS에서는 전역변수를 var(--변수명) 형태로 호출하며, 이렇게 하면 디자인 요소를 효율적으로 관리할 수 있다.
예를 들어, 위에서 전역변수로 정의된 색상 중 빨강색을 사용하려면 var(--color-r)처럼 작성하면 된다.
이 방법은 코드의 일관성을 유지하고, 사이트 전체의 색상 변경을 한 번에 적용할 수 있어 웹 개발 생산성을 높여준다.

🔑 css 전역 변수 사용 방법

CSS 전역 변수를 정의했다면, 이제 이를 활용하는 방법을 살펴보자.
전역 변수는 var(변수명) 형식으로 사용할 수 있으며, 스타일 속성에서 반복적으로 적용할 때 유용하다.
CSS는 공통 스타일을 정의하기 위해 class 형태로 작성하여 여러 요소에서 재사용할 수 있다.
이제 클래스를 생성하고 전역 변수를 적용해 보자.
아래 예시는 5가지 색상 전역 변수를 사용하여 각각의 class 스타일을 설정한 코드로, 시각적 테스트와 독립적인 색상 구분을 위해 구성되었다.

<head>
  <style>
    :root {
      --color-black: #000000;
      --color-red: #ff0000;
      --color-green: #00ff00;
      --color-blue: #0000ff;
      --color-white: #ffffff;
    }

    .box-black {
      background-color: var(--color-black);
    }

    .box-red {
      background-color: var(--color-red);
    }

    .box-green {
      background-color: var(--color-green);
    }

    .box-blue {
      background-color: var(--color-blue);
    }

    .box-white {
      background-color: var(--color-white);
    }

  </style>
</head>

코드를 살펴보면 굳이 전역변수를 사용할 필요가 있을지 고민될 수 있다.
공통적으로 사용하는 CSS 클래스를 잘 정의해도 동일한 효과를 얻을 수 있기 때문이다.
어떤 방식으로 작성하더라도 중요하지 않지만, 유지보수와 수정이 편리한 방향으로 코드를 구성하는 것이 좋다.
현재는 예제 코드이므로 색상별로 독립적인 CSS 클래스를 생성했다.

🔑전체 코드 보기

위에서 정의한 CSS 전역 변수를 활용해 실제 div 요소에 적용해 보자.
다섯 가지 색상 변수를 이용해 각각의 배경색을 가진 div 5개를 생성하고, 클래스에 전역 변수를 지정하여 색상이 올바르게 반영되는지 확인한다.
아래 예제 코드를 통해 CSS 전역 변수의 적용 결과를 직접 확인할 수 있다.

<!doctype html>
<html lang="ko">
<head>
  <style>
    :root {
      --color-black: #000000;
      --color-red: #ff0000;
      --color-green: #00ff00;
      --color-blue: #0000ff;
      --color-white: #ffffff;
    }

    .box-black {
      background-color: var(--color-black);
    }

    .box-red {
      background-color: var(--color-red);
    }

    .box-green {
      background-color: var(--color-green);
    }

    .box-blue {
      background-color: var(--color-blue);
    }

    .box-white {
      background-color: var(--color-white);
    }

  </style>
</head>
<body>
  <div class="box-black">&nbsp;</div>
  <div class="box-white">&nbsp;</div>
  <div class="box-red">&nbsp;</div>
  <div class="box-green">&nbsp;</div>
  <div class="box-blue">&nbsp;</div>
</body>
</html>

div의 배경색을 지정하기 위해 5가지 색상의 CSS 전역 변수를 정의하였다.
각 전역 변수는 class로 설정되어, div 요소에서 손쉽게 배경색을 적용할 수 있다.
이후 div마다 서로 다른 색상 클래스가 지정되어 다양한 배경색이 표현된다.
설명은 길지만 실제 코드는 간단하며, CSS 전역 변수로 배경색을 적용하는 기본 예제이다.

🔑 결과화면

이제 위 코드의 실행 결과를 살펴보자.
5가지 색상을 각각 class로 정의하고, div 요소에 해당 클래스를 적용하여 배경색(background) 을 지정하였다.
코드는 매우 간결하며, 필요한 요소를 정의한 뒤 그대로 활용하면 된다.
만약 div의 색상을 변경하고 싶다면, class에 지정된 전역 변수 값만 수정하면 즉시 색상이 변경된다.

이러한 작업의 목적은 명확하다.
새로운 코드를 처음부터 작성하는 데는 시간이 많이 들지만, 유지보수와 재사용을 통해 개발 효율을 높이는 것이 핵심이다.
모든 프로그램은 만드는 과정도 중요하지만, 유지보수·수정·재사용의 효율성이 장기적인 품질과 생산성을 결정한다.

Data Explorer

이 블로그 검색