2. CSS 선택자: 기본 선택자와 결합자

이 문서에서는 CSS 선택자의 기본 개념과 종류, 그리고 결합자의 활용에 대해 알아봅시다.

 

1. 기본 선택자

CSS에서 스타일을 적용하고자 하는 요소를 선택하기 위해 사용되는 기본 선택자를 살펴봅니다.

1.1 요소 선택자

요소 선택자는 HTML 요소의 태그 이름에 따라 선택하는 가장 기본적인 선택자입니다. 예를 들어, <p> 태그에 스타일을 적용하려면 다음과 같이 작성할 수 있습니다:

  p {
    color: red; 
  }

1.2 클래스 선택자

클래스 선택자는 HTML 요소에 적용된 클래스 속성에 따라 선택합니다. 클래스 이름 앞에 마침표(.)를 사용합니다. 예를 들어, 클래스가 'highlight'인 요소의 배경색을 변경하려면 다음과 같이 작성할 수 있습니다:

  .highlight {
    background-color: yellow;
  }

1.3 ID 선택자

ID 선택자는 HTML 요소의 고유한 아이디에 따라 선택합니다. 아이디 앞에 샵(#)을 사용합니다. 인스턴스는 고유하지만 클래스와 다르기 때문에 이 점을 이해하는 것이 중요합니다. 예를 들어 아이디가 'main-title'인 요소의 글꼴 크기를 변경하려면 다음과 같이 작성할 수 있습니다:

  #main-title {
    font-size: 32px;
  }

 

 

2. 결합자

CSS에서 요소 선택 과정을 복잡하게 구성해야 하는 경우, 결합자를 사용하면 다양한 선택자를 조합할 수 있습니다. 주요 결합자에는 4가지가 있습니다: 후손 결합자, 자식 결합자, 인접 형제 결합자, 일반 형제 결합자 입니다.

2.1 후손 결합자

후손 결합자는 특정 요소의 모든 하위 요소를 선택합니다. 공백으로 표시됩니다. 예를 들어, <div> 내부의 모든 <p> 요소를 선택하려면 다음과 같이 작성할 수 있습니다:

  div p {
    font-weight: bold;
  }

2.2 자식 결합자

자식 결합자는 특정 요소의 바로 한 단계 아래 내용을 선택합니다. 꺾쇠(>)로 표시됩니다. 예를 들어, <div>의 바로 아래 있는 <p> 요소만 선택하려면 다음과 같이 작성할 수 있습니다:

  div > p {
    font-style: italic;
  }

2.3 인접 형제 결합자

인접 형제 결합자는 동일한 부모 요소를 가진 특정 요소의 바로 옆에 있는 요소를 선택합니다. 더하기 기호(+)로 표시됩니다. 예를 들어, <h3> 바로 다음에 위치한 <p> 요소만 선택하려면 다음과 같이 작성할 수 있습니다:

  h3 + p {
    text-indent: 20px;
  }

2.4 일반 형제 결합자

일반 형제 결합자는 동일한 부모 요소를 가진 특정 요소 뒤에 오는 모든 형제 요소를 선택합니다. 물결 기호(~)로 표시됩니다. 예를 들어, <h2> 이후에 오는 모든 <p> 요소를 선택하려면 다음과 같이 작성할 수 있습니다:

  h2 ~ p {
    margin-top: 10px;
  }

마치며

이번 포스팅에서는 기본 CSS 선택자와 결합자에 대해 알아보았습니다. 이러한 선택자와 결합자를 잘 활용하면 웹 페이지에서 특정 요소에 원하는 스타일을 적용하는 것이 가능해집니다. 다음 포스트에서는 더 고급 선택자 및 가상 클래스에 대해 알아보겠습니다!