[CSS] 사용자 지정 CSS 속성 사용하기 ( CSS에서 변수 사용하기 )

CSS에서 사용자 지정 속성이란 JavaScript에서의 변수와 같이 문서 전반적인 부분에서 재사용할 임의의 값을 담는 속성을 말한다.

사용자 지정 속성은 전용 표기법을 정의하고 함수를 사용해 사용자 지정 속성을 사용할 수 있다.

사용법을 알아보면

사용자 지정 속성은 CSS 파일에서 위와같이 속성을 작성한다.

:root 의사 클래스에 선언한다. 이렇게 선언하면 어디서든지 해당 속성에 접근할 수 있다.

블럭안에와 동일하게 작성하지 않아도 되며

: (콜론) 기호의 왼쪽에는 사용할 변수명을 작성하며

: (콜론) 기호의 오른쪽에는 사용할 속성값을 작성한다.

*참고로 사용자 지정 속성은 대소문자를 구분하기 때문에 --text-Color 와 --text-color 는 다른 속성으로 처리된다.

이렇게 선언된 사용자 지정 속성은 아래와 같이 사용된다.

속성 값에 var키워드와 함께 선언한 속성을 사용할 수 있다.

var( 선언한 속성명);

이렇게 사용하게되면 해당 속성이 적용된 모든 색상을 한번에 동일한 색상으로 변경 할 수 있어 일일이 수정해줘야하는 번거러움이 줄어들어 유지보수에 좋다.