CSS에서 class와 id 의 차이

클래스(class)와 아이디(id)

클래스(class) 선택자

위의 예에서 p {color:red}로 지정하면 모든 문단의 색깔이 붉은색으로 지정됩니다. 그럼 특정 문단의 색깔만 붉은색으로 지정할려면 어떻게 할까요?

클래스(class)를 이용하면 됩니다.

<style type="text/css"> <!-- p.red {color:red} //--> </style> <p>일반적인 문단입니다.</p> <p class="red">red라는 이름의 클래스가 지정된 문단입니다.</p>

위의 예에서 red라는 클래스는 문단에 적용시켰습니다. 특정 HTML 요소에 적용시키지 않고 독립적으로 클래스를 사용해도 됩니다.

<style type="text/css"> <!-- .red {color:red} //--> </style> <h3 class="red">소제목에도 red 클래스를 지정합니다.</h3> <p class="red">red라는 이름의 클래스가 지정된 문단입니다.</p>

이와 같이 클래스를 독립적으로 지정하는 방법이 편리하므로 더 많이 사용됩니다.

아이디(id) 선택자

클래스는 .을 이용하여 정의하고 아이디는 #을 이용하여 정의합니다.

<style type="text/css"> <!-- #red {color:red} //--> </style> <p id="red">이 문단의 id는 red입니다.</p> <p>일반적인 문단입니다.</p>

클래스와 아이디의 차이점은 클래스는 여러개를 사용할 수 있지만 아이디는 고유성을 가지므로 한 문서에 한번만 사용할 수 있습니다.

관련강좌

CSS 기본 강좌 CSS 사용법 - HTML문서에 CSS를 사용하는 3가지 방법 CSS 문법 CSS 주석 텍스트에 적용하는 CSS 속성

출처 : Tong - magarin님의 홈페이지제작통