css 변수 사용법

CSS 변수는 CSS에서 값을 저장하고 재사용할 수 있게 해주는 기능이다. 

1. 변수 선언

• 변수 이름은 두 개의 하이픈(--)으로 시작해야 한다.
• 변수 값은 유효한 CSS 값이어야 한다. (색상, 길이, 숫자 등)
• 변수는 :root 또는 특정 요소에 선언할 수 있다. :root에 선언된 변수는 전역적으로 사용 가능하다.
  ( CSS 변수는 상속된다 . 즉, 부모 요소에서 선언된 변수는 자식 요소에서 사용할 수 있다.)

CSS

 

:root {
  --primary-color: #e50914; /* 주요 색상 */
  --font-size: 16px; /* 글자 크기 */
}

.box {
  --width: 200px; /* box 요소 내부에서만 사용 가능한 변수 */
}

 

2. 변수 사용

• var() 함수를 사용하여 변수 값을 참조한다.

CSS

 

h1 {
  color: var(--primary-color); /* 주요 색상 적용 */
  font-size: var(--font-size); /* 글자 크기 적용 */
}

.box {
  width: var(--width); /* box 요소의 너비 */
  background-color: var(--primary-color); /* 배경색 적용 */
}

 

3. 변수 값 변경

• JavaScript를 사용하여 CSS 변수 값을 동적으로 변경할 수 있다.

JavaScript

 

// JavaScript
const root = document.documentElement; //document의 root 요소 가져오기
root.style.setProperty('--primary-color', '#007bff'); // --primary-color 변수의 값을 #007bff로 변경