디자인키트 인스타그램 디자인키트 핀터레스트 디자인키트 비핸스 디자인키트

CSS 변수(CSS Variables) 완벽 가이드: 웹디자인 효율성을 높이는 방법

CSS 24.10.29

CSS 변수(CSS Variables)는 CSS에서 일관된 스타일 관리를 위해 등장한 기능으로, 

반복되는 값(색상, 폰트 크기, 여백 등)을 변수처럼 지정해 사용할 수 있게 해줍니다. 

이는 코드를 더 깔끔하고 유지보수하기 쉬운 방식으로 관리할 수 있게 해줍니다.



[ CSS 변수의 기본 문법과 사용법 ]

1. CSS 변수 선언

CSS 변수를 선언할 때는 --로 시작하는 이름을 사용하며, 보통 :root 선택자 내에서 전역적으로 선언합니다. 

:root는 문서의 최상위 루트 요소로, 모든 요소에서 접근할 수 있도록 변수의 범위를 설정해줍니다.

1
2
3
4
5
6
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
  --padding-base: 1rem;
}
cs


2. CSS 변수 사용

변수를 사용할 때는 var() 함수를 사용하여 선언한 변수를 호출합니다.

1
2
3
4
5
6
7
8
9
10
body {
  font-size: var(--font-size-base);
  color: var(--primary-color);
}
.button {
  background-color: var(--secondary-color);
  padding: var(--padding-base);
}
 
cs


3. 기본값 설정

var() 함수에서 두 번째 인수로 기본값을 설정할 수 있습니다. 변수가 정의되지 않았을 경우 대체값을 사용할 수 있습니다.

1
2
3
4
.container {
  color: var(--undefined-variable, #333); /* --undefined-variable이 없으면 #333 사용 */
}
 
cs


 

[ CSS 변수를 사용하는 장점 ]

1. 일관된 디자인 유지

색상, 폰트 크기, 여백 등 반복되는 스타일 속성을 한 곳에서 정의할 수 있습니다. 

한 번 수정으로 스타일 전체에 적용되므로 일관된 디자인을 유지하기가 수월합니다.


2. 유지보수 용이

스타일의 기본 값을 수정하려면 변수를 선언한 곳만 변경하면 됩니다.

 예를 들어 메인 색상을 변경해야 할 때 --primary-color 변수만 수정하면 전체 사이트에 일관되게 적용됩니다.


3. 반응형 디자인에 유용

CSS 변수는 미디어 쿼리 안에서 재정의가 가능하기 때문에, 다양한 화면 크기에 맞춰 값이 동적으로 변하게 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
:root {
  --font-size: 16px;
}
@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}
body {
  font-size: var(--font-size);
}
 
cs


[ CSS 변수의 활용 예시 ]

1. 다크 모드 구현 

CSS 변수는 색상 테마를 쉽게 관리할 수 있어 다크 모드와 라이트 모드를 손쉽게 전환할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root {
  --background-color: #fff;
  --text-color: #000;
}
.dark-mode {
  --background-color: #333;
  --text-color: #fff;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
 
cs

이렇게 하면 .dark-mode 클래스만 추가해도 색상이 다크 모드에 맞게 바뀌게 됩니다.


2. 반복되는 스타일 값 관리

웹사이트 전반에 걸쳐 동일한 스타일을 사용하고자 할 때 변수로 쉽게 관리할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
:root {
  --spacing: 20px;
}
.card {
  padding: var(--spacing);
  margin-bottom: var(--spacing);
}
.header {
  padding: var(--spacing);
}
 
cs



[ CSS 변수 사용 시 주의사항 ]

1. 구형 브라우저 지원 

CSS 변수는 IE11 등 일부 구형 브라우저에서는 지원하지 않으므로,프로젝트의 주요 사용자 브라우저 환경을 고려하여 적용해야합니다.


2. JavaScript와의 통합 CSS 변수는 JavaScript에서 쉽게 접근하고 수정할 수 있어, 동적 스타일링에도 유리합니다. 

예를 들어, 특정 이벤트에 따라 CSS 변수를 변경할 수 있습니다.

1
2
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
 
cs


CSS 변수를 사용하면 스타일을 더욱 효율적이고 쉽게 관리할 수 있어, 유지보수 및 확장성을 높일 수 있습니다.


목록으로

최근 포스트

© 디자인키트