변수와 재사용

🎯 학습 목표

이 강을 마치면 여러분은 자주 쓰는 값을 한 곳에서 관리하고 여러 곳에서 재사용하여, 유지보수하기 좋은 CSS를 작성할 수 있게 됩니다. 지금까지 배운 것만으로도 페이지를 꾸밀 수 있지만, CSS가 길어질수록 같은 색·같은 크기를 여기저기 반복하게 됩니다. 이번 강에서는 그 반복을 없애는 CSS 변수를 배웁니다.

구체적으로는 세 가지를 배웁니다. 첫째, 왜 변수가 필요한지 이해합니다. 둘째, CSS 변수를 정의하고 사용하는 방법을 익힙니다. 셋째, 공통 스타일을 분리해 관리하는 요령을 살펴봅니다.

🔁 왜 변수가 필요한가

이 섹션에서는 CSS 변수가 해결하는 문제부터 살펴보겠습니다.

웹사이트를 만들다 보면, 같은 브랜드 색상을 버튼·제목·링크·테두리 등 수십 군데에 반복해서 쓰게 됩니다. 예를 들어 #3498db라는 파란색을 곳곳에 적었다고 해 봅시다. 그런데 나중에 브랜드 색을 다른 파랑으로 바꾸기로 하면 어떻게 될까요? 그 수십 곳을 일일이 찾아 하나씩 고쳐야 합니다. 하나라도 빠뜨리면 색이 어긋나 버립니다. 이는 매우 번거롭고 실수하기 쉬운 일입니다.

CSS 변수는 바로 이 문제를 해결합니다. 자주 쓰는 값을 이름을 붙여 한 곳에 저장해 두고, 필요한 곳에서는 그 이름을 불러 쓰는 것입니다. 그러면 나중에 값을 바꿀 때 저장해 둔 한 곳만 고치면, 그 변수를 쓴 모든 곳이 한꺼번에 바뀝니다. '한 번 정의하고 여러 번 사용한다'는 이 원리는 프로그래밍의 기본 정신이기도 합니다.

📦 변수 정의하기 — :root와 --이름

이 섹션에서는 CSS 변수를 정의하는 방법을 살펴보겠습니다.

CSS 변수는 이름 앞에 대시 두 개(--)를 붙여 만듭니다. 그리고 이 변수들은 보통 :root라는 특별한 선택자 안에 모아 정의합니다. :root는 문서의 최상단(html 요소)을 가리키는데, 여기에 정의하면 그 변수를 페이지 전체 어디서나 쓸 수 있습니다.

:root {
  --main-color: #3498db;
  --text-color: #333333;
  --spacing: 16px;
}

이 코드는 세 개의 변수를 정의합니다. --main-color에는 브랜드 파란색을, --text-color에는 본문 글자색을, --spacing에는 기본 여백 값을 저장한 것입니다. 변수 이름은 --main-color처럼 그 값이 무엇을 뜻하는지 알 수 있게 짓는 것이 좋습니다. 이렇게 CSS 맨 위 :root에 자주 쓰는 색과 크기를 한데 모아 두면, 이 사이트의 '디자인 설정값'을 한눈에 파악하고 관리할 수 있습니다.

🔗 변수 사용하기 — var()

이 섹션에서는 정의한 변수를 불러 쓰는 방법을 살펴보겠습니다.

정의한 변수는 var()라는 함수로 불러 씁니다. 값을 적어야 할 자리에 var(--변수이름)이라고 쓰면, 그 변수에 저장된 값이 대신 들어갑니다.

.button {
  background-color: var(--main-color);
  padding: var(--spacing);
}
.title {
  color: var(--main-color);
}

이 코드에서 var(--main-color)는 앞서 :root에 정의한 #3498db로 대체됩니다. 버튼의 배경색과 제목의 글자색이 모두 같은 변수를 쓰고 있는 것에 주목하세요. 이제 브랜드 색을 바꾸고 싶으면, :root의 --main-color 값 한 줄만 고치면 됩니다. 그러면 이 변수를 쓴 버튼·제목을 비롯한 모든 곳이 한꺼번에 새 색으로 바뀝니다. 수십 곳을 찾아 고치던 수고가 단 한 번의 수정으로 줄어드는 것입니다.

