[HTML] CSS 선택자에 대하여

CSS에서 선택자(Selector)

CSS에서 선택자(Selector)는 스타일을 적용할 HTML 요소를 지정하는 데 사용됩니다. 다양한 유형의 선택자가 있으며, 각각은 웹 페이지의 특정 요소들을 타기팅하는 데 특화되어 있습니다. 주요 선택자 유형에 대해 설명하겠습니다.

1. 기본 선택자 (Basic Selectors)

1. 전체 선택자 (Universal Selector): 모든 HTML 요소에 스타일을 적용합니다.
2. * { margin: 0; padding: 0; }
3. 요소 선택자 (Type Selector): 특정 타입의 HTML 요소를 선택합니다.
4. p { font-size: 16px; }
5. 클래스 선택자 (Class Selector): 특정 클래스를 가진 모든 요소를 선택합니다.
6. .button { background-color: blue; }
7. ID 선택자 (ID Selector): 고유한 ID를 가진 단일 요소를 선택합니다.
8. #header { background-color: gray; }
9. 그룹 선택자 (Group Selector): 여러 선택자를 쉼표로 구분하여 그룹화합니다.
10. h1, h2, h3 { color: red; }

2. 결합자 (Combinators)

1. 자손 결합자 (Descendant Combinator): 특정 요소의 자손 요소를 선택합니다.
2. div p { color: green; }
3. 자식 결합자 (Child Combinator): 특정 요소의 직접적인 자식만을 선택합니다.
4. ul > li { padding: 5px; }
5. 인접 형제 결합자 (Adjacent Sibling Combinator): 특정 요소 바로 뒤에 오는 형제 요소 하나를 선택합니다.
6. h1 + p { margin-top: 0; }
7. 일반 형제 결합자 (General Sibling Combinator): 특정 요소 뒤에 오는 모든 형제 요소를 선택합니다.
8. h1 ~ p { font-style: italic; }

3. 속성 선택자 (Attribute Selectors)

• 특정 속성이나 속성 값으로 요소를 선택합니다.

  input[type="text"] {
      background-color: yellow;
  }

4. 의사 클래스 (Pseudo-classes)

• 특정 상태의 요소를 선택합니다. 예를 들어, 링크에 마우스를 호버 할 때의 스타일을 지정할 수 있습니다.

  a:hover {
      color: green;
  }

5. 의사 요소 (Pseudo-elements)

• 요소의 특정 부분에 스타일을 적용합니다. 예를 들어, 요소의 첫 글자나 첫 줄에 스타일을 적용할 수 있습니다.

  p::first-letter {
      font-size: 200%;
  }

CSS 선택자는 웹 페이지의 다양한 요소에 대해 세밀하고 유연한 스타일링을 가능하게 합니다. 이러한 선택자들을 잘 활용하면, 복잡한 레이아웃과 정교한 디자인을 효과적으로 구현할 수 있습니다.