선택자(Selector)에 대하여 (전체, 태그, 클래스, 아이디)

전체 선택자 (Universal Selector)

전체 선택자는 HTML 문서의 모든 요소를 선택하는 역할을 합니다. 선택자는 *로 표시됩니다. 예를 들어 모든 요소의 글꼴 크기를 16px로 지정하고 싶다면 다음과 같이 작성할 수 있습니다.

* {
  font-size: 16px;
}

태그 선택자 (Tag Selector)

태그 선택자는 HTML 문서의 특정 태그 요소를 선택하는 역할을 합니다. 선택자는 요소의 태그 이름으로 표시됩니다. 예를 들어 모든 <p> 요소의 색상을 빨간색으로 지정하고 싶다면 다음과 같이 작성할 수 있습니다.

p {
  color: red;
}

클래스 선택자 (Class Selector)

클래스 선택자는 HTML 문서에서 특정 클래스를 가진 요소를 선택하는 역할을 합니다. 선택자는 요소의 클래스 이름으로 표시됩니다. 예를 들어 클래스 이름이 "highlight"인 요소의 배경색을 노란색으로 지정하고 싶다면 다음과 같이 작성할 수 있습니다.

.highlight {
  background-color: yellow;
}

아이디 선택자 (ID Selector)

아이디 선택자는 HTML 문서에서 특정 아이디를 가진 요소를 선택하는 역할을 합니다. 선택자는 요소의 아이디 이름으로 표시됩니다. 아이디는 문서 내에서 고유해야 하므로 중복된 아이디를 사용해서는 안 됩니다. 예를 들어 아이디 이름이 "header"인 요소의 테두리 두께를 1px로 지정하고 싶다면 다음과 같이 작성할 수 있습니다.

#header {
  border-width: 1px;
}

마무리

선택자는 CSS에서 요소를 선택하여 특정 스타일을 적용하는 데 사용됩니다. 전체 선택자는 문서의 모든 요소를 선택하고, 태그 선택자는 특정 태그 요소를 선택하며, 클래스 선택자와 아이디 선택자는 특정 클래스와 아이디를 가진 요소를 선택합니다. 이러한 선택자를 이용하여 원하는 스타일을 적용할 수 있습니다.