CSS 전체 선택자(*)로 모든 요소 한 번에 선택하는 방법

CSS에서 문서 내 모든 요소를 한 번에 선택하려면 전체 선택자(Universal Selector)인 *를 사용합니다. 별표(*)는 페이지의 모든 HTML 요소를 대상으로 스타일을 적용할 수 있는 강력한 선택자입니다.

전체 선택자 기본 문법

* {
  속성: 값;
}

아래 예제에서는 * 선택자를 사용해 모든 요소의 글자 색을 파란색으로, 배경색을 주황색으로 지정했습니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         * {
            color: blue;
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <h1>Demo Website</h1>
      <h2>Learning</h2>
      <p id = "tutorials">Tutorials on web dev, programming, database, networking, etc.</p>
      <p>Every tutorials has lessons with illustrations and figures.</p>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 <h1>, <h2>, <p> 등 모든 요소에 동일한 스타일이 적용되어 글자는 파란색으로 표시되고, 배경은 주황색으로 채워집니다.

전체 선택자 활용 팁

전체 선택자는 주로 다음과 같은 용도로 활용됩니다.

기본 스타일 초기화: 브라우저마다 다른 기본 마진과 패딩을 제거할 때 * { margin: 0; padding: 0; } 형태로 자주 사용됩니다.
박스 크기 계산 통일: * { box-sizing: border-box; }를 적용하면 모든 요소의 크기 계산 방식을 일관되게 유지할 수 있습니다.
테스트 및 디버깅: 특정 스타일이 어떤 요소에 영향을 주는지 빠르게 확인할 때 유용합니다.

다만 전체 선택자는 모든 요소에 스타일을 적용하므로 남용하면 성능 저하나 의도치 않은 스타일 충돌이 발생할 수 있습니다. 필요한 범위에 한정해서 사용하는 것이 좋습니다.