개요 - id 선택자와 class 선택자

 

id 선택자

 

id 선택자는 특정 태그에 스타일을 지정할 때 사용한다. 태그의 id 속성을 기준으로 스타일을 지정하는데, id 속성의 값은 값은 문서내에서 유일한 값을 가져야 한다. 만약, 중복되는 값을 가지면 젤 처음 나온 id를 선택하고 나중에 나온 것은 무시한다. 따라서 id 속성에 값을 지정할 때에는 주의해야 한다. 스타일 시트에서 id 선택자를 나타내는 기호는 '#'이다.

 

<div id="green"></div> 

 

#green { color:green; }

 

위와 같이 작성하면 id 속성을 갖는 태그중에 green값을 갖은 태그에 스타일이 적용된다. id 속성은 HTML DOM에서도 사용되며 문서내 특정 엘레멘트를 구별하기 위해 사용되기 때문에 id 속성의 값은 문서내에서 유일해야 한다.

 

 

class 선택자

 

class 선택자는 같은 태그에 다른 종류의 스타일을 적용하고 싶을 때 사용한다. class 선택자는 '.'기호를 사용해 나타낸다.

 

<div class="right"></div>

<div class="center"></div>

 

.right { text-align:right; }
.center { text-align:center; }

 

위와 같이 작성하면 class 속성에 right 값을 사용하는 태그에는 오른쪽 정렬이 center값을 사용하는 태그에는 가운데 정렬이 지정된다. 또한 class 속성은 여러 개의 값을 가질 수도 있는데

 

<p class="center bold">테스트 문장</p>

 

.center { text-align:center; }
.bold { font-style:bold; }

위와 같이 사용할 수도 있다.

 

 

※ id 선택자와 class 선택자의 비교

id 선택자와 class 선택자는 스타일 시트의 선택자라는 의미에서는 같다. 하지만 id 선택자는 한 페이지에서 하나만 존재할 수 있는 고유한 값을 나타내지만, class 선택자는 한 페이지에서 두 개 이상 존재할 수 있다. 또한, id 선택자는 HTML DOM으로 조절 가능한 DOM 요소로 HTML 문서내에서 유일해야 한다.