[HTML&CSS] :root 가상선택자

<일반 특성>

-CSS의 변수의 접근은 자신의 부모 엘리먼트에 선언된 변수에만 접근할 수 있다. -그래서 일반적으로 CSS에서 변수를 선언할 때는 :root라는 가상선택자를 이용해 최상위 엘리먼트에 선언하여 모든 엘리먼트에서 변수를 사용할 수 있도록 하는 것이 보편적이다.

<사용법>

1. 단순 사용

.box {
    background-color: var(--red);
}

위처럼 단순하게 변수를 참조하기 위해서는 var이라는 예약어와 괄호를 만들고 괄호 안에 변수명을 입력해주면 된다.

 

2. 변수값이 유효하지 않은 경우

.box {
    background-color: var(--red, #F00);
}

var 에 파라미터를 하나 더 포함시킬 수 있는데 이것은 입력한 변수가 유효한 값이 아닐 경우 적용되는 기본 값 정도로 이해하면 되겠다.

 

3. 변수값이 유효하지 않은 경우 다른 변수를 적용 할 때

.box {
    background-color: var(--red, var(--blue, #F00));
}

위 처럼 값을 적용하면 --red 값을 적용해보고 값이 유효하지 않은 경우 --blue값을 적용해본 다음 이마저도 유효하지 않다면 #F00 값을 적용하게 된다.

(출처: https://blog.thereis.xyz/136 [야훔의 저렴한 개발])