한 가지 유용한 기능을 덧붙이면, var()에는 대비값(기본값)을 함께 적을 수 있습니다. color: var(--main-color, black);처럼 쉼표 뒤에 값을 하나 더 쓰면, 혹시 --main-color 변수가 정의되어 있지 않을 때 대신 검정(black)이 쓰입니다. 변수가 없을 때 스타일이 통째로 사라지는 것을 막아 주는 안전장치인 셈입니다. 늘 필요한 것은 아니지만, 알아 두면 예기치 못한 상황에 대비할 수 있습니다.

이것이 CSS 변수의 강력함입니다. 색뿐 아니라 여백·글꼴·크기 등 반복되는 모든 값을 변수로 관리하면, 디자인을 일관되게 유지하고 손쉽게 바꿀 수 있습니다. 사이트의 전체적인 색조(테마)를 바꾸는 것도 변수 몇 개만 고치면 되니, 규모가 큰 프로젝트일수록 그 진가가 발휘됩니다.

🧹 공통 스타일 분리하기

이 섹션에서는 변수와 함께 CSS를 깔끔하게 관리하는 또 다른 요령, 공통 스타일 분리를 살펴보겠습니다.

변수가 '반복되는 값'을 관리하는 것이라면, 공통 스타일 분리는 '반복되는 스타일 묶음'을 관리하는 것입니다. 여러 요소가 똑같은 스타일 묶음을 공유한다면, 그것을 하나의 클래스로 만들어 재사용하는 것이 좋습니다. 10강에서 배운 클래스가 바로 이 역할을 합니다.

.card {
  padding: var(--spacing);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

<div class="card">첫 번째 카드</div>
<div class="card">두 번째 카드</div>

이렇게 카드에 공통으로 쓰는 스타일을 .card라는 클래스에 한 번 정의해 두면, 여러 요소에 class="card"만 붙여 똑같은 모양을 재사용할 수 있습니다. 스타일을 고칠 때도 .card 하나만 수정하면 모든 카드가 함께 바뀝니다. 이처럼 변수로 값을, 클래스로 스타일 묶음을 재사용하는 것이 유지보수하기 좋은 CSS의 핵심입니다. 같은 것을 반복하지 않는 이 습관은, 코드가 커질수록 큰 힘을 발휘합니다.

⚠️ CSS 변수를 다룰 때의 주의점

이 섹션에서는 흔한 실수를 정리하겠습니다.

첫 번째, 대시 두 개(--)를 빠뜨리는 것입니다. CSS 변수는 반드시 --main-color처럼 대시 두 개로 시작해야 합니다. 하나만 쓰거나 빠뜨리면 변수로 인식되지 않습니다.

두 번째, var()로 감싸지 않고 변수 이름만 쓰는 것입니다. 값을 쓸 때는 color: var(--main-color)처럼 반드시 var()로 감싸야 합니다. color: --main-color라고 쓰면 작동하지 않습니다.

세 번째, 변수 이름을 모호하게 짓는 것입니다. --color1, --x처럼 뜻을 알 수 없는 이름은 나중에 혼란을 줍니다. --main-color, --spacing처럼 역할이 드러나는 이름을 지으세요.

📝 핵심 요약

이번 강에서는 변수와 재사용을 배웠습니다.

• 왜 변수인가 — 반복되는 값을 한 곳에서 관리하면, 한 번의 수정으로 모든 곳을 바꿀 수 있어 유지보수가 쉽습니다.
• 정의 — 대시 두 개(--이름)로 만들고, 보통 :root에 모아 정의해 페이지 전체에서 씁니다.
• 사용 — var(--이름)으로 불러 쓰며, 변수 값을 바꾸면 그것을 쓴 모든 곳이 한꺼번에 바뀝니다.
• 공통 스타일 분리 — 반복되는 스타일 묶음은 클래스로 만들어 재사용하면 CSS가 깔끔해집니다.

여기까지 CSS의 주요 개념을 모두 배웠습니다. 다음 강부터는 이 모든 것을 종합해, 실제 웹 페이지를 만드는 실전으로 들어갑니다. 먼저 사이트의 얼굴인 헤더와 내비게이션을 만들어 보겠습니다. 다음 강 「실전 — 헤더·내비」에서 이어가겠습니다.

📚 참고 자료

• CSS 변수(사용자 지정 속성) 사용하기 — MDN Web Docs
• var() 함수 — MDN Web Docs
• :root 선택자 — MDN Web Docs