CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 언어입니다. 선택자(Selectors)는 CSS 규칙이 어떤 요소에 적용될지를 결정하는 데 사용됩니다. 선택자는 페이지의 특정 요소를 선택하고 스타일 규칙을 적용할 때 유용합니다.

기본 선택자

CSS 선택자에는 다양한 유형이 있습니다. 그 중에서도 가장 기본적인 것은 요소 선택자, 클래스 선택자 및 ID 선택자입니다.

요소 선택자

요소 선택자는 HTML 요소의 이름으로 스타일을 적용합니다. 예를 들어, 모든 <p> 요소에 스타일을 적용하려면 다음과 같이 사용합니다.

p {
  color: blue;
}

클래스 선택자

클래스 선택자는 HTML 요소에 클래스 속성을 추가하여 스타일을 적용합니다. 다음은 클래스 선택자의 예시입니다.

.myclass {
  font-size: 16px;
}

ID 선택자

ID 선택자는 고유한 ID 속성을 가진 요소에 스타일을 적용합니다. ID 선택자는 한 페이지에서 한 번만 사용해야 합니다. 아래는 ID 선택자의 예시입니다.

#myid {
  background-color: yellow;
}

조합된 선택자

다양한 선택자를 결합하여 요소의 특정 그룹에 스타일을 적용할 수 있습니다.

후손 선택자

후손 선택자는 한 요소의 하위 요소에 스타일을 적용합니다.

div p {
  font-weight: bold;
}

자식 선택자

자식 선택자는 특정 부모 요소의 직접적인 자식 요소에만 스타일을 적용합니다.

ul > li {
  list-style-type: square;
}

인접 형제 선택자

인접 형제 선택자는 동일한 부모를 가진 형제 요소 중 특정 요소에만 스타일을 적용합니다.

h1 + p {
  font-style: italic;
}

속성 선택자

속성 선택자는 특정 HTML 속성을 가진 요소에 스타일을 적용합니다.

input[type="text"] {
  width: 200px;
}

가상 클래스 선택자

가상 클래스 선택자는 특정 상태에 있는 요소에 스타일을 적용합니다. 예를 들어, 마우스를 가져다 대거나 포커스되었을 때를 대상으로 스타일을 적용할 수 있습니다.

a:hover {
  color: red;
}

CSS 선택자를 사용하여 HTML 요소를 스타일링하는 방법에 대한 이해는 웹 페이지 디자인을 향상시키는 데 중요합니다. 선택자의 종류 및 사용법을 숙지하고 적절하게 활용하면 웹 페이지를 더욱 효과적으로 디자인할 수 있습니다.