css 를 배우시기 위해서는 xhtml (css+html) 사전을 구매하셔서 보시는것이 더 좋습니다
저도 css를 배울려고했을때 웹에서는 좋은곳이 없어 오로지 책보고 공부했습니다
* 웹 2.0을 이끄는 방탄웹 이란 책은 css의 중요성에 대해 나와있습니다
* 실용예제로 배우는 웹표준 이란 책은 css를 활용하는 예제로 css의 감을 주더군요
* 정보문화사의 xhtml 사전 을 이용하여 css의 모든 속성을 외웠습니다
(xhtml은 html+css 라고 생각하시면됩니다)
p {font-size:12px;}
이것의 뜻은 모든 p태그에는 12px만큼의 폰트 크기를 주게됩니다
p a {font-size:14px;}
이것의 뜻은 p 태그 안에있는 a 태그들한테만 폰트크기를 14px로 주라는 이야기입니다
p, a, body {font-size:16px}
이것의 뜻은 p태그와 a태그 body 태그의 내용들은 폰트크기를 16px로 주라는 뜻입니다
위처럼 정한후에 <p>내용을 <p>내용</p> 를 사용하게 되면 자동으로 위에서 정한것이 적용됩니다
스타일시트 구성
태그 {속성:속성값; 속성:속성값;……}
태그 : 적용할 태그 혹은 id, class
속성 : 어떠한것을
속성값 : 어떻게 적용한다
즉, font {color:red; font-size:12px;}
html 문서에 있는 font 란 태그들은 모두 font의 색깔은 빨강으로 적용한다는 뜻
속성:속성값 으로 : 을 이용하여 구분합니다
다른 속성을 적용할때는 ; 을 이용하여 나눈후 위처럼 계속 이어 나갑니다
스타일시트에서 더 중요한 class와 id에 대해 말씀드리겠습니다
.ccc {font-color:red;}
이 뜻은 class를 ccc라는 이름으로 정해주고 이 이름을 가진것들의 글자를 빨강으로하라입니다. 이렇게 정한것을 태그에 적용하기 위해서는 태그에 class=이름을 적어주시면됩니다. 위 내용을 div 태그에 적용하고 싶다면 <div class="ccc">라고 하면 위에서 정한것이 적용됩니다. 또 font 태그에 적용하고 싶다면 <font class="ccc">라고 하면 font 태그에 정해집니다. 이 class 는 아주 여러번 원하는곳에서 사용이 가능하답니다.
#ccc {font-color:green;}
이 뜻은 id의 이름을 ccc로 준다는 이야기입니다. 위 내용은 ccc라는 id를 가진 태그에 폰트 색깔은 초록색으로 준다는 이야기입니다. 사용법은 만약 div 태그에 적용하고 싶다면 <div class="ccc"> 라고 하여 사용하시면됩니다.
이제 슬슬 무엇인가 이상하다고 생각이 드실것입니다. 그렇다면 class와 id는 같은것이 아니냐? 라는 질문이 떠오르실겁니다. 하지만 이 두개는 다르답니다. class 는 아주 여러번 아무곳에서나 불러서 쓸수있지만 id는 딱 한번밖에 사용할수 없답니다. 즉 레이아웃을 만들때 어떤 부분은 페이지에서 단 한번만 나와야겠죠. 그럴때 id를 사용합니다. css를 이용한 레이아웃은 div에 background 속성을 이용하여 배경이미지를 넣는 방식으로 레이아웃을 구성하게됩니다. 또 div는 table의 cell 개념과 같다고 보시면됩니다. (현재 아쉬운점은 valign 태그가 가진기능을 css로 구현하지 못한다는것입니다. 대신 position 이란 속성이 있는데 이것을 이용하기가 매우 까다롭습니다)
깜빡한것이있군요
스타일시트 적용방법은 3가지입니다
강하고 약하다는 뜻은 이 3가지 속성을 모두 동시에 적용했을때 제일 강한것이 약한것에서 정한 것을 무시하고 적용되게됩니다.
1. 제일 강한 스타일시트
<태그 style="속성:속성값; 속성:속성값;"> 를 이용한 방식입니다
예를 들어 <font style="color:green; font-size:12px;">처럼 사용합니다
2. 둘째로 강한 스타일시트
<style type="text/css">
<!--
내용
-->
</style>
3. 가장 약한 스타일시트
<link rel="stylesheet" type="text/css" href="문서주소 />
글쓰다보니 지저분해졌군요
위 3가지 책만 보시면 html 아시는분이라면 금방 배우실수있습니다
아니 css 중요성을 아신다면 실용 관련 책과 사전만 보시면 금방 배우실수있습니다
자세히 읽어보시고 질문있으시면 쪽지주세요
