테이블코딩을 툴로 할경우 코드에 손대지 않고 쉽게 처리하던 시절이 있었죠.

이때 대부분 DTD를 지우고 썼던 기억이 납니다. IE만 쓰던 시절에는 별다른 문제가 없었는데 파이어폭스 크롬 사파리 와 같은 표준브라우저를 알게 됩니다. 기존에 작업하던 방식으로는 웹사이트가 깨지게 되죠. 모든 브라우저에 똑같이 보일수 있도록 하는 크로스브라우징 이라는 용어가 대두 되고 크로스브라우징을 맞추려면 웹표준으로 코드를 짜야 된다라고 정부와 업체가 나섭니다.

발주되는 프로젝트도 웹표준 준수 라는 명칭을 달고 나오죠. 웹퍼블리셔 라는 직군이 생기는 시작점입니다.

기존 테이블 코딩에 익숙해 있던 우리로써는 오히려 복잡해 보이고 덜 효율적인것 같은 div 하드코딩에 짜증이 생기기도 했습니다. 그러나 어느덧 시간이 지나서 우리는 깨닫게 됩니다. 우리가 무지했구나. 마이크로소프트의 IE 에 우리의 목을 걸고 있었구나~. 엑티브엑스는 IE에서만 작동하는것이었구나~. IE의 쿼크모드 라는게 있었구나~ 웹표준 맞추려니 IE는 더럽게 안맞혀 지는구나~~~ IE 가 아주 짜증나게 하는구나~~

그래서 IE도 웹표준을 준수하는 브라우저를 내놓게 됩니다. IE8 부터 였을까요? 그래도 IE8은 많이 부족했고 IE9 부터 좀 괜찮아 지더군요. 이제 웹사이트를 만들때 구조(div)와 표현(css)를 분리해서 작업을 해 봅니다.

테이블 코딩할때 못느꼈던 구조를 짜고 표현을 입혀보니 재미가 쏠쏠하다는것을 알게 됩니다. 그래도 어렵다~하~

하지만 생각보다 html 하드코딩은 배우고 익히는데에는 오랜시간이 걸리지 않았습니다. 오히려 구조와 표현을 어떻게 할지 더 고민을 하게 되죠. 여기저기 둘러보면 테이블을 꼭 쓰지 말라는 법은 없다라고 합니다.

문법에 맞는 코드를 쓰라고 하죠~ㅋ~

저의 생각은 한단계 더 발전한다라고 생각하시고 DIV로 코딩하는것을 연습해 보시면 좋을듯 합니다.

처음에는 알던 영역이 아니라 무한한 영역일 아닐까 생각되겠지만 생각보다 어렵지 않습니다. 일단 시작하세요.

모르는것은 네이버에 검색해 보세요. 매우 많은 정보들이 나옵니다. 

그리고 드림위버 툴로 div레이어 옮기는것은 하지 마시고 레이아웃 짜는 예제를 보면서 하드코딩 해보세요.

영타가 좀 어렵다면 드림위버의 자동완성 기능을 이용해서 만들어 보시길~

검색해도 방법을 못찾겠다. 열받아 못하겠다. 하시면 저에게 쪽지를 보내셔도 됩니다.

~~~ 화이팅

웹표준이라고 해서 테이블을 안쓰는 게 아니고

 

표의 목적으로 사용할 땐 테이블을 사용하셔야 합니다.

 

다만 레이아웃 등을 잡을 때 테이블을 쓰는 건 비효율적이라서 배제하는 거지요..

 

그리고 <div width=""> 이런 방식도 웹표준이 아닙니다.

 

가장 좋은 건 각 레이어마다 class 네임을 주고, 스타일링은 css로만 하는 겁니다.

 

예를 들어

 

<div width="320" height="240" style="border: 1px solid #eee; font-size: 14px"></div>

 

기존에 이렇게 하셨다면

 

<!-- style.css -->

.box { width: 320px; height: 240px; border: 1px solid #eee; font-size: 14px; }

 

<!-- document.html -->

<div class="box"></div>

 

이렇게 하는 거지요..

 

%로 사용하는 것도 문제 없구요..

 

테이블와 레이어의 가장 큰 차이는

 

테이블의 경우 안에 있는 컨텐츠가 모두 로드 되어야 내용이 보여지고,

 

레이어는 컨텐츠가 다 로드 되지 않아도 내용을 보여준다라는게 가장 큰 장점이라 할 수 있겠습니다.

 

 

table 사용하셔도 됩니다.
아직까지는 아슬아슬하게 웹표준으로 알고 있습니다.