CSS 기본 선택자 알아보기

CSS(캐스케이딩 스타일 시트)의 기본 선택자는 HTML 문서에서 스타일을 적용할 요소를 선택하는 방법을 제공합니다. 여기에는 여러 가지 기본 선택자가 있으며, 각각의 선택자는 다양한 HTML 요소를 선택하고 스타일을 적용하는 데 사용됩니다. 주요 기본 선택자는 다음과 같습니다:

1. 요소 선택자 (Element Selector)
   • HTML 요소의 이름을 직접 사용하여 해당 요소를 선택합니다.
   • 예: p { color: blue; }
     이 선택자는 모든 <p> 요소의 글자 색상을 파란색으로 설정합니다.
2. 클래스 선택자 (Class Selector)
   • 클래스 속성 값을 기반으로 요소를 선택합니다. 클래스 선택자는 점(.)으로 시작합니다.
   • 예: .my-class { font-size: 16px; }
     이 선택자는 class="my-class"를 가진 모든 요소의 글자 크기를 16px로 설정합니다.
3. 아이디 선택자 (ID Selector)
   • 아이디 속성 값을 기반으로 요소를 선택합니다. 아이디 선택자는 샵(#)으로 시작합니다.
   • 예: #my-id { background-color: yellow; }
     이 선택자는 id="my-id"를 가진 단일 요소의 배경 색상을 노란색으로 설정합니다.
4. 자식 선택자 (Child Selector)
   • 특정 요소의 직계 자식 요소를 선택합니다. > 기호를 사용합니다.
   • 예: ul > li { margin: 10px; }
     이 선택자는 <ul>의 직계 자식 <li> 요소에만 스타일을 적용합니다.
5. 후손 선택자 (Descendant Selector)
   • 특정 요소 내의 모든 후손 요소를 선택합니다. 공백을 사용합니다.
   • 예: div p { color: red; }
     이 선택자는 모든 <div> 요소 내의 <p> 요소의 글자 색상을 빨간색으로 설정합니다.
6. 인접 형제 선택자 (Adjacent Sibling Selector)
   • 특정 요소 바로 다음에 위치한 형제 요소를 선택합니다. + 기호를 사용합니다.
   • 예: h1 + p { margin-top: 0; }
     이 선택자는 <h1> 요소 바로 뒤에 위치한 첫 번째 <p> 요소의 상단 여백을 0으로 설정합니다.
7. 일반 형제 선택자 (General Sibling Selector)
   • 특정 요소 뒤에 위치한 모든 형제 요소를 선택합니다. ~ 기호를 사용합니다.
   • 예: h2 ~ p { color: green; }
     이 선택자는 <h2> 요소 뒤에 위치한 모든 <p> 요소의 글자 색상을 초록색으로 설정합니다.
8. 속성 선택자 (Attribute Selector)
   • 특정 속성이 있는 요소를 선택합니다. 대괄호([])를 사용합니다.
   • 예: [type="text"] { border: 1px solid black; }
     이 선택자는 type 속성이 "text"인 모든 요소에 스타일을 적용합니다.

이러한 기본 선택자를 적절히 활용하면 웹 페이지의 다양한 요소에 세밀한 스타일링을 적용할 수 있습니다.