CSS 선택자에 대한 깊이 있는 이해와 활용

CSS 선택자에 대한 깊이 있는 이해와 활용

CSS 선택자는 웹 페이지의 요소를 선택하고 스타일을 적용하는 데 사용되는 강력한 도구입니다. 본 글에서는 CSS 선택자의 기본 개념과 함께 선택자의 다양한 종류와 활용 방법에 대해 살펴봅니다.

1. 기본 선택자

1.1. 태그 선택자

태그 선택자는 해당 HTML 태그에 적용되는 스타일을 지정합니다.

p {
  color: blue;
}

위 예제에서는 모든 <p> 태그의 텍스트 색상이 파란색으로 설정됩니다.

1.2. 클래스 선택자

클래스 선택자는 HTML 요소의 class 속성에 지정된 이름과 일치하는 요소에 스타일을 적용합니다. 선택자 앞에는 마침표(.)를 붙입니다.

.error {
  color: red;
}

위 예제에서는 class="error"를 포함하는 모든 요소의 텍스트 색상이 빨간색으로 설정됩니다.

1.3. ID 선택자

ID 선택자는 HTML 요소의 id 속성에 지정된 이름과 일치하는 요소에 스타일을 적용합니다. 선택자 앞에는 샵 기호(#)를 붙입니다.

#header {
  background-color: black;
}  

위 예제에서는 id="header"를 포함하는 요소의 배경 색상이 검은색으로 설정됩니다.

2. 고급 선택자

2.1. 자손 선택자

자손 선택자는 특정 요소의 모든 자손 요소에 스타일을 적용합니다. 선택자 간에 공백을 사용하여 구분합니다.

div p {
  font-weight: bold;
}  

위 예제에서는 <div> 태그 내의 모든 <p> 태그에 볼드체 스타일이 적용됩니다.

2.2. 자식 선택자

자식 선택자는 특정 요소의 바로 아래 있는 자식 요소에만 스타일을 적용합니다. 선택자 간에는 꺾쇠 괄호(>)를 사용하여 구분합니다.

div > p {
  font-style: italic;
}  

위 예제에서는 <div> 태그의 바로 아래 있는 <p> 태그에만 이탤릭체 스타일이 적용됩니다.

2.3. 인접 형제 선택자

인접 형제 선택자는 특정 요소의 바로 다음 형제 요소에 스타일을 적용합니다. 선택자 간에는 덧셈 기호(+)를 사용하여 구분합니다.

h2 + p{
    margin-top: 10px;
}

위 예제에서는 `<h2>` 태그 바로 다음에 있는 `<p>` 태그의 상단 여백이 10px로 설정됩니다.

2.4. 일반 형제 선택자

일반 형제 선택자는 특정 요소와 같은 계층에 있는 모든 형제 요소에 스타일을 적용합니다. 선택자 간에는 물결표(`~`)를 사용하여 구분합니다.

h2 ~ p {
  text-indent: 1em;
}  

위 예제에서는 <h2> 태그와 같은 계층에 있는 모든 <p> 태그에 들여쓰기가 적용됩니다.

2.5. 속성 선택자

속성 선택자는 특정 속성을 가진 요소에 스타일을 적용합니다. 대괄호([])를 사용하여 속성 이름을 감싸고, 필요한 경우 값과 함께 사용할 수 있습니다.

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

위 예제에서는 type="text" 속성을 가진 <input> 요소의 너비가 300px로 설정됩니다.

3. 가상 클래스 선택자

가상 클래스 선택자는 특정 상태를 가진 요소에 스타일을 적용합니다. 콜론(:)을 사용하여 가상 클래스 이름을 명시합니다.

a:hover {
  color: red;
}  

위 예제에서는 마우스를 올린 <a> 태그의 텍스트 색상이 빨간색으로 변경됩니다.

결론

CSS 선택자를 이해하고 활용하면 웹 페이지의 요소에 대한 스타일을 쉽게 제어할 수 있습니다. 여기서 소개한 선택자 외에도 다양한 선택자가 존재하므로, 다양한 요소를 선택하고 스타일을 적용하는 데 필요한 선택자를 찾아보세요.