CSS 전체 선택자 의미는 해당 문서에 존재하는 모든 HTML 태그 요소를 모두 선택하는 기능을 말합니다. * 기호를 사용하며 이 기호는 엑셀부터 시작해서 다른 프로그래밍 언어에서도 전체 선택으로 자주 사용됩니다.
CSS 전체 선택자
전체 선택자(the Universal Selector)는 HTML의 모든 요소를 선택하는 기능입니다. 태그, 속성명, 속성값, 클래스, 아이디 등 모든 요소가 선택됩니다.
전체 선택자를 나타내는 기호는 * 입니다. * 모양의 기호는 CSS 뿐만 아니라 다른 프로그래밍 언어에서도 대부분 전체를 나타내는 경우가 많으므로 알고 있으면 유용합니다.
* {
color: red;
}전체 선택자 사용시 모든 태그에 선언 블록의 효과가 적용됩니다. 아래 예시의 경우 전체 요소에 붉은 글씨(color :red;)가 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h1>전체 선택자</h1>
<h2>전체 선택자의 기호</h2>
<p>전체 선택자는 asterisk * 기호를 사용합니다.</p>
<ol class="apple">
<li id="banana">전체 선택자는 한 번에 많은 요소를 선택합니다.</li>
<li>대신 서버에 과부하를 줄 수 있으므로 사용시 조심해야 합니다.</li>
</ol>
</body>
</html>단, 전체 선택자의 경우 속도를 느려지게 합니다. 따라서 실제 서비스가 되는 웹페이지를 디자인 하는 경우 전체 선택자는 사용을 피하는 것이 유리합니다.