:root 가상선택자와 CSS 변수

CSS에서 간단한 변수를 선언하고 사용할 수 있다는 사실에 대해서 알고 있는 사람은 알겠지만 모르고 있는 사람들도 있을 것 같아 친절한 내가 소개하려고 가져왔다.

 

내가 친절하다는 소리에 욕은 박지 말도록 하자

일단 :root 가상선택자에 대해서 먼저 이야기할텐데 그 이유는 CSS의 변수도 지역 변수, 전역 변수 같은(?) 개념이 있기 때문이다. CSS의 변수의 접근은 자신의 부모 엘리먼트에 선언된 변수에만 접근할 수 있다. 무슨 이야기냐 하면 아래의 이미지를 보자.

 

왼쪽의 그림처럼 엘리먼트를 HTML로 만들었다고 했을 때 오른쪽의 CSS를 적용했다고 하자.

box1에 정의한 변수는 box1의 자식 엘리먼트인 yellow에는 전달이 되지만

box2에서는 box1의 변수에 접근 할 수 없음을 보여준건데..... 보기 힘든건 이해한다. 암튼 위의 코드를 브라우저에서 확인해보면 아래와 같다.

.box2는 빨강색이 될 수 없었다고 한다.

그래서 일반적으로 CSS에서 변수를 선언할 때는 :root라는 가상선택자를 이용해 최상위 엘리먼트에 선언하여 모든 엘리먼트에서 변수를 사용할 수 있도록 하는 것이 보편적이다.(대표적으로 부트스트랩이 그렇다.)

부트스트랩에서 사용하는 변수 항목들

그렇다면 :root 라는 가상선택자가 뭔지부터 제대로 알아야하는데 간단하게 이야기하면 :root는 최상위 엘리먼트를 의미한다. HTML에서 최상위 엘리먼트란 html 태그를 의미한다. 그러면 CSS에서 간단하게 html 을 선택자로 잡고 선언하면 될 일을 왜 :root라는 가상선택자를 이용할까 궁금한 사람이 있을거다. 그 이유는 html 태그 이름을 선택자로 쓰면 우선순위에서 1점 밖에 안되지만 :root 가상 선택자는 class로 간주되어 10점이 되기 때문이다. 그래서 :root를 사용하는거라고 이해하면 되겠다.

 

CSS변수 만들기

CSS에서 변수를 선언하는 방법은 아래와 같다.

:root {
    --red : #DC3545;
    --blue : #007bff;
}

위의 코드처럼 하이픈(-)을 두개 쓰고 변수명을 쓴 다음 콜론(:)을 붙이고 값을 입력하면 된다.

 

CSS변수 사용하기

CSS에서 변수를 사용하는 방법은 조금(?) 다양하다.

 

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 값을 적용하게 된다.

 

CSS 변수를 적용할 수 없을 때 방어코드

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

위의 코드는 브라우저에서 CSS변수를 적용할 수 없을 때를 대비하여 작성하는 방어코드로 변수 값을 적용 못 할때는 아래의 스타일 코드가 무시되고 위의 코드가 적용 되게끔 만들어 놓은 방법이다.

 

사실 이런 CSS 변수 사용같은 경우 Internet Explorer 에서는 지원하지 않고 그나마 Edge에서는 지원하고 있지만 브라우저 버전을 꽤 타는 것이라 아직까지는 사용할 때 위의 방어코드를 작성해주는 것이 옳다.

 

브라우저 지원 현황

 

그러면 안녕!

 

무슨 내용을 썼을까 읽고 있는 여러분의 표정을 상상해보았다.