CSS강좌 
CSS강좌 ![[레벨:30]](http://www.jobdahan.net/modules/point/icons/default/30.gif "포인트:190858point, 레벨:30/30"){kind=icon}
똑띠| 대상회원 : |
|---|
CSS는 기본적으로 아래와 같은 형태로 작성이 되어 진다.
<p style="font-size:9pt;color:#ff660;font-weight:bold;font-decoration:none;">텍스트 스타일 지정</p>
<style type="text/css">p {font-size:9pt;color:#ff660;font-weight:bold;font-decoration:none; }</style>
위 두 개의 예시 모두 CSS이다. CSS인데 왜 보이는 형태가 다른지 의문을 가질 수 있을 것이다. 먼저 두가지 예시가 적용된 샘플을 코드를 간략하게 소개 하면 아래와 같다.
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table>
<tr>
<td>
<p style="font-size:9pt;color:#ff660;font-weight:bold;font-decoration:none;">텍스트 스타일 지정</p>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">p {font-size:9pt;color:#ff660;font-weight:bold;font-decoration:none; }</style>
</head>
<body>
<table>
<tr>
<td>
<p>텍스트 스타일 지정</p>
</td>
</tr>
</table>
</body>
</html>
두 형태의 예에서 첫 번째 형태는 지정된 부분에만 스타일이 지정되는 것이고 두 번째 형태에서는 본문 내용 중에 <p> 태그가 있으면 해당 태그에 스타일을 모두 지정하는 형태라고 할 수 있다.
당연히 추천 하는 방법은 두 번째 방법일 것이다.
CSS 적용방법은 다음 장에서 상세히 다루니 이번 장에서는 CSS 기본 구성요소에 대해 살펴보도록 하자.
두 번째 예시에서 <style type="text/css">은 스타일 유형은 텍스트(text)이고 그 파일은 CSS임을 나타낸다.
p {font-size:9pt;color:#ff660;font-weight:bold;font-decoration:none; }
여기에서 P에 해당하는 부분을 “선택자”라고 부르고, { } 안에 들어 있는 내용을 “선언문” 이라고 한다.선언문은 속성과 값으로 구성되고 font-size:9pt에서 font-size가 속성이 되겠고, 9pt가 값이 되겠다.여기에서 중요한 것은 속성과 속성의 구분은 세미콜론(;)으로 구분을 하고 속성과 값은 콜론(:)으로 구분을 한다.
선택자
선언문
CSS에 대해서 어느 정도 이해를 하고 계시는 분들이라면 지금 설명이 그다지 어렵지 않을 것이다.
그러나 처음 CSS를 접하시는 분들이시라면 분명 용어부터 낯설고 이해가 잘 안될 수 있다. CSS의 선택자와 선언문을 설명할 적절한 예를 들어보자.일상생활에서 이해하기 쉬운 예를 찾다 우리가 흔히 입고 다니는 옷과 기타 액세사리들을 가지고 설명을 해보자.
주말에 사진 찍으러 가지 위해 모자와 패딩점퍼, 후드티, 건빵바지, 하얀 운동화로 코디를 하고 나섰다.여기에서 모자, 패딩점퍼, 후드티, 건빵바지, 하얀 운동화를 선택자로 보면 된다.그리고 하얀 운동화는 당연히 색깔이 하얀색이고, 사이즈가 260mm, 가격은 10만원을 주고 샀다.여기서 색깔, 사이즈, 가격등이 속성이 되겠고, 하얀색, 260mm , 10만원이 값들이 되겠다.
이렇게 이해를 한다면 CSS에 대한 개념이해가 어렵진 않을 것이다.이젠 여러분이 멋진 코디네이터가 되어서 스타일리시(Stylish)한 모습으로 꾸미면 되는 것이다.
다음으로 CSS사용되는 선택자(Selection Pointer)의 유형에 대해 알아보자. 선택자는 CSS를 이해함에 있어 상당히 중요한 부분이다. 다양한 선택자가 사용되는데 그중에서 많이 사용되는 공통선택자, 엘리먼트 선택자, 클래스 선택자, ID 선택자, 가상 클래스 선택자에 대해서 살펴보도록 하자.(CSS관련 부분은 XE 기본 템플릿을 이해 할 수 있는 범위 내에서 설명을 한다.)
