프로그래머로의 여정

범용 선택자(universal selector)

nunaaa 2025. 8. 18. 02:48

이 CSS 코드는 웹 페이지의 모든 요소에 대한 기본 스타일을 초기화(Reset)하는 것입니다. 구체적으로 다음과 같은 의미를 가집니다:

* {
    margin: 0;
    padding: 0;
}
  1. * (별표 선택자):
    • CSS에서 *는 "모든 HTML 요소"를 선택하는 범용 선택자(universal selector)입니다.
  2. margin: 0;:
    • 모든 요소의 바깥쪽 여백(margin)을 0으로 설정합니다.
    • 브라우저는 기본적으로 일부 요소(예: <body>, <h1>-<h6>, <p> 등)에 기본 margin 값을 적용하는데, 이를 제거합니다.
  3. padding: 0;:
    • 모든 요소의 안쪽 여백(padding)을 0으로 설정합니다.
    • 마찬가지로 브라우저 기본 padding 값을 제거합니다.

이러한 스타일 초기화(Reset CSS)를 사용하는 이유는:

  • 브라우저마다 다른 기본 스타일을 통일하기 위해
  • 디자인을 처음부터 완전히 제어하기 위해
  • 예상치 못한 여백이나 간격이 생기는 것을 방지하기 위해

주의점:

  • 이 방법은 모든 요소를 선택하기 때문에 성능에 약간 영향을 줄 수 있습니다.
  • 실제 프로젝트에서는 더 정교한 reset CSS나 normalize.css를 사용하는 경우가 많습니다.
  • 특정 요소(예: 리스트, 버튼 등)는 이 설정만으로는 완전히 초기화되지 않을 수 있습니다.