CSS 변수 사용 방법

css 변수란?
사용자 지정 변수로 CSS의 속성을 미리 정의해놓고, 여러 곳에서 사용할 수 있는 변수를 의미합니다. 웹사이트에서는 보통 많은 양의 CSS를 가지고 있습니다. color나 size 등의 많은 값이 반복적으로 사용이 됩니다. 이때, CSS변수를 사용해주면 반복되는 코드를 줄일 수 있습니다.

 

기본 문법

• 변수는 두개의 붙임표, (--)와 함께 사용
• 변수는 대소문자 구분, --my-bg-color와 --My-bg-color는 서로 다른 속성으로 처리

지정 element
해당 element에만 css 변수값을 적용할 거라면, 위와 같은 방법으로 사용해주시면 됩니다.

element { 
  --main-bg-color: red; 
}

html 문서 전체
HTML 문서 전체에서 사용하려면 :root의 가상선택자를 사용하여 공통의 스타일을 선언해줍니다.

:root { 
  --main-bg-color: red;
}

 

css 적용
위의 내용을 참고하여, css 변수 값을 선언해주었다면, class에 속성값을 넣어 적용해주어야 합니다. 아래의 코드와 같이 css 변수를 사용하려면 var(사용자 지정 속성 이름)을 작성하여 주시면 됩니다.

:root { 
  --main-bg-color: brown; 
}
.one { 
  color: white; 
  background-color: var(--main-bg-color); 
} 
.two { 
  color: white; 
  background-color: var(--main-bg-color); 
}

javascript

자바스크립트에서도 css와 같이 변수를 사용할 수 있습니다.

// 인라인 스타일에서 변수 얻기 
element.style.getPropertyValue("--my-var"); 

// 어느 곳에서나 변수 얻기 
getComputedStyle(element).getPropertyValue("--my-var"); 

// 인라인 스타일에 변수 설정하기 
element.style.setProperty("--my-var", jsVar + 4);