CSS Selectors (CSS 선택자)

✅ CSS 선택자 (Selectors)

CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용하는 역할을 합니다.

🔹 기본 선택자

선택자	설명	예제
*	전체 선택자	* { margin: 0; }
태그 선택자	특정 태그를 선택	p { color: red; }
.클래스	클래스 속성을 가진 요소 선택	.box { width: 100px; }
#아이디	특정 아이디를 가진 요소 선택	#header { background: black; }

📌 클래스 선택자 (.) → 가장 많이 사용됨! 

📌 아이디 선택자 (#) → 문서 내에서 하나만 존재해야 함

---

📌 CSS 결합자 (Combinators)

CSS에서는 특정 관계를 가진 요소를 선택할 때 **자손 결합자( )**와 **자식 결합자(>)**를 사용할 수 있습니다.

결합자	설명	예제
(공백)	특정 요소 내부의 모든 자손 요소 선택	div p { color: red; } (div 안의 모든 p 요소 선택)
>	특정 요소의 직계 자식 요소만 선택	div > p { color: blue; } (div의 직접적인 p 요소만 선택)

---

✅ 결론

• CSS는 웹 페이지의 디자인과 레이아웃을 조정하는 스타일링 언어
• 인라인, 내부, 외부 스타일 시트 중 외부 스타일 시트 사용이 가장 효율적
• 클래스 선택자가 가장 많이 사용되며, 아이디 선택자는 고유한 요소에 사용
• CSS 결합자를 활용하면 더욱 정교한 스타일링 가능

CSS를 잘 활용하면 더욱 깔끔하고 일관된 디자인을 가진 웹 페이지를 만들 수 있습니다! 🚀