1. :root

:root는 문서 트리의 루트 요소를 선택하는 가상 클래스입니다. HTML에서는 요소를 가리키며, 전역 CSS 변수를 선언할 때 주로 사용됩니다. :root에서 정의된 변수는 문서 전체에서 사용할 수 있어, 일관된 디자인 시스템을 구축하는 데 핵심적인 역할을 합니다.

2. CSS Variables

CSS Variables(CSS 사용자 정의 속성)는 --로 시작하는 이름을 가지며, var() 함수를 사용하여 값을 참조할 수 있습니다. 이를 통해 스타일을 더 쉽게 재사용하고 관리할 수 있습니다.

CSS Variables는 특히 브랜드 디자인 시스템을 구축할 때 매우 유용하며, 색상 시스템, 그리드 시스템, 아이콘 시스템 등의 카테고리로 나누어 체계적으로 관리할 수 있습니다.

<p>이 텍스트는 메인 컬러를 사용합니다.</p>

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

p {
  color: var(--main-color);
  padding: var(--pane-padding, 10px 20px);
  border: 1px solid black;
}

var은 첫번째 인자로 가져올 값의 변수 이름을, 두번째로는 해당 변수에 값을 가져오지 못했을 때 적용할 대체값을 작성합니다. 대체값은 필수는 아니지만 보다 안전하게 화면을 구성할 수 있다는 장점이 있습니다.

이렇게 변수를 이용하면 전체적인 디자인 일관성을 유지하기 쉽고, 수정이 필요할 때 한 곳만 수정하면 되기 때문에 유지보수성이 향상됩니다.

2.1 테마 전환

CSS 변수는 테마 전환에 특히 유용합니다. 다크 모드와 라이트 모드를 쉽게 구현할 수 있습니다.

:root {
  /* 라이트 모드 (기본) */
  --background-color: #ffffff;
  --text-color: #333333;
  --accent-color: #0066cc;
}

[data-theme='dark'] {
  /* 다크 모드 */
  --background-color: #222222;
  --text-color: #f0f0f0;
  --accent-color: #4d9fff;
}

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

a {
  color: var(--accent-color);
}

JavaScript에서는 간단히 아래와 같이 테마를 전환할 수 있습니다.

// 다크 모드로 전환
document.documentElement.setAttribute('data-theme', 'dark');

// 라이트 모드로 전환
document.documentElement.removeAttribute('data-theme');

:root {
  --color: red; /* 전체 기본값 */
}

.card {
  --color: blue; /* .card 안에서만 파란색 */
}

[data-theme='dark'] {
  --color: white; /* 다크 테마일 때 흰색 */
}