주요 선택자

4.1 타입 선택자

CSS에서 선택자는 스타일을 적용할 요소를 정의하는 데 사용돼. 주요 선택자는 타입, 클래스, 아이디 선택자와 전체 선택자가 포함돼있어. 각각의 선택자는 고유한 특성과 용도가 있어.

타입 선택자 (Type Selectors)

타입 선택자는 특정 타입의 모든 요소에 스타일을 적용해. 예를 들어, 모든 문단(<p>), 헤딩(<h1>, <h2> 등) 또는 다른 HTML 태그에 스타일을 적용할 수 있어.

    
      tagname {
        속성: 값;
        속성: 값;
      }
    
  

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

이 선택자는 문서 안의 모든 <p> 요소에 스타일을 적용해.

특징:

• 지정된 타입의 모든 요소에 적용돼
• 특정 타입의 모든 요소에 전역 스타일을 적용할 때 유용해

4.2 클래스 선택자

클래스 선택자는 특정 클래스가 있는 하나 이상의 요소에 스타일을 적용할 수 있어. HTML에서는 class 속성을 통해 클래스를 정의하고, CSS에서는 점(.)으로 표시돼.

문법:

    
      .classname {
        속성: 값;
        속성: 값;
      }
    
  

예시:

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

이 선택자는 button 클래스를 가진 모든 요소에 스타일을 적용해.

특징:

• 여러 요소에 동일한 클래스를 사용할 수 있어
• 다양한 요소에 동일한 스타일을 쉽게 적용할 수 있어

4.3 아이디 선택자

아이디 선택자는 고유 아이디를 가진 요소에 스타일을 적용해. HTML에서는 id 속성을 통해 아이디를 정의하고, CSS에서는 해시(#)로 표시돼.

문법:

    
      #uniq-id {
        속성: 값;
        속성: 값;
      }
    
  

예시:

이 선택자는 main 아이디를 가진 요소에 스타일을 적용해.

    
      /* #main 아이디를 가진 요소를 선택 */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">이 요소는 너비가 800px이야.</div>
      <div>이 요소는 스타일이 적용되지 않아.</div>
    
  

특징:

• 아이디는 페이지에서 유일해야 해
• 헤더나 메인 콘텐츠 같은 고유한 요소를 스타일링할 때 사용돼

4.4 그룹 선택자

그룹 선택자는 여러 요소에 동일한 규칙을 적용할 수 있어. 코드를 줄이고 스타일 관리를 쉽게 만들어줘.

문법:

    
      선택자, 선택자, … {
        속성: 값;
        속성: 값;
      }
    
  

예시:

    
      /* 모든 h1, h2, h3 요소를 선택 */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>헤딩 1</h1>
      <h2>헤딩 2</h2>
      <h3>헤딩 3</h3>
      <p>이 텍스트는 이 규칙에 의해 스타일링되지 않아.</p>
    
  

4.5 유니버설 선택자

유니버설 선택자는 페이지의 모든 요소에 스타일을 적용해. 별표(*)로 표시되며, 스타일을 리셋하거나 모든 요소에 공통 스타일을 적용하는 데 유용해.

문법:

    
      * {
        속성: 값;
        속성: 값;
      }
    
  

예시:

이 선택자는 페이지의 모든 요소에 스타일을 적용해, 여백을 리셋하고 박스 모델을 설정해.

    
      <div>문단 1</div>
      <div>문단 2</div>
    
  

    
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    
  

특징:

• 페이지의 모든 요소에 적용돼
• 전역 스타일 리셋이나 모든 요소에 기본 스타일 적용에 유용해