CSS 변수로 블로그 테마 색상 바꾸는 법 — 코드 한 곳만 수정하면 전체가 바뀐다

 

CSS 변수로 블로그 테마 색상 바꾸는 법

 

CSS 변수로 블로그 테마 색상 바꾸는 법 — 코드 한 곳만 수정하면 전체가 바뀐다

 

"CSS 변수" 하나만 제대로 쓰면, 블로그 전체 색상을 바꾸는 데 5분도 안 걸린다. 예전에는 블로그 테마 색상 바꾸려고 CSS 파일 전체를 Ctrl+F로 뒤지면서 색상 코드 하나하나 수정했던 적이 있다. 그러다 한 곳을 빠트려서 버튼 색이랑 헤더 색이 따로 노는 상황도 겪었다. CSS 변수를 쓰기 시작한 뒤로는 그런 실수가 완전히 사라졌다. 마치 설정 파일 하나만 바꾸면 프로그램 전체가 업데이트되는 것처럼.

 

📋 목차

• CSS 변수(Custom Properties)가 뭔가
• 변수 선언하는 방법 — :root가 핵심이다
• 변수 적용하는 법 — var() 함수 사용법
• 블로그 테마 색상 체계 한 번에 잡기
• 다크 모드를 CSS 변수로 구현하는 법
• 티스토리에 CSS 변수 적용하는 실전 순서
• 알아두면 쓸모 있는 CSS 변수 팁 3가지
• 정리

🧪 CSS 변수(Custom Properties)가 뭔가

"CSS 변수"는 CSS 안에서 값을 저장하고 재사용하는 기능이다. 프로그래밍 언어의 변수 개념과 동일하다. 색상 코드, 폰트 크기, 간격 등 자주 쓰는 값을 변수에 담아두고 필요한 곳에서 불러 쓴다. 2020년 기준으로 모든 주요 브라우저가 지원한다. IE는 지원 안 하지만, 이제 IE를 신경 쓸 시대가 아니다.

공식 명칭은 CSS Custom Properties지만, 개발자들 사이에서는 그냥 CSS 변수라고 부른다. 앞에 --(하이픈 두 개)를 붙이는 게 규칙이다.

📝 변수 선언하는 방법 — :root가 핵심이다

변수는 :root 선택자 안에 선언하는 게 기본이다. :root는 HTML 문서 전체의 최상위를 가리키므로, 여기에 선언된 변수는 페이지 어디서든 접근할 수 있다.

:root {
  --color-primary: #3B82F6;    /* 메인 브랜드 색상 */
  --color-secondary: #10B981;  /* 보조 색상 */
  --color-text: #1F2937;       /* 본문 텍스트 */
  --color-bg: #FFFFFF;         /* 배경색 */
  --color-border: #E5E7EB;     /* 테두리 */
  --font-size-base: 16px;
  --spacing-md: 24px;
  --border-radius: 8px;
}

색상뿐 아니라 폰트 크기, 여백, 모서리 반경도 변수로 관리하면 나중에 수정이 훨씬 편하다. 주석으로 어디에 쓰는 변수인지 써두는 습관을 들이자.

🔗 변수 적용하는 법 — var() 함수 사용법

선언한 "CSS 변수"를 실제로 쓸 때는 var() 함수를 쓴다.

/* 기존 방식 */
.header {
  background-color: #3B82F6;
  color: #FFFFFF;
  padding: 24px;
}

/* CSS 변수 적용 후 */
.header {
  background-color: var(--color-primary);
  color: var(--color-bg);
  padding: var(--spacing-md);
}

이제 블로그 메인 색상을 바꾸고 싶으면 :root의 --color-primary 값 하나만 수정하면 된다. 헤더, 버튼, 링크, 강조 박스 — 이 변수를 쓰는 모든 요소가 한 번에 바뀐다.

var()는 폴백(fallback) 값도 지정할 수 있다.

