[CSS] 선택자 (Selector)

✔ 선택자 (Selector)

- HTML의 어떤 요소에 CSS를 적용할 것인가를 지정하는 하나의 표현

 

1️⃣ Type Selector

// <h2> Type Hello World </h2>

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

- Type == 태그의 이름

- 특정 태그에 스타일 적용

🤔 스타일 적용을 원하지 않는 부분에도 적용될 수 있음 => 태그는 여러 번 사용되기 때문

 

2️⃣ Class Selector

// <h2 class="coding"> Class Hello World </h2>

<style>
.coding { color: blue; }
</style>

- Class : 유사한 기능을 담당하는 태그들을 묶어줌

    - 해당 태그의 열린 태그 안에 작성

    - (.)은 Class를 의미

- 같은 Class로 지정된 태그들에 대해서만 스타일 지정

 

3️⃣ ID Selector

// <h2 id="coding"> ID Hello World </h2>

<style>
#coding { color: green; }
</style>

- ID : 특정 태그를 단 하나만 지정 => 유일함

    - (#)은 ID를 의미

- 해당 ID를 가진 태그만 스타일 지정