CSS id 선택자

id 선택자

id 선택자는 특정 id를 가진 HTML 요소에 특정 스타일을 지정할 수 있습니다.

id 선택자는 "#"로 정의됩니다.

아래 두 id 선택자 중 첫 번째는 요소의 색상을 빨간색으로 정의할 수 있으며, 두 번째는 녹색으로 정의할 수 있습니다：

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

아래의 HTML 코드에서 id 속성이 red인 p 요소는 빨간색으로, id 속성이 green인 p 요소는 녹색으로 표시됩니다.

<p id="red">이 문단은 빨간색입니다。</p>
<p id="green">이 문단은 녹색입니다。</p>

주의:id 속성은 각 HTML 문서에서 한 번만 등장할 수 있습니다. 원인을 알고 싶으시면参阅 XHTML: 웹 재구성.

id 선택자와 파생 선택자

현대 레이아웃에서 id 선택자는 종종 파생 선택자를 구축하는 데 사용됩니다.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

위의 스타일은 id가 sidebar인 요소 내에 나타나는 문단에만 적용됩니다. 이 요소는 div이나 테이블 셀일 수도 있으며, 테이블이나 다른 블록 요소일 수도 있습니다. 그리고 내장 요소, 예를 들어 <em></em> 또는 <span></span>일 수도 있지만, 이러한 사용은 불법적입니다. 왜 그런지 잊었나요? (参阅 XHTML: 웹 재구성）。

한 선택자, 여러 가지 사용법

sidbar로 표시된 요소가 문서에서 한 번만 등장할 수 있지만, 이 id 선택자는 여러 번 사용될 수 있습니다：

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

이곳에서 페이지의 다른 p 요소와 명확히 다른 p 요소가 sidebar 내에 특별히 처리되고, 페이지의 다른 모든 h2 요소와 명확히 다른 h2 요소가 sidebar에서 다른 특별한 처리를 받습니다.

단일 선택자

ID 선택자는 파생 선택자를 만들어 사용되지 않을 수 있지만, 독립적으로 작동할 수 있습니다:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

이 규칙에 따라 id가 sidebar인 요소는 1픽셀 두께의 검은색 점선 경계선을 가지게 되며, 그 주위는 10픽셀 두께의 내간격(padding, 내부 공백)이 있습니다. Windows/IE 브라우저의 오래된 버전은 이 규칙을 무시할 수 있으며, 특별히 이 선택자가 속한 요소를 정의하지 않으면 이렇게 됩니다:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

관련 내용

ID 선택자에 대한 더 깊은 학습이 필요하시다면, CodeW3C.com 고급 강의를 참조하세요:CSS ID 선택자 상세 설명.