2009. 5. 22. 01:02

왜 CSS를 써야만 하는가

2009. 5. 22. 01:02 in life & Computer

우선 첫 예문을 통해서 CSS의 편리성을 한번 맛보자.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" >
* { margin:0; padding: 0; }

#mybox { margin: 10px; padding: 5px; width: 700px; background: #FFCC00; }

#mybox .tel { margin: 10px; padding: 5px; width: 650px; background: #FF3300; color:#FFFFFF; } 

</style>
</HEAD>
<BODY>
<div id="mybox">いったい朝鮮のいつの時代に、たとえばアチキといったふうな朝鮮固有の名前がなくなり、うまれもつかぬ漢民族の姓名になってしまったのであろう。

<p class="tel">どうやわ新羅（しらぎ）のころらしい。しかしこれほどの文化大革命がいつごろであったかが、朝鮮史をいくら読んでもよくわからない。通説では、六世紀のはじめごろの新羅の王室や貴族のあいだでは金姓、朴姓があったようだが、同時に固有朝鮮名ももっていた。すべての人民が漢姓をもちいるようになったのは、新羅の最盛期以後に、おそらく政治的理由以外の――たとえば氏族の自然膨張といったふうな――社会的事情でそうなったのかもしれない。ともかくこの一事でもわかるように、上代朝鮮史というものはわかりにくい。</p>
<div align="right">司馬遼太郎</div>
</BODY>
</HTML>
 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<BODY>
<table width="713" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="3" bgcolor="#FFCC00">いったい朝鮮のいつの時代に、たとえばアチキといったふうな朝鮮固有の名前がなくなり、うまれもつかぬ漢民族の姓名になってしまったのであろう。</td>
   </tr>
  <tr>
    <td width="35" bgcolor="#FFCC00">&nbsp;</td>
    <td width="638" bgcolor="#FF3300"><span class="tel style1">どうやわ新羅（しらぎ）のころらしい。しかしこれほどの文化大革命がいつごろであったかが、朝鮮史をいくら読んでもよくわからない。通説では、六世紀のはじめごろの新羅の王室や貴族のあいだでは金姓、朴姓があったようだが、同時に固有朝鮮名ももっていた。すべての人民が漢姓をもちいるようになったのは、新羅の最盛期以後に、おそらく政治的理由以外の――たとえば氏族の自然膨張といったふうな――社会的事情でそうなったのかもしれない。ともかくこの一事でもわかるように、上代朝鮮史というものはわかりにくい。</span></td>
    <td width="40" bgcolor="#FFCC00">&nbsp;</td>
  </tr>
  <tr>
    <td height="13" bgcolor="#FFCC00">&nbsp;</td>
    <td colspan="2" bgcolor="#FFCC00"><div align="right">司馬遼太郎</div></td>
   </tr>
</table>
</p>
</BODY>
</HTML>
<p><

갑자기 만든거라.. 그림이 형편없다..ㅎㅎ

상단의 코드와 하단의 코드는 비슷한출력을 보여준다. (적색박스안이 검은색만 틀리고 다른 보여주는것은 상당히 비슷하다)

아래의 코드는 HTML코드을 이용해 Dreamweaver에서 작성한것이고 위의것은 에디트 플러스를 가지고 CSS코드로 만든것이다. 바깥박스의 색을 바꾸고 싶다면 위의 경우는

#mybox 의 background: #FFCC00;부분만 수정하면 된다.

하지만 아래의 경우 셀속성을 일일히 바꾸어주어야 한다. (물론 표속성으로 만들어주면 괜찮지만)

또한 지금 만든 이 그림을 이동하고 싶을때는? CSS코드는 x축과 y축을 px로 나타내주기만 하면 이동한다.(레이어와는 틀린 개념이다.) 하지만 테이블로 작성했을경우 이동하기 위해서는 다시 더 큰 표를 만들어주어야 한다.

웹을 만드는 사람이 포토샵으로 한장의 레이아웃을 만들었다고 치자..CSS와 보통의 HTML코드와 어느코드로 작업하는것이 쉬우며, 실현이 빠를까?

CSS코드로 만드는것이 대답이다. 위의 예제를 실행해보고, 아래의 코드가 쉽다는 사람은 좀 생각할 여유를 만들기 바랍니다.

이번장은 왜 CSS를 써야만 하는가에 대한 강좌였다. 다음 장은 선택자를 공부합니다.

'life & Computer' 카테고리의 다른 글

인천북구도서관 - 인터넷속도  (0) 2009.06.10
역시 토론토 uTorrent  (1) 2009.05.31
CSS글쓰기를 시작하며.  (0) 2009.05.21
Zeroboard XE을 이용한 개인사이트 오픈. www.snowrice.com  (0) 2009.05.17
네이버 블로그 웹폰트 , 돋음,verdana,나눔명조,나눔고딕  (0) 2009.05.03
Posted by bestakas

티스토리툴바