CSS 사용자 지정 속성(변수) 사용하기

 

 웹페이지 디자인 작업을 할 때 대부분은 대표적인 색상 몇가지를 정해놓고 작업을 해야 결과물이 난잡해지지 않는다.

완성된 디자인 시안을 가지고 프론트 엔드 작업을 하게 되는데, 이때 css에서 색상 코드를 사용하게 된다.

많은 색상을 다루다 보면 샵과 6개의 숫자로 이루어진 색상코드가 헷갈릴 때가 있는데, css에서 var 변수를 사용하면 번거로움을 조금은 줄일 수 있다. 

 

 대략적인 사용방법은,  위의 CSS 로고의 경우 색상 코드는 #3099D9 이다. 이 색상을 자주 사용하고 싶다면 lightBlue 라는 식으로 일단 편한대로 지정해준다. 그리고 불러오고 싶은 곳에서 var 를 넣어주고 lightBlue를 다시 적어주면 되는 것이다.

 

 

색상 선언의 예

:root {
	--lightBlue: #3099D9;
	--mainBlue: #133796;
	--pink: #CE3E9C;
}

 

 보편적으로 CSS 파일의 제일 상단에 자주 쓰게 될 색상을 지정해준다.

콜론 뒤에 최상위 위치인 root를 지정하고 2개의 대쉬 뒤에 자신이 외우기 쉬운 색상 이름을 선언한다. 그 뒤에 색상코드를 대입하면 끝.

 

 

사용의 예

body {
	background-color: var(--pink)
}

nav {
	border-bottom: var(--mainBlue)
}

nav .text {
	color: var(--lightBlue)
}

 적용시에는 색상을 사용하고 싶은 곳에 변수 var 를 입력하고 괄호안에 대쉬 두개와 자신이 임의로 선언한 색상 이름을 넣어준다.