Blog

CSS 선택자: 종류와 사용법

웹 페이지의 디자인을 구성할 때, CSS는 필수적인 역할을 합니다. CSS에서 선택자는 특정 HTML 요소를 가리켜 스타일을 적용하는 데 사용됩니다. 이 글에서는 다양한 CSS 선택자의 종류와 그들의 사용법을 정리하여, 웹 개발 시 효율적으로 활용할 수 있도록 도와드리겠습니다.

1. 전체 선택자

전체 선택자(*)는 CSS에서 모든 HTML 요소를 선택할 수 있는 방법입니다. 이 선택자를 사용하면 페이지 내의 모든 요소에 동일한 스타일을 적용할 수 있습니다. 예를 들어, * { margin: 0; padding: 0; }와 같이 사용하면 모든 요소의 기본 여백과 패딩을 제거할 수 있습니다.

2. 태그 선택자

특정 HTML 태그에 스타일을 적용하고자 할 때는 태그 선택자를 사용합니다. 예를 들어, p { color: red; }와 같이 작성하면 모든 <p> 태그의 글자 색상이 빨간색으로 변경됩니다.

3. 클래스 선택자

클래스 선택자는 . 기호를 사용하여 정의합니다. 여러 요소에 동일한 스타일을 적용하고자 할 때 유용하며, 예를 들어 .example { font-size: 20px; }는 모든 class="example" 속성을 가진 요소에 적용됩니다.

4. ID 선택자

ID 선택자는 특정 요소에만 스타일을 적용할 때 사용하며, # 기호를 사용하여 정의됩니다. ID는 문서에서 유일해야 하므로, #uniqueID { background-color: blue; }와 같이 작성하면, 해당 ID를 가진 요소만 파란색 배경으로 설정됩니다.

5. 속성 선택자

속성 선택자는 특정 속성을 가진 요소를 선택하는 방법입니다. 예를 들어, a[href]는 href 속성이 있는 모든 <a> 요소를 선택합니다. 다양한 속성에 따라 선택을 세분화할 수 있습니다:

• [attribute=value]: 속성이 특정 값과 일치하는 경우
• [attribute^=value]: 속성이 주어진 값으로 시작하는 경우
• [attribute$=value]: 속성이 주어진 값으로 끝나는 경우
• [attribute*=value]: 속성이 주어진 값을 포함하는 경우

6. 자손 및 자식 선택자

자손 선택자는 특정 요소의 하위에 있는 모든 요소를 선택합니다. 예를 들어 div p는 모든 <div> 요소의 하위에 있는 <p> 요소를 선택합니다. 반면 자식 선택자는 바로 다음 단계에 있는 직접적인 자식만을 선택합니다. div > p는 <div>의 직접적인 자식인 <p> 요소만을 선택합니다.

7. 형제 선택자

형제 선택자는 같은 부모를 가진 요소들 중에서 관계를 설정하는 데 사용됩니다. 인접 형제 선택자(+)는 바로 뒤에 있는 형제를 선택하며, 예를 들어 h2 + p는 <h2> 다음에 오는 첫 번째 <p> 요소를 선택합니다. 일반 형제 선택자(~)는 뒤에 있는 모든 형제를 선택합니다.

8. 가상 선택자

가상 선택자는 요소의 특정 상태나 위치에 따라 스타일을 적용합니다. 마우스가 요소 위에 있을 때(:hover), 입력 요소에 포커스가 있을 때(:focus) 등의 상황에 스타일을 다르게 지정할 수 있습니다:

• :hover: 마우스를 올렸을 때
• :active: 클릭 중일 때
• :focus: 요소에 포커스가 되었을 때

9. 가상 요소 선택자

가상 요소 선택자는 특정 요소 내의 콘텐츠 부분을 타겟팅합니다. 예를 들어, ::before와 ::after를 사용하면 요소의 시작이나 끝에 콘텐츠를 추가할 수 있습니다:

• ::first-letter: 첫 글자 선택
• ::first-line: 첫 번째 줄 선택

10. 결론

CSS 선택자는 웹 디자인의 핵심 요소로, 다양한 방법으로 HTML 요소에 스타일을 적용할 수 있습니다. 전체 선택자에서부터 가상 요소 선택자까지, 각각의 선택자들은 고유한 용도와 기능을 가지고 있어, 이를 적절하게 활용함으로써 더욱 세련되고 관리하기 쉬운 웹 페이지를 만들 수 있습니다. 각 선택자의 특징을 잘 이해하고 사용하신다면, 보다 효율적인 웹 개발이 가능할 것입니다.

질문 FAQ