3. CSS 선택자(Selectors)

① CSS 선택자는 스타일을 적용시키고 싶은 HTML 요소를 선택하게 해준다.

  ㉠ 선택자는 5개로 분류된다.

    ⓐ 단순 선택자(Simple selectors)는 이름, id, 클래스로 요소를 선택하는 방법이다.

    ⓑ 결합자 선택자(Combinator selectors) 요소들의 관계를 이용해 요소를 선택하는 방법이다.

    ⓒ 의사 클래스 선택자(Psedo-class selectors)는 특정 상태를 이용해 요소를 선택하는 방법이다.

    ⓓ 의사 요소 선택자(Psedo-elements selectors)는 요소의 일부를 선택하고 스타일을 부여하는 방법이다.

    ⓔ 속성 선택자(Attribute selectors)는 속성이나 속성 값을 이용해 요소를 선택하는 방법이다.

② 단순 선택자에는 다음과 같은 선택자가 포함되어 있다.

  ㉠ CSS 요소 선택자(CSS Element Selector)는  HTML 요소를 선택하는 선택자이다.

p {
      color: red;text-align: right;
}

  ㉡ CSS id 선택자(CSS ID Selector)는 요소의 id로 페이지 내에 유일한 HTML 요소를 선택하는 선택자이다.

    ⓐ 요소를 선택하기 위해 id 속성을 사용한다.

    ⓑ 요소를 선택하기 위해 해쉬 문자를 사용해 요소의 id 앞에 작성한다.

#p1 {
      color: blue;text-align: left;
}

  ㉢ CSS 클래스 선택자(CSS Class Selector)는 클래스로 hTML 요소를 선택하는 선택자이다.

    ⓐ 요소를 선택하기 위해 클래스 속성을 사용한다.

    ⓑ 요소를 선택하기 위해 마침표(.)를 사용해 요소의 클래스 이름 앞에 작성한다.

.p1 {
      color: orange;text-align: right;
}

    ⓒ 특정 HTML 요소만 클래스의 영향을 받도록 지정할 수 있다.

p.p1 {
      color: green;text-align: right;
}

  ㉣ CSS 전체 선택자(CSS Universal Selector)는 페이지의 모든 HTML 요소를 선택하는 선택자이다.

* {
      color: purple;text-align: right;
}

  ㉤ CSS 그룹 선택자(CSS Grouping Selector)는 동일한 스타일의 모든 요소를 선택하는 선택자이다.

    ⓐ CSS 요소 선택자와 형태가 같다.

    ⓑ 그룹 선택자를 사용하면 코드를 최소화할 수 있다.

p {
      color: navy;text-align: right;
}

③ 쉼표(,)를 이용해 선택자들을 그룹화할 수 있다.

p, h1, h2 {
      color: black;text-align: center;
}