Frontend
html :root 의미
고수트
2023. 1. 5. 23:33
반응형
최상위 html Template에 아래와 같이 CSS 가 style에 설정되어 있는것을 보는 경우가 있다.
<style>
:root {
--main-color: red;
}
</style>
:root 는 CSS 가상 클래스의 일종이다.
CSS 가상 클래스는 선택자에 추가하는 키워드인데 포인터가 올라갔을떄 작동하는 :hover를 생각하면 이해가 쉽다.
즉, :root 를 사용하면 문서의 root 요소에 공통적인 속성을 넣을 수 있다.
html 의 경우에는 <html> 아래 사용할 수 있는 전역 변수를 지정할 수 있다.
예를 들면 아래와 같이 변수로 설정하면
<style>
:root {
--main-color: rgba(0, 0, 0, 1);
}
</style>
css 내부 에서 변수를 호출하여 공통적인 색상을 사용하게 할 수 있다.
div {
background: var(--main-color);
}반응형