[CSS] CSS 변수 사용하기

CSS 변수 사용하기

CSS 변수란 ?

사용자 지정 변수로 CSS의 속성을 미리 정의해놓고, 여러 곳에서 사용할 수 있는 변수를 의미합니다.

웹사이트에서는 보통 많은 양의 CSS를 가지고 있습니다. color나 size 등의 많은 값이 반복적으로 사용이 됩니다.

이때, CSS변수를 사용해주면 반복되는 코드를 줄일 수 있습니다.

 

또한,  같은 색상을 여러 곳에서 사용을 했을때  색상의 값을 바꿔야 하는 상황이 온다면 일일이 값을 변경해줘야 합니다.

하지만 CSS 변수를 사용하면 선언해 준 변수의 값만 바꿔주면 되기 때문에 수고로움을 덜을 수 있습니다.

 

또한, 변수의 명을 따로 지정해주기 때문에 더 직관적이고 가독성있게 코드를 확인할 수 있습니다.

 

pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

기본 사용법

* 변수는 두개의 붙임표, (--)와 함께 사용됩니다.

* 변수는 대소문자를 구분합니다. --my-bg-color와 --My-bg-color는 서로 다른 속성으로 처리합니다.

 

[css]

지정 element

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

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

 

HTML 문서 전체

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

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

---

CSS 적용

위의 내용을 참고하여, css 변수 값을 선언해주었다면, class에 속성값을 넣어 적용해주어야 합니다.

아래의 코드와 같이 css 변수를 사용하려면  var(사용자 지정 속성 이름)을 작성하여 주시면 됩니다.

저는 앞서 --main-bg-color 라는 변수 명을 지정해주었기 때문에 var( --main-bg-color) 이라고 속성값을 지정했습니다.

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

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

.two {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}

JavaScript

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

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

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

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

 

브라우저 호환

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

그러나 익스플로러에서는 지원하지 않습니다.

CSS변수를 익스플로러에서 사용하려면 아래 포스팅을 참조해주세요.

 

eunyoe.tistory.com/entry/CSS-root-%EA%B0%80%EC%83%81%EC%84%A0%ED%83%9D%EC%9E%90%EB%A5%BC-%ED%86%B5%ED%95%9C-css-%EB%B3%80%EC%88%98-IE-%EC%A0%81%EC%9A%A9%EB%B0%A9%EB%B2%95