클래스(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>

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

홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 클래스(class)의 사용이 필수적입니다. 실무에서도 클래스(class)의 사용은 빈번하게 이루어지고 있습니다.

문서의 내용중에 중요한 내용은 "붉은색으로 표현한다"는 방침을 정했다면 위의 예제와 같이 red라는 클래스를 지정한 다음(보통 외부 CSS 파일로 지정합니다.) 중요한 내용 부분에 <span class="red">내용</span> 이와 같이 지정해 줍니다.

이렇게 클래스로 지정하면 만일 "붉은색이 너무 강하므로 중요한 내용을 표시할때는 녹색으로 하고 밑줄을 그어주자"라는 방침이 정해지더라도 red 라는 클래스의 스타일만 바꾸면 홈페이지의 모든 페이지의 스타일이 변경됩니다.

곧 개별적으로 스타일을 지정하는 것보다는 클래스(class)와 외부 CSS 파일을 이용하는 것이 문서 전체의 일관성은 물론 스타일 변경시에도 작업의 효율성을 높여줍니다.