다양한 방식으로 요소를 선택하는 복합 선택자의 다섯 가지 유형을 알아보자.

1. 태그 선택자

태그 선택자는 HTML 문서의 요소를 선택하기 위해 해당 요소의 태그 이름을 사용하는 선택자입니다. 예를 들어, <div> 태그에 스타일을 적용하려면 "div"라는 태그 선택자를 사용할 수 있습니다.

태그 선택자의 예시는 다음과 같습니다:

div {
  color: blue;
}

p {
  font-size: 16px;
}

위의 예시에서는 <div> 태그에 파란색 텍스트 색상을, <p> 태그에는 16px 폰트 크기를 적용하는 스타일을 정의하고 있습니다.

태그 선택자는 HTML 문서 내에서 사용된 해당 태그의 모든 요소에 스타일을 적용하기 때문에 주의가 필요합니다. 따라서, 태그 선택자를 사용할 때는 문서의 구조와 계층을 고려하여 적절한 요소에 스타일을 적용해야 합니다.

2. 클래스 선택자

클래스 선택자는 HTML 문서의 요소를 선택하기 위해 해당 요소에 부여된 클래스 이름을 사용하는 선택자입니다. 클래스는 동일한 스타일을 여러 요소에 적용하기 위해 그룹화된 이름입니다.

클래스 선택자는 점(.)으로 시작하며, 클래스 이름을 따라 나옵니다. 예를 들어, <div class="container">와 같이 클래스가 "container"인 요소를 선택하기 위해서는 ".container"라는 클래스 선택자를 사용할 수 있습니다.

클래스 선택자의 예시는 다음과 같습니다:

.container {
  background-color: #ffffff;
}

.highlight {
  color: red;
}

위의 예시에서는 "container" 클래스를 가진 요소에 흰색 배경색을, "highlight" 클래스를 가진 요소에는 빨간색 글씨색을 적용하는 스타일을 정의하고 있습니다.

클래스 선택자는 한 요소에 여러 개의 클래스를 부여할 수 있으며, 동일한 클래스를 여러 요소에 부여하여 그룹화된 스타일을 효율적으로 적용할 수 있습니다. 같은 클래스를 가지는 요소들끼리 스타일을 공유할 수 있게 되어 코드의 재사용성을 높일 수 있습니다.

3. 아이디 선택자

아이디 선택자는 HTML 문서의 요소를 선택하기 위해 해당 요소에 부여된 고유한 아이디를 사용하는 선택자입니다. 아이디는 한 문서 내에서 유일해야 하며, 특정 요소를 식별하는 용도로 사용됩니다.

아이디 선택자는 "#"(해시)로 시작하며, 아이디 이름을 따라 나옵니다. 예를 들어, <div id="main">와 같이 아이디가 "main"인 요소를 선택하기 위해서는 "#main"이라는 아이디 선택자를 사용할 수 있습니다.

아이디 선택자의 예시는 다음과 같습니다:

#main {
  font-size: 24px;
}

#logo {
  width: 200px;
  height: 100px;
}

위의 예시에서는 "main" 아이디를 가진 요소에 24px 폰트 크기를, "logo" 아이디를 가진 요소에는 가로 200px, 세로 100px의 크기를 적용하는 스타일을 정의하고 있습니다.

아이디 선택자는 클래스 선택자와 달리 한 요소에 대해서만 유니크하게 적용되기 때문에, 특정 요소에 고유한 스타일을 적용하고자 할 때 유용합니다. 그러나, 아이디 선택자는 한 번만 사용할 수 있기 때문에 코드의 재사용성이 낮아지며, 스타일이 중복되는 문제가 발생하지 않도록 주의해야 합니다.