:root
CSS에서 문서의 최상위 요소를 나타낸다.
브라우저에서는 <html> 태그를 의미한다.
목적
주로 CSS 변수를 선언하는 데 사용된다.
전역 스타일 적용에도 사용할 수 있으나, 일반적으로 변수 선언에 많이 쓰인다.
예시
:root {
--primary-color: #3498db;
--font-size: 16px;
}
body {
color: var(--primary-color);
font-size: var(--font-size);
}* (Universal Selector)
모든 요소를 삭 선택한다.
목적
문서 내 모든 요소에 스타일을 적용할 때 사용된다.
브라우저의 기본 스타일 초기화나 기본 스타일 설정에 많이 쓰인다.
너무 많은 요소에 복잡한 스타일을 적용할 경우 주의가 필요하다.
예시
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}:root vs *
| 특징 | :root | * |
|---|---|---|
| 적용 범위 | 문서 최상위 요소 (<html>) | 문서 내 모든 요소 |
| 주요 사용 목적 | CSS 변수 선언, 전역 스타일 관리 | 초기화, 기본 스타일 설정 |
| 사용 사례 | 변수 선언: --primary-color, 전역 접근 | Reset CSS, 기본 마진/패딩 제거 |
| 성능 고려 | 제한적 적용 | 모든 요소에 적용하므로 성능에 영향 가능 |
목적에 따라 올바르게 사용하여 유지보수성과 성능을 모두 챙겨보자!
난멋져