-
html :root 의미Frontend 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); }반응형'Frontend' 카테고리의 다른 글
Javascript 접속 브라우저 설정된 언어 확인하는 법 (0) 2023.01.17 meta 태그 및 og 의미 (0) 2023.01.06 javascript defer 의미 (0) 2023.01.04 npm 원하는 특정 버전 설치 하는 법 (0) 2023.01.04 NVM 에서 원하는 node 버전 설치 후 사용하는 법 (0) 2023.01.03