CSS에서 *(별표) 선택자는 범용 선택자(Universal Selector)라고 불리며, HTML DOM 내의 모든 요소를 한 번에 선택할 때 사용됩니다. 특정 요소나 클래스를 지정하지 않고 문서 전체에 공통 스타일을 적용해야 할 때 매우 유용합니다.
기본 문법
CSS 범용 선택자의 기본 문법은 다음과 같습니다.
* {
/* 스타일 선언 */
}별표(*)만 단독으로 작성하면 문서 내 모든 요소에 동일한 스타일 규칙이 적용됩니다.
예제 1: 테이블 요소에 스타일 적용하기
다음 예제는 범용 선택자를 사용하여 페이지의 모든 요소에 여백, 패딩, 테두리, 그림자 효과를 일괄 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 15px;
padding: 5px;
border: 2px solid black;
box-shadow: inset 30px 0 8px lightblue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 테이블뿐만 아니라 html, body, table, tr, td 등 페이지의 모든 요소에 검은색 테두리와 하늘색 내부 그림자가 적용된 것을 확인할 수 있습니다.
예제 2: 가상 요소(::before)와 함께 활용하기
범용 선택자는 가상 요소와 조합하여 더욱 다양하게 활용할 수 있습니다. 아래 예제는 모든 요소에 너비와 테두리를 지정하고, html::before 가상 요소로 콘텐츠를 추가하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 15px;
padding: 5px;
width: 200px;
border: 2px solid black;
}
html::before {
content: "one";
}
</style>
</head>
<body>
two
<div>three
<div>four
<div>five</div>
</div>
</div>
</body>
</html>실행 결과
실행 결과를 보면 html 요소 앞에 "one"이라는 텍스트가 생성되고, 중첩된 div 요소들(three, four, five)까지 모두 200px 너비와 검은색 테두리가 적용됩니다. 이처럼 범용 선택자는 계층 구조와 관계없이 모든 요소에 스타일을 적용합니다.
범용 선택자 사용 시 주의사항
- 성능 영향: 모든 요소를 대상으로 하므로 대규모 문서에서는 브라우저 렌더링 성능에 영향을 줄 수 있습니다.
- 초기화(Reset) 용도: 주로
* { margin: 0; padding: 0; }형태로 브라우저 기본 스타일을 초기화하는 데 많이 사용됩니다. - 박스 크기 계산:
* { box-sizing: border-box; }를 적용하면 요소 크기 계산을 직관적으로 관리할 수 있습니다.
범용 선택자는 간단하지만 강력한 도구입니다. 다만 남용하기보다는 스타일 초기화나 전역 설정 등 필요한 상황에 적절히 활용하는 것이 좋습니다.