CSS에서 고유 id로 요소 선택하기

이미 알고 계시듯이, 클래스는 요소 그룹에 할당하기 위해 사용됩니다. 클래스 외에도, 요소의 고유 식별자인 id를 기준으로 요소를 선택할 수 있습니다. 고유성은 페이지에 이미 해당 id를 가진 요소가 있다면, 동일한 id를 가진 다른 요소가 있어서는 안 된다는 것을 의미합니다.

고유 식별자는 우리가 지은 이름을 쓰는 id 속성을 사용하여 설정됩니다. 예를 들어, 두 개의 블록을 만들어 봅시다. 첫 번째에는 값으로 block1를, 두 번째에는 값으로 block2를 id로 설정해 보겠습니다:

<div id="block1">
	<p>text</p>
	<p>text</p>
</div>
<div id="block2">
	<p>text</p>
	<p>text</p>
</div>

지정된 id를 가진 요소에 접근하려면, # 기호와 우리가 지은 이름을 다음과 같이 작성해야 합니다:

#block1 {
	color: red;
}
#block2 {
	color: green;
}

id 속성은 요소의 고유성을 강조해야 할 때 사용됩니다. 클래스는 해당 요소가 지금은 하나일지라도, 여러 개가 있을 수 있다고 가정할 때 사용됩니다.

다음 코드가 주어졌습니다:

<div id="elem1">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem2">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem3">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

elem1 블록의 내용은 빨간색으로, elem2 블록은 초록색으로, elem3 블록은 하늘색으로 칠하세요.