[CSS] 선택자(selector)

선택자(selector)

  - CSS에서 스타일을 적용할 대상을 선택하기 위해 사용

• 전체 선택자
• HTML 요소 선택자
• 아이디(id) 선택자
• 클래스(class) 선택자
• 그룹(group) 선택자

 

전체 선택자

  CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택

<style>
    * { color: red; }
</style>

 

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택

<style>
    h2 { color: teal; text-decoration: underline; }
</style>
...

<h2>이 부분에 스타일 적용</h2>

 

아이디(id) 선택자

  - CSS를 적용할 대상으로 특정 요소를 선택할 때 사용

  - 웹 페이지에 포함된 여러 요소 중 특정 아이디를 가지는 요소만을 선택

  - 아이디가 중복되면 에러가 날 수 있으니 다른 이름을 써주는 게 좋다.

<style>
    #heading { color: sandybrown; text-decoration: line-through; }
</style>
..
<h2 id="heading">이 부분에 스타일적용</h2>

 

클래스(class) 선택자

  - 특정 집단의 여러 요소를 한 번에 선택할 때 사용 > 클래스

  - 같은 클래스 이름을 가지는 요소들을 모두 선택

<style>
    .headings { color: deepskyblue; text-decoration: overline; }
</style>
...

<h2 class="headings">이 부분에 스타일 적용</h2>
<h3 class="headings">같은 스타일을 적용</h3>

 

그룹 선택자

  - 여러 선택자를 같이 사용하고자 할 때 사용

  - 여러 선택자를 쉼표(,)로 구분하여 연결

  - 코드 중복 작성을 방지하고 코드를 간결하게 만든다.

<style>
    h2 { color: salmon; }
    h2, h3 { text-align: center; }
    h2, h3, p { background-color: lightgray; }
</style>