선택자(Selector)
Class 선택자
block-level과 inline-level
table
border-collapse
table-layout
스크롤 테이블
마우스 커서
스크롤바 색상
링크 색상
필터
인쇄
@media print
page-break-before
ime-mode
포지셔닝(Positioning)
Class 선택자(Class Selector)

아래는 클래스 선택자를 사용한 예제입니다.

<style type="text/css">
<!--
* {font-size: 9pt;}
.title {color: #004000; font-weight:bold; font-size: 11pt; padding:5 0 5 0;}
.sub_title {color:#333333 ; font-weight:bold; font-size: 10pt;  padding:5 0 5 0;}
.str {color: #666666; padding:5px;}
.u_list {margin-top:5px;}
.u_list li {line-height:150%;}
//-->
</style>

<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">
    <li>공통 선택자(Universal Selector)
    <li>타입 선택자(Type Selector)
    <li>ID 선택자(ID Selector)
    <li>Class 선택자(Class Selector)
</ul>

<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%;}

이런 식으로 클래스는 중첩하여 사용할 수 있습니다.

Copyright © Homejjang.com All rights reserved.