CSS ID 선택기 완벽 가이드: 요소에 고유 스타일 적용하기

CSS ID 선택기란 무엇인가?

CSS에서는 HTML 요소의 id 속성을 기반으로 스타일 규칙을 정의할 수 있습니다. 문서 내에서 해당 id를 가진 모든 요소는 정의된 규칙에 따라 스타일이 적용됩니다.

ID 선택기는 선택기 이름 앞에 #(해시) 기호를 붙여 표현하며, 다음과 같이 작성합니다.

#black {
    color: #000000;
}

위 규칙은 문서에서 id 속성값이 black으로 설정된 모든 요소의 콘텐츠를 검은색으로 렌더링합니다.

ID 선택기와 특정 요소 조합하기

ID 선택기를 더 구체적으로 활용할 수도 있습니다. 예를 들어, 특정 태그에만 스타일을 적용하고 싶다면 다음과 같이 작성합니다.

h1#black {
    color: #000000;
}

이 규칙은 id 속성값이 black으로 설정된 요소 중에서 <h1> 태그에만 검은색 콘텐츠를 렌더링합니다. 즉, 같은 id를 가지더라도 h1이 아닌 다른 요소에는 이 스타일이 적용되지 않습니다.

후손 선택기와 함께 사용하는 ID 선택기

ID 선택기의 진정한 강력함은 후손 선택기(descendant selector)의 기반으로 사용될 때 드러납니다. 예를 들어:

#black h2 {
    color: #000000;
}

이 예제에서는 id 속성값이 black으로 설정된 태그 내부에 위치한 모든 수준 2 제목(<h2>)이 검은색으로 표시됩니다.

ID 선택기 사용 시 주의사항

• 고유성: HTML 표준에 따르면 하나의 id 값은 페이지 내에서 한 번만 사용해야 합니다. 동일한 id를 여러 요소에 중복 사용하는 것은 권장되지 않습니다.
• 재사용성: 같은 스타일을 여러 요소에 적용해야 한다면 클래스(class) 선택기를 사용하는 것이 더 효율적입니다.
• 우선순위: ID 선택기는 클래스 선택기보다 높은 우선순위(specificity)를 가지므로, 스타일 충돌 시 ID 선택기의 규칙이 우선 적용됩니다.

이처럼 ID 선택기는 특정 요소를 정확하게 지정하여 스타일을 적용할 때 매우 유용한 도구입니다. 후손 선택기와 조합하면 더욱 세밀하고 체계적인 스타일링이 가능합니다.