3130176CSS기본31301602009-04-14T01:54:49Zhttp://zbum.springnote.com/pages/31301762009-04-13T08:06:13Z<h1 style="TEXT-ALIGN: center;">CSS 기본</h1>
<p style="TEXT-ALIGN: right;">zbum</p>
<h3>I. 서론</h3>
<p>웹표준에 입각한 웹페이지를 구성하는데 있어 구조-형식-동작의 분리는 필수적인 요소이다. 지금껏 웹페이지의 디자인을 위해 아무렇게나 써왔던 TABLE Layout, 형식을 위한 tag들을 사용하지 않기위하여 CSS에 대한 깊은 이해는 필수적이다.</p>
<p> </p>
<p>CSS는 Selector와 Definition으로 구성되어 있으며 Selector을 이해한다면 CSS의 70% 이상을 이해한 것일 할 수 있다. 나머지 Definition은 레퍼런스를 이용하여 계속 참조해 나가야 할 부분이다. 그럼 이제부터 CSS Selector에 대해서 공부해 보자.</p>
<h3><span style="FONT-FAMILY: 돋움,San-Serif;"><span class="Apple-style-span" style="COLOR: #223d67;">II. 본론</span><br /></span></h3>
<h4>1) CSS 의 구성</h4>
<p> CSS는 선택자(Selector)와 선언부로 이루어져 있다. 선언부는 속성과 값으로 구성되어 있다.</p>
<p> </p>
<p><img title="CSS_BASIC.png" class="attachment" src="/pages/3130176/attachments/1413094" height="534" alt="CSS_BASIC.png" width="886" style="WIDTH: 502px; HEIGHT: 284px;" /> </p>
<p> </p>
<h4>2) CSS 선택자와 HTML 엘리먼트</h4>
<p> CSS의 Selector는 웹페이지의 Document상에서 CSS 속성을 적용할 HTML ELEMENT를 선택(특정,Targeting)하기위한 CSS구성요소 이다.</p>
<p> CSS Selector의 역할은 아래 그림을 보면 명확히 알 수 있다. 즉, xxx.css에서 p라는 selector를 사용하면 그 CSS를 적용한 HTML문서의 모든 p tag에 해당 속성이 적용된다. 아래 그림처럼 <p>가나다라마</p> 는 볼드체에 파란색 글씨로 보일 것이다.</p>
<p> </p>
<p> <img title="CSS_HTML.png" class="attachment" src="/pages/3130176/attachments/1407476" height="593" alt="CSS_HTML.png" width="1092" style="WIDTH: 654px; HEIGHT: 322px;" /></p>
<p> </p>
<p> </p>
<h4> 3) CSS 선택자의 종류</h4>
<p>위의 예와 같이 HTML 의 엘리먼트를 선택하는 선택자 뿐만아니라 다양한 형태의 CSS Selector가 존재한다. 아래는 CSS2기준의 Selector이다.</p>
<p> </p>
<table class="dataTable2">
<thead>
<tr>
<th>구분</th>
<th>패턴</th>
<th>대상</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<th>universal selector</th>
<td>*</td>
<td>Document 상의 모든 HTML Element를 선택</td>
<td> </td>
</tr>
<tr>
<th>Element type Selectors</th>
<td>E</td>
<td>Dcouement 상의 모든 E 엘리먼트 타입을 선택</td>
<td> </td>
</tr>
<tr>
<th>Descendant Selectors</th>
<td>E F</td>
<td>E의 하위도드중 F 타입을 선택</td>
<td> </td>
</tr>
<tr>
<th>Child Selectors</th>
<td>E > F</td>
<td>E의 자식 노드 중 F 타입을 선택</td>
<td> </td>
</tr>
<tr>
<th>Class Selector</th>
<td>.aaa</td>
<td>class 속성이 aaa 인 HTML 엘리먼트 선택</td>
<td> </td>
</tr>
<tr>
<th>ID Selector</th>
<td>#bbb</td>
<td>id 속성이 bbb인 HTML 엘리먼트 선택</td>
<td> </td>
</tr>
<tr>
<th>Pseudo-element Selector</th>
<td>E:first-child</td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>Pseudo-class</th>
<td>E:active,<br />
E:hover,<br />
E:focus</td>
<td>특정 조건하의 모든 엘리먼트를 선택</td>
<td> </td>
</tr>
<tr>
<th>Adjacent Selector</th>
<td>E+F</td>
<td>E엘리먼트 다음에 바로 F엘리먼트가 이어지면 선택 엘리먼트간 간격 조정등에 유용</td>
<td>IE8에서 지원</td>
</tr>
<tr>
<th>Attribute Selectors</th>
<td> </td>
<td> E[foo], foo 속성값이 지정된 E엘리먼트 선택 <br />
E[foo=“warning”], foo 속성값이 warning인 E엘리먼트 <br />
E[foo~=“warning”] foo 속성값에 단어 warning 이 포함된 E엘리먼트 <br />
E[lang|=“en”] lang 속성값에 ‘-’으로 구분된 en값이 포함된 E엘리먼트</td>
<td>lang=“en-uk”<br />
lang=“en-us”</td>
</tr>
</tbody>
</table>
<p> </p>
<h3>III. 결론</h3>
<p>CSS의 Selector에 대해서 살펴보았다.</p>
<p>다음엔 CSS를 이용한 웹페이지 Layout에 대해서 살펴 보겠다.</p>
<p> </p>
zbumzbum75보고서