CSS 전체 선택자 의미와 사용법 및 예제


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>

단, 전체 선택자의 경우 속도를 느려지게 합니다. 따라서 실제 서비스가 되는 웹페이지를 디자인 하는 경우 전체 선택자는 사용을 피하는 것이 유리합니다.