<aside> ⚡

같은 색상을 배경 색으로도, 글자 색으로도 사용하고 싶은데, class 지정보다 더 편한 방법은 없을 까?

</aside>

웹 사이트를 제작할 때, 페이지의 통일성을 위해 같은 값을 반복하여 사용하게 된다. 여러 위치에 공통적으로 적용한 값을 바꿔야 하는 상황이 생겼을 때, 그 값들을 하나씩 찾아서 바꾸려면 시간도 오래 걸 릴 것이고, 실수가 생길 위험도 크다.

그래서 여타 프로그래밍 언어처럼 변수를 이용하면, 한 영역에 값을 저장해 놓고, 다른 여러 곳에서 참조할 수 있어 효율적인 프로그래밍이 가능해진다.

또 다른 장점은 의미를 가진 식별자를 사용한다는 것으로, #00FF00 보다는 --main-text-color가 이해하기 쉽다는 것이다. 특히 같은 색상을 다른 맥락에서 사용할 때 이 장점이 도드라진다.

📌 변수 선언하기

element {
	--primary: #2B63DB; /* --변수명: 값; */
}

변수를 선언할 때는, -- 로 시작하는 변수명과 함께, 사용할 CSS 값을 지정해 선언한다. 예시로 사용한 색상 뿐 아니라, 유효한 CSS 값이라면 어떤 속성이든 정의할 수 있다.

변수명은 대소문자를 구분한다. 따라서 --primary 와 --Primary 는 서로 다른 변수로 처리한다. 또한 CSS 변수 역시 하위 요소에 상속된다.

:root 의사 클래스 활용하기

:root {
	--primary: #2B63DB;
}

흔히 :root 의사 클래스에 선언해서 HTML 문서 어디에서나 변수에 접근할 수 있도록 구성한다. 범위를 제한해야 하는 경우가 있을 수 있으므로, 반드시 이렇게 선언해야 하는 것은 아니다.

📌 변수 사용하기

 element {
	 color: var(--primary); /* 속성: var(--변수명); */
 }

변수를 호출할 때에는 일반적인 값의 자리에 var() 함수를 지정하고, 매개변수로 변수명을 입력하면 된다.

변수 대체값 설정하기

color: var(--primary, blue); /* 속성: var(--변수명) */

변수값이 지정되지 않았거나 유효하지 않을 경우를 대비하여, 대체값을 정의할 수 있다. 위 예시에서 함수의 첫 번째 값은 변수명, 두 번째 값은 변수가 유효하지 않을 때 사용되는 선택적 대체값이다.