아래는 클래스 선택자를 사용한 예제입니다.
<style type="text/css"> <div class="title">CSS 선택자(Selector)</div> <div class="str">CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있습니다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문입니다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못합니다.</div> <div class="sub_title">선택자(Selector)의 종류</div> <div class="str">선택자(Selector)는 아래와 같이 4개로 나누어볼 수 있습니다.</div> <ul class="u_list"> <div class="sub_title">공통 선택자(Universal Selector)</div> <div class="str">공통 선택자(Universal Selector)는 *로 표현되는 선택자입니다.</div> |
CSS 선언부를 살펴보면 먼저 * 공통 선택자를 이용하여 문서 전체의 font-size를 9pt로 지정했습니다. 일종의 기본값을 지정한다고 볼 수도 있습니다.
위의 예제에서는 총 4개의 클래스 선택자가 정의되었습니다.
제목을 표시하는 title, 소제목을 표시하는 sub_title, 설명을 표시하는 str 마지막으로 순서없는 리스트를 표시하는 u_list를 지정하였습니다.
클래스를 어떤 식으로 지정할지, 클래스의 이름은 어떻게 정할지는 만드는 사람 마음대로 입니다. 이런식으로 클래스를 일관성있게 지정하여 사용하여 외부 css 파일로 적용하면 css 파일 수정만으로 홈페이지 전체의 스타일을 수정할 수 있습니다.
그러기에 경험이 쌓이다 보면 자신만의 클래스를 규정하는 방식을 가지게 됩니다.
위의 예제에서 특이한 부분이 클래스 선택자와 타입 선택자를 혼용하여 사용한 부분입니다.
| .u_list li {line-height:150%;} |
이런 식으로 클래스는 중첩하여 사용할 수 있습니다.
※출처 : http://www.homejjang.com/