초보자를 위한 CSS 변수 설명

Source: Dev.to

Introduction

CSS를 작성할 때 같은 색상, 글꼴 크기, 혹은 간격 값을 반복해서 사용하게 됩니다. 이런 반복은 코드 유지보수를 어렵게 만들죠. CSS 변수(또는 CSS 사용자 정의 속성)는 값을 한 곳에 저장하고 스타일시트 전체에서 재사용할 수 있게 해줌으로써 이 문제를 해결합니다.

이 가이드는 절대 초보자를 위한 아주 간단한 예시를 통해 CSS 변수를 단계별로 설명합니다.

What Are CSS Variables?

CSS 변수는 CSS에서 정의된 재사용 가능한 값입니다.

--main-color: blue;

여기서 --main-color는 blue 값을 저장합니다.

Why Use CSS Variables?

CSS 변수는 코드를 다음과 같이 만들어 줍니다:

• 읽기 쉬움
• 업데이트가 빠름
• 일관성 향상
• 대규모 프로젝트에 적합

값을 한 곳에서 바꾸면 모든 곳에 자동으로 적용됩니다.

How to Define CSS Variables

Using the :root Selector

전역 변수를 정의할 때 가장 일반적이고 권장되는 방법은 :root 선택자를 사용하는 것입니다.

:root {
  --primary-color: #3498db;
  --spacing-unit: 1rem;
}

브라우저는 변수가 사용된 모든 위치에 저장된 값으로 대체합니다.

Local (Scoped) CSS Variables

변수는 특정 선택자 안에서도 정의할 수 있으며, 그 경우 범위가 제한됩니다.

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

이 변수는 .card 내부에서만 동작합니다.

Using Fallback Values

변수가 없을 경우를 대비해 대체값을 제공할 수 있습니다.

color: var(--secondary-color, black);

--secondary-color가 정의되지 않았다면 텍스트 색상은 black으로 대체됩니다.

Common Use Cases for CSS Variables

• 테마 색상 (라이트 / 다크 모드)
• 글꼴 크기
• 간격 값
• 재사용 가능한 레이아웃 치수
• 디자인 시스템

Beginner Mistakes to Avoid

• 변수를 정의할 때 앞에 --를 빼먹는 경우.
• var() 함수를 사용하지 않고 변수를 사용하는 경우.
• 불필요하게 많은 변수를 정의하는 경우.
• 전역 값을 위해 :root를 사용하지 않는 경우.

Conclusion

CSS 변수는 강력하면서도 초보자 친화적인 기능으로, 더 깔끔하고 스마트하며 유지보수가 쉬운 CSS를 작성하도록 도와줍니다. 값을 중앙 집중화함으로써 중복을 줄이고 향후 업데이트를 손쉽게 할 수 있습니다.