[블로그 꾸미기] table, div, css?

 이번에도 블로그 꾸미기 글이 되겠습니다. 먼저 박스도 만들어보고 적용도 해보려고 했지만 일단 먼저 설명이 들어가야 다음부터 따라서 하실수있을것 같아 급 변경하여 조금 설명을 하기로 했습니다. 블로그나 웹사이트에서 가장 많이 사용되는 세가지를 설명해보려고 하는데요 이 부분은 이해를 조금 하신다음에 그냥 이런거구나 정도만 아시고 넘어가실수있도록 간략하게 적어보겠습니다. 처음 블로그 스킨 편집이나 기타 카페나 홈페이지 등을 꾸미실때 도움이 될수도 있겠습니다. 그럼 먼저 table 먼저 설명을 하겠습니다.

table

 일반적으로 아래한글이나 워드등에서 자주 사용하는 표 를 말합니다. 예전에는 표를 짜두고 그 자리에 하나하나 넣는 방식으로 웹사이트를 만들곤 했었습니다.

div

 HTML 에서 말하는 div 는 하나의 박스라 보시면 됩니다. 한 부분이 한 레이어가 될수있는 각 부분을 차지하게 됩니다. 테이블에서의 한 공간과 같다고 할수있겠습니다.

대략적으로 감이 좀 오시나요? 즉 테이블은 기본적으로 큰 표를 만들고 그 속으로 하나하나 늘려가는 형식입니다. 테이블 구조를 보면 <table> </table> 로 묶여있는걸 알수있습니다. 이 안쪽으로 td tr 등으로 구조를 만듭니다. 반면 div는 각 부분을 하나하나 만들게됩니다. 한줄에 하나의 div로 묶이게 됩니다. <div>텍스트</div> 이런식인 구조가 됩니다.

이것의 큰 차이점은 웹표준이다 뭐다하면서 많이 사용하게되었다는 겁니다. 기존에 테이블은 문제가 있었습니다. 스타일지정을 잘해도 만들고 보면 브라우져마다 다른 화면을 얻었기 때문이죠. 최근에는 뭐 이런값이 모두 조정되고 그래서별반 차이는 없지만 전에는 그랬었습니다. 하지만 div 는 간단하게 html 파일에서는 div 와 텍스트 등만 쓴다는거죠. 스타일은 CSS 에서 따로 처리를 하게됩니다.

CSS ( Cascading style sheet )

 CSS는 스타일을 한곳에 따로 지정하는 시트를 말합니다. 따로 지정하거나 다른 .css 확장자를 가지는 파일에 저장을 따로 할수있기때문에 페이지의 스타일등을 쉽게 조정할수있는 장점이 있습니다. 웹 표준안입니다.


테이블보다 관리가 편하고 복잡한 구조를 갖지 않습니다. 자유롭게 편하게 편집을 할수있다는 장점이있게 됩니다.


간단하게 그럼 차이점을 눈으로 보도록 하겠습니다. 가로 2 세로2 인 박스를 만들어 차이를 알아보겠습니다. 간단하게 스타일도 적용해보죠.

table

<table width="100" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>텍스트1</td>
    <td>텍스트2</td>
  </tr>
  <tr>
    <td>텍스트3</td>
    <td>텍스트4</td>
  </tr>
</table>

div

<div class="box">
<div class="t1">1</div>
<div class="t2">2</div>
<div class="t3">3</div>
<div class="t4">4</div>
</div>

CSS

.box {
width:200px;
border:1px #333 solid;
}
.t1 {
float:left;
width:100px;
border-bottom:#333 1px solid;
border-right:#333 1px solid;
}
.t2 {
border-bottom:#333 1px solid;
}
.t3 {
float:left;
width:100px;
border-right:#333 1px solid;
}
.t4 {
}

 이런식으로 같은 형태의 박스를 얻게 됩니다. div 가 분명 간편하다고 했었는데 길이의 차이가 엄청난게 무슨소리냐? 라는 분도 있으실겁니다. 간단하게 가로 2 세로2 200px 사이즈로 만들어졌기때문입니다. 홈페이지 하나를 만든다고 하면 테이블안에 엄청난 셀과 보더0에 이것저것 처리하면 엄청길어집니다. 또한 수정할때 그걸 다 찾아서 하려면 답답할때가 있습니다. 그리고 table 당 시트를 각각 지정해뒀을경우에 한번 잘못했다고 하면 모두 수정을 해야하게 됩니다. 어차피 수정하는건 같지만 그걸 찾아서 하기란 쉬운일이 아니죠.

반면 div 부분을 보면 html 부분에서는 손댈필요가 없습니다. 특별하게 잘못 넣었다던지 큰 변형이 필요하다면 그곳의 수정도 필요하겠지만 당장 사이즈에 관한건 손댈필요가 없다는거죠. css 가 지정되어있는 부분만 수정을 하면 사이즈를 변경할수있고 줄일수도있고 없앨수도있습니다. 이건 자유입니다. 이런 특징이있습니다. 사이트의 규모가 커지면 관리하기는 후자가 편하게 간편하게 관리가 될것입니다.

페이지 로딩에도 도움이 됩니다. html 파일 로딩하고 css 를 로딩하기때문에 조금더 빠른 페이지뷰가 가능합니다. 말 그대로 시트이기 때문에 순서대로 읽어 내려가면 되는겁니다.


이정도의 큰 차이점을 갖고있습니다. 하는 기능과 사용되는 부분은 같습니다. 같은곳의 셀을 매꿔주고 div 는 레이어 형식으로 매꿔주기때문입니다. 현재는 표준을 div 와 css 를 말하고 있습니다만 그렇다고 table 로 코딩했다고 잘못된방법이다? 라고는 할수없습니다. 어디까지는 웹페이지의 기본은 보는 사람을 중심으로 만들기때문인데요. 뭐든지 페이지뷰에 관계없다면 어떤것이든 좋은 선택이고 좋은 방법입니다.