color: var(--color-primary, #3B82F6);

변수가 정의되지 않았을 때 대신 쓸 기본값을 콤마 뒤에 넣는다. 다른 스킨과 충돌할 때 안전망이 되어준다.

🎨 블로그 테마 색상 체계 한 번에 잡기

블로그 CSS 변수 체계를 처음 잡을 때 내가 쓰는 구조다.

:root {
  /* 브랜드 색상 */
  --brand-main: #2563EB;
  --brand-light: #DBEAFE;
  --brand-dark: #1E40AF;

  /* 텍스트 */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;

  /* 배경 */
  --bg-page: #F9FAFB;
  --bg-card: #FFFFFF;
  --bg-code: #F3F4F6;

  /* 테두리 & 구분선 */
  --border-color: #E5E7EB;
  --divider: #D1D5DB;

  /* 타이포그래피 */
  --font-title: 1.75rem;
  --font-body: 1rem;
  --line-height: 1.8;

  /* 레이아웃 */
  --max-width: 760px;
  --gap: 32px;
}

처음에 이 변수들을 세팅해두면, 이후 디자인 수정은 :root만 건드리면 된다. 리브랜딩할 때 CSS 파일 전체를 검색할 필요가 없다.

🌙 다크 모드를 CSS 변수로 구현하는 법

CSS 변수의 가장 강력한 활용처 중 하나가 다크 모드다. 미디어 쿼리로 변수 값만 덮어씌우면 된다.

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --bg-page: #111827;
    --bg-card: #1F2937;
    --border-color: #374151;
  }
}

prefers-color-scheme: dark는 사용자 기기가 다크 모드로 설정되어 있을 때 적용된다. 변수만 바꾸면 나머지 CSS는 그대로 다크 모드로 전환된다. 이게 "CSS 변수"를 써야 하는 이유 중에 제일 설득력 있는 케이스다.

🛠️ 티스토리에 CSS 변수 적용하는 실전 순서

티스토리 관리자 → 꾸미기 → 스킨 편집 → CSS 탭으로 들어간다. CSS 파일 맨 위에 :root { } 블록을 추가하고 변수를 선언한다. 그 다음 기존 CSS에서 색상 코드, 폰트 크기 등 반복적으로 쓰인 값들을 변수로 교체하면 된다.

처음에 한꺼번에 다 바꾸려 하지 말고, 메인 컬러 하나만 변수로 먼저 바꿔보는 것부터 시작하자. 그게 제일 리스크가 낮다. 변수 교체 후 저장하고 블로그를 새로고침해서 이상 없으면 다음 단계로 진행하면 된다.

💡 알아두면 쓸모 있는 CSS 변수 팁 3가지

첫 번째, 변수는 상속된다. 부모 요소에 선언한 변수는 자식 요소에서도 쓸 수 있다. :root가 아닌 특정 컴포넌트 안에서만 쓸 변수는 해당 클래스 안에 선언해도 된다.

두 번째, JavaScript에서도 CSS 변수를 읽고 쓸 수 있다. getComputedStyle과 setProperty로 런타임에 변수 값을 변경할 수 있다. 토글 버튼으로 테마를 바꾸는 UI를 만들 때 유용하다.

세 번째, 변수 이름에 규칙을 정해두자. --color-, --font-, --spacing- 같은 prefix를 붙이면 나중에 변수가 많아져도 찾기 쉽다. 혼자 관리하는 블로그라도 이 습관이 3개월 뒤 본인을 구해준다.

✅ 정리

"CSS 변수"는 블로그 디자인 관리의 난이도를 한 단계 낮춰주는 도구다. 한 번 세팅해두면 테마 색상 전환이 몇 초 안에 끝난다. 다크 모드 대응, 리브랜딩, 계절별 테마 변경까지 전부 :root 블록 수정 하나로 해결된다. 지금 당장 블로그 CSS 맨 위에 :root { } 추가하고 메인 컬러 변수부터 하나씩 만들어나가 보자.

---

참고 자료 및 출처

• MDN Web Docs — CSS Custom Properties: https://developer.mozilla.org/ko/docs/Web/CSS/Using\_CSS\_custom\_properties
• CSS-Tricks — A Complete Guide to Custom Properties: https://css-tricks.com/a-complete-guide-to-custom-properties/
• web.dev — prefers-color-scheme: https://web.dev/prefers-color-scheme/