CSS Global 변수 사용법

CSS Global 변수 사용법

:root{

 --color-red : #111111

 --color-orange : #111111

 --color-yellow : #111111

 --color-green : #111111

 --color-blue : #111111

}

 

.class or id or tag etc... {

 color : var(--color-red);

}

 

위와 같은 식으로 사용할 수 있다.

따라서 보통 색, 폰트, 크기 등의 자주 사용하는 값 또는 수치 등을 미리 정의하고, 필요한 곳에서 참조하도록 한다.

>> '--' CSS 에서 정의한 custom 변수 설정 방법

 

또한 이것을 이용하여 calc 도 사용할 수 있다.

 

ex)

input {

  font-size : calc(var(--font-size-normal) * 2);

}

 

calc 를 적절하게 사용하면 global 변수를 불필요하게 추가하지 않아도 된다.