:root 의사 클래스
CSS의 :root 의사클래스는 문서 트리의 루트 요소를 선택한다. 가령 HTML 문서의 루트 요소는 <html> 요소이므로, :root와 html은 같다.
CSS 변수 (사용자 지정 속성)
CSS 변수(사용자 지정 속성)은 CSS 문서에서 전반적으로 재사용할 값을 담는다. 복잡한 웹사이트는 엄청난 양의 CSS를 가지고 있는데, 유지보수를 하다 보면 여러 곳에서 사용한 임의의 값을 한꺼번에 바꿔야 할 때가 있다. 그 값들을 하나씩 찾아서 일일이 바꾸려면 상당히 피곤할 것이고, 때에 따라 실수도 많을 것이다. 이 때, CSS 변수를 이용하면 CSS 전반에 걸쳐 사용되는 임의의 값을 변수에 저장하고, 해당 값을 써야 하는 요소들에 CSS 변수를 대입해줄 수 있다. 나중에 값을 바꿔야 할 때는, CSS 변수의 값만 바꿔주면 된다. 해당 CSS 변수를 쓰는 값들도 일괄적으로 바뀔테니까!
변수의 이름을 지정할 때는 변수 맨 앞에 --를 붙여주어야 한다. (--main-font-color, --background-color 이런식으로). 변수를 사용할 때는 var(변수명) 형식을 사용한다.
:root {
--main-font-color: #000f22; /* CSS 변수 선언 */
}
div {
color: var(--main-font-color); /* CSS 변수 사용 */
}위의 예제에서는 :root에서 변수를 선언했다. :root에서 CSS 변수를 선언하여 HTML 문서 어디에서나 해당 변수에 접근할 수 있도록 구성하는 것은 흔한 패턴이다.
CSS 변수의 상속
CSS 변수 역시 상속된다. 자식 엘리먼트에 값이 지정되지 않은 경우 부모 엘리먼트의 값을 상속받는데, CSS 변수로 선언된 값이라도 예외 없이 상속된다.
<div class='one'>
<div class='two'></div>
<div class='three'></div>
</div>.one {
--test: 10px;
font-size: var(--test);
}
.two {
--test: 2rem;
font-size: var(--test);
}
.three {
font-size: var(--test);
}.one의font-size: 10px.two의font-size: 2rem.three의font-size: 2rem
CSS 변수는 별도의 다른 규칙에서 사용하려고 만들어진 게 아니다. CSS 변수도 일반적인 CSS와 같이, 선택자가 일치하거나, 해당 선택자의 하위 항목일 경우에만 설정된다.
CSS 변수 대안 값
CSS 변수가 정의되지 않았을 때, var()를 이용해 여러 개의 대체 변수를 정의할 수 있다.
.newCustomer {
color: var(--new-font-color, orange); /* --new-font-color가 없으면 orange를 사용 */
}
.oldCustomer {
/* --old-font-color가 없으면 var(--normal-font-color, blue)를 사용한다
--normal-font-color가 없으면 blue를 사용한다 */
color: var(--old-font-color, var(--normal-font-color, blue));
}
.wrongBtn {
color: var(--old-font-color, --normal-font-color, blue); /* 유효하지 않은 방법 */
}유효하지 않은 CSS 변수를 처리하는 방법
브라우저가 유효하지 않은 var()를 만나면 그 속성의 초기값이나 상속된 값을 사용한다.
<div class='chicken'>I Love Ddobagi chicken... holy love... that's agape...</div>:root {
--chicken-color: 16px;
}
.chicken {
color: blue;
}
.chicken {
color: var(--chicken-color); /* color: 16px은 유효하지 않음 */
}div.chicken에 유효하지 않은 color 값이 들어갔다. 이 경우... div.chicken의 부모 엘리먼트의 color 속성값을 상속받는다. 그런데 div.chicken는 부모 엘리먼트가 없으므로, 브라우저의 기본 값이 들어간다.
참고
