CSS( Cascading Style Sheets)는 HTML 요소에 스타일을 적용하기 위한 언어입니다. CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다. 이 포스트에서는 CSS 선택자의 기본적인 사용법에 대해 알아보겠습니다.

1. 기본 선택자

1.1 요소 선택자

요소 선택자는 HTML 요소를 선택하는 가장 기본적인 방법입니다. 해당 요소 이름을 기재하여 스타일을 적용합니다.

예시:

p {
  color: red;
}

1.2 클래스 선택자

클래스 선택자는 특정 클래스를 지정한 HTML 요소를 선택합니다. 클래스 이름 앞에 점(.)을 붙여서 표시합니다.

예시:

.classname {
  font-size: 16px;
}

1.3 ID 선택자

ID 선택자는 고유한 식별자를 가진 HTML 요소를 선택합니다. ID 이름 앞에 해시(#)를 붙여서 표시합니다.

예시:

#uniqueID {
  background-color: yellow;
}

2. 복합 선택자

2.1 하위 선택자

하위 선택자는 특정 요소의 하위 요소를 선택합니다. 부모 요소를 기재한 후에 공백을 두고 자식 요소를 기재합니다.

예시:

div p {
  text-decoration: underline;
}

2.2 그룹 선택자

그룹 선택자는 여러 요소를 한꺼번에 선택하여 스타일을 적용합니다. 쉼표(,)로 구분하여 선택자를 나열합니다.

예시:

h1, h2, h3 {
  color: blue;
}

3. 속성 선택자

3.1 속성 선택자

특정 속성을 가진 HTML 요소를 선택합니다. 대괄호([]) 안에 속성 이름과 속성 값으로 표시합니다.

예시:

input[type="text"] {
  border: 1px solid #ccc;
}

3.2 가상 클래스 선택자

가상 클래스 선택자는 특정 상태의 요소를 선택합니다. 콜론(:)으로 표시하며, hover, active, visited 등의 상태를 선택할 수 있습니다.

예시:

a:hover {
  color: red;
}

이렇게 다양한 선택자를 활용하여 웹페이지의 스타일을 쉽게 조작할 수 있습니다. 선택자를 잘 활용하여 웹페이지를 보다 더 멋지게 꾸밀 수 있습니다.

참고 자료

• MDN Web Docs - CSS 선택자