CSS는 웹페이지의 스타일을 지정하는 데 사용되는 중요한 언어입니다. 선택자는 특정 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 이 게시물에서는 CSS 선택자를 사용하여 요소를 스타일링하는 방법에 대해 알아보겠습니다.

1. 기본 선택자

가장 기본적인 선택자는 요소 선택자입니다. 이것은 HTML 요소의 이름을 사용하여 스타일을 적용합니다.

p {
  color: blue;
}

2. 클래스 선택자

클래스 선택자는 “class” 속성을 사용하여 특정 클래스를 지정하고 선택하는 데 사용됩니다.

.bold-text {
  font-weight: bold;
}

3. 아이디 선택자

아이디 선택자는 “id” 속성을 사용하여 특정 아이디를 지정하고 선택하는 데 사용됩니다.

#header {
  background-color: #f2f2f2;
}

4. 후손 선택자

후손 선택자는 하위 요소를 선택하는 데 사용됩니다.

div p {
  font-style: italic;
}

5. 가상 선택자

가상 선택자는 특정 상태나 위치에 있는 요소를 선택하는 데 사용됩니다.

a:hover {
  text-decoration: underline;
}

이외에도 많은 다른 종류의 선택자가 있으며, 선택자를 조합하여 더 복잡한 스타일을 적용할 수 있습니다.

CSS 선택자를 활용하여 웹페이지의 각 요소를 정확하게 스타일링할 수 있습니다. 선택자를 잘 활용하면 더 유연하고 강력한 스타일을 적용할 수 있습니다.

더 많은 정보는 MDN web docs에서 확인할 수 있습니다.

이 글은 CSS의 선택자에 대해 다룬 내용이며, 다양한 선택자들을 보다 상세히 다루고 있다.