[CSS] css 선택자(selector)

🔎 CSS 선택자(selector) 란?

어느 요소에 스타일을 적용할지 알려주는 방식이 css 선택자 입니다.

---

📜 선택자의 종류

1. 전체 선택자

• 전체 선택자는 *을 사용하여 나타냅니다.
• html 모든 태그에 적용됩니다.

*{ margin: 0 auto; }

2. 태그 선택자

• 태그 선택자는 태그의 이름을 사용하여 나타냅니다.
• 태그명이 선택자와 같은 태그들에 적용됩니다.

div{ margin: 0 auto; }

3. 클래스 선택자

• 클래스 선택자는 .클래스명을 사용하여 나타냅니다.
• 클래스명이 같은 태그들에 적용됩니다.

.className{ width: 100%; }

4. ID 선택자

• ID 선택자는 # 아이디명을 사용하여 나타냅니다.
• ID명이 같은 태그들에 적용됩니다.

#IdName{ color: #ff0 }

---

📜 여러 개의 선택자

하위 선택자

• 하위 선택자는 선택자 사이의 공백을 이용해 나타냅니다.
• 앞 요소의 자손인 뒷 요소를 선택합니다.

자식 선택자

• 하위 선택자는 선택자 사이의 >를 이용해 나타냅니다.
• 앞 요소의 자식인 뒷 요소를 선택합니다.

자손은 모든 하위 요소를 의미하고 자식은 바로 아래의 자식 요소에만 적용합니다.

인접 형제 선택자

• 인접 형제 선택자는 선택자 사이에 +를 이용해 나타냅니다.
• 앞 요소 바로 뒤의 요소를 선택합니다.

일반 형제 선택자

• 일반 형제 선택자는 선택자 사이에 ~를 사용하여 나타냅니다.
• 앞 요소 뒤에 있는 모든 뒷 요소를 선택합니다.