CSS의 :root 선택자는 HTML 문서의 최상위(root) 요소를 선택하여 스타일을 적용하는 데 사용됩니다. HTML 문서에서 루트 요소는 항상 <html> 태그이므로, 이 선택자를 활용하면 문서 전체에 영향을 주는 기본 스타일을 손쉽게 설정할 수 있습니다.
:root 선택자란?
:root 선택자는 문서 트리의 루트 요소를 가리키는 의사 클래스(pseudo-class)입니다. 특히 다음과 같은 경우에 유용하게 활용됩니다.
- 문서 전체의 기본 배경색, 글자색 등 글로벌 스타일 지정
- CSS 변수(Custom Properties)를 전역 범위에서 선언
- 테마 색상이나 폰트 크기 등 재사용 가능한 값 관리
예제
다음 코드를 실행하여 :root 선택자가 어떻게 동작하는지 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
:root {
background: blue;
color: white;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is demo text.</p>
</body>
</html>실행 결과
위 코드를 실행하면 페이지 전체 배경이 파란색으로 변경되고, 본문 텍스트는 흰색으로 표시됩니다. 이는 :root 선택자를 통해 루트 요소인 <html>에 스타일이 적용되었기 때문입니다.
:root와 html 선택자의 차이점
:root 선택자는 일반적인 html 태그 선택자보다 명시도(specificity)가 높습니다. 두 선택자가 동시에 사용될 경우 :root에 선언된 스타일이 우선 적용되므로, 중요한 전역 스타일이나 CSS 변수를 선언할 때 :root를 사용하는 것이 권장됩니다.