CSS 변수 사용(CSS Variables)

qpress 2020년 1월 21일 59

CSS는 원래 프로그램 언어가 아니라, Mark-up 언어이기 때문에, 변수를 사용할 수 없었다.

간단한 CSS에서는 굳이 변수를 사용할 필요가 없지만, 복잡하고 코드량이 많은 CSS에서는 자주 사용하는 값을 변수로 할당하고, 재사용하는 것이 필요해 진다.

오랜동안 CSS 변수 사용 등 CSS의 기능성을 추가 해 주는 Less와 같은 자바스크립트 라이브러리 또는 Sass와 같은 Processor가 널리 사용 되어 왔는데, 사실 그 불편함은 적지 않았다고 볼 수 있다.

최근에 CSS Custom Properties가 지원되면서 CSS 파일 또는 코드 내에서 별도의 외부 라이브러리 없이 변수를 사용할 수 있게 되었는데, 물론 최신 브라우저에서만 지원이 되고 Explorer는 지원하지 않는다.

Explorer의 경우는 CSS 변수를 사용할 수 있는 별도의 JavaScript 라이브러리를 사용하면 되는데, 그 사용법은 별도로 다루도록 하고, 여기서는 CSS 변수 사용방법을 간략히 설명 하고자 한다.

우선 아래의 W3schools.com에서 내용을 쉽게 이해할 수 있고 테스트도 가능하니, 먼저 참고하는 것이 좋을 듯 하다.

변수 선언

CSS 변수의 선언은 :root 또는 body 선언 부분에서 지정한다.
변수명은 반드시 ‘–‘ 기호로 시작하고, 변수의 사용 시에도 이 기호를 반드시 붙여 주어야 한다.

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

또는

body {
  --main-bg-color: coral;
}

변수의 사용

지정된 변수의 사용은 var() Function을 통해 사용할 수 있다.

#div1{
  background-color : var(--main-bg-color);
}