CSS에서 :root 사용하기: 이유와 장점
CSS를 작성하다 보면 전역 변수를 정의할 때 :root 선택자를 사용하는 것을 종종 볼 수 있습니다. 그러나 많은 분들이 :root와 html의 차이점, 그리고 왜 :root를 사용하는지에 대해 궁금해하실 것입니다. 이번 포스트에서는 :root 선택자의 의미와 그 장점들에 대해 자세히 알아보겠습니다.
:root란 무엇인가?
:root는 CSS에서 문서의 루트 요소를 선택하는 선택자입니다. HTML 문서의 경우, :root는 항상 <html> 요소를 의미합니다. 따라서 :root 선택자를 사용하면 전체 문서에 적용되는 전역 변수를 정의할 수 있습니다.
:root 사용 예시
다음은 :root를 사용하여 CSS 변수를 정의하는 예시입니다:
:root {
/* Gray scale */
--gray-900: #1b1d1f;
--gray-800: #26282b;
--gray-600: #454c53;
--gray-500: #72787f;
--gray-400: #9ea4a8;
--gray-200: #e5e7eb;
--gray-100: #e8ebed;
--gray-50: #f7f7f8;
/* Primary color */
--blue: #3692ff;
}이제 위에서 정의한 변수를 사용하여 CSS 스타일을 지정할 수 있습니다:
body {
background-color: var(--gray-100);
color: var(--gray-900);
}
a {
color: var(--blue);
}왜 :root를 사용하는가?
-
특이성(Specificity):
:root선택자는 특이성이html선택자보다 약간 더 높습니다. 이는 CSS의 다른 규칙들과 충돌할 가능성이 적다는 것을 의미합니다. 따라서 전역 변수로 정의한 CSS 변수가 예기치 않게 다른 스타일에 의해 덮어씌워지는 것을 방지할 수 있습니다. -
명시적 의미:
:root는 전역 변수를 정의하는 목적을 명확하게 전달합니다. 다른 개발자가 코드를 읽을 때 이 선택자가 전역 변수를 정의하기 위해 사용된다는 것을 쉽게 이해할 수 있습니다. -
미래 호환성(Future Compatibility): CSS는 지속적으로 발전하고 있으며,
:root는 앞으로도 CSS 변수를 정의하는 표준 방식으로 남을 가능성이 높습니다. 이를 사용하면 향후 CSS 업데이트와의 호환성을 더 잘 유지할 수 있습니다. -
캡슐화(Encapsulation):
:root는 특정 HTML 요소에 한정되지 않기 때문에, 다양한 상황에서 좀 더 안정적으로 사용할 수 있습니다. 이는 CSS 변수가 다른 곳에서 참조되더라도 안정적으로 동작함을 의미합니다.
html 선택자를 사용할 수도 있지만...
기술적으로 html 선택자를 사용하여 동일한 효과를 얻을 수 있습니다. 예를 들어, 다음과 같이 작성할 수도 있습니다:
html {
--gray-900: #1b1d1f;
--gray-800: #26282b;
--gray-600: #454c53;
--gray-500: #72787f;
--gray-400: #9ea4a8;
--gray-200: #e5e7eb;
--gray-100: #e8ebed;
--gray-50: #f7f7f8;
--blue: #3692ff;
}그러나 위에서 언급한 이유들 때문에 대부분의 개발자들이 :root를 선호합니다.
결론
:root 선택자는 전역 변수를 정의할 때 명확하고 안정적이며, 향후 호환성까지 고려할 때 매우 유용합니다. CSS를 작성할 때 :root를 활용하여 보다 일관되고 유지보수하기 쉬운 스타일을 만들어 보세요. 이러한 작은 습관이 쌓여 더욱 효율적이고 직관적인 코드 작성에 큰 도움이 될 것입니다.
