CSS ID 선택자 상세 설명

ID 선택자는 문서 요소와 독립적으로 스타일을 지정할 수 있도록 합니다.

CSS ID 선택자

일부 면에서 ID 선택자는 클래스 선택자와 유사하지만, 중요한 차이점도 있습니다.

문법

먼저, ID 선택자 앞에 # 기호가 있습니다. 이를 도시락 기호나 웰 스파이드 기호라고도 합니다.

다음과 같은 규칙을 보세요:

*#intro {font-weight:bold;}

클래스 선택자와 마찬가지로, ID 선택자에서는 와이드캔서 선택자를 무시할 수 있습니다. 이전 예제는 다음과 같이 작성될 수도 있습니다:

#intro {font-weight:bold;}

이 선택자의 효과는 같습니다.

두 번째 차이점은 ID 선택자가 class 속성의 값을 참조하지 않고, 확실히 id 속성의 값을 참조한다는 것입니다.

다음은 실제 ID 선택자의 예입니다:

<p id="intro">이는 소개 문단입니다.</p>

본인이 직접 테스트해보세요

클래스 선택자 여부?

이전 장에서는 클래스 선택자에 대해 설명했으며, 어떤 요소에도 여러 개의 클래스를 지정할 수 있습니다. 이전 장에서 important라는 클래스 이름이 p와 h1 요소에 적용되었으며, 더 많은 요소에 적용될 수 있습니다.

차이점 1: 문서에서 한 번만 사용할 수 있습니다

클래스와 달리, 하나의 HTML 문서에서 ID 선택자는 한 번만 사용됩니다.

차이점 2: ID 단어 목록을 사용할 수 없습니다

클래스 선택자와 달리, ID 선택자는 결합 사용할 수 없습니다. 왜냐하면 ID 속성은 공백으로 구분된 단어 목록을 허용하지 않기 때문입니다.

차이점 3: ID는 더 많은 의미를 포함할 수 있습니다

클래스와 유사하게, ID는 요소와 독립적으로 선택할 수 있습니다. 어떤 경우에는 문서에서 특정 ID 값을 나타날 것을 알지만, 그 ID가 어느 요소에 나타날지는 알 수 없기 때문에 독립적인 ID 선택자를 선언하고 싶습니다. 예를 들어, 주어진 문서에서 mostImportant 값을 가진 요소가 있을 것을 알 수 있습니다. 이 가장 중요한 것은 단락, 문장, 목록 항목, 또는 섹션 제목일 수도 있습니다. 중요한 내용은 각 문서에 하나씩만 있으며, 어떤 요소에든 나타날 수 있습니다. 이 경우 다음과 같은 규칙을 작성할 수 있습니다:

#mostImportant {color:red; background:yellow;}

이 규칙은 다음과 같은 각 요소와 일치합니다(이 요소들은 동일한 ID 값을 가지고 있기 때문에 동일한 문서에서 동시에 나타날 수 없습니다):

<h1 id="mostImportant">이는 중요합니다!
<em id="mostImportant">이는 중요합니다!
<ul id="mostImportant">이는 중요합니다!</ul>

직접 시험해보세요:

대소문자 구분

주의하세요, 클래스 선택자와 ID 선택자는 대소문자를 구분할 수 있습니다. 이는 문서의 언어에 따릅니다. HTML과 XHTML은 클래스와 ID 값을 대소문자 구분으로 정의하므로, 클래스와 ID 값을 대소문자로 일치시켜야 합니다.

따라서, 다음의 CSS와 HTML을 사용하면 요소가 굵게 변하지 않습니다:

#intro {font-weight:bold;}
<p id="Intro">이는 소개 문단입니다.</p>

대문자와 소문자의 i가 다르기 때문에, 선택자는 위의 요소와 일치하지 않습니다.