테이블 디비로 변환

[닥터컴]

디비로 바꾼다고 하는데 복잡한 테이블의 경우 너무 어렵네요....
이건 어떻게 바꿔야 하는지 좀 도와주세요...

<table cellspacing="0px" width="980px" cellpadding="0px">
<tr>
<td>
<table cellspacing="0px" width="960px" cellpadding="0px">
<tr>
<td align="right" valign="middle" bgcolor='#ffffff' height="70px"></td>
</tr>
<tr>
<td align="center" valign="middle"></td>
</tr>
<tr>
<td align="center" valign="middle">
<table cellspacing="0px" width="960px" cellpadding="0px">
<tr>
<td align="center" valign="top" width="180px" bgcolor='f4f4f4' style="padding:20px 0px 20px 0px;">
<table cellpadding="0px" cellspacing="0px" width="150px">
<tr>
<td width="150px" align="center" valign="top"></td>
</tr>
</table>
<table cellpadding="0px" cellspacing="0px" width="150px">
<tr>
<td width="150px" align="center" valign="top" style="padding-top:10px;"></td>
</tr>
</table>
</td>
<td align="center" valign="top" width="780px" bgcolor='#ffffff' style="padding-left:10px;">
<table cellpadding="0px" cellspacing="0px" width="100%">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10px" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#555555"></td>
</tr>
</table>
</td>
</tr>
</table>

[박민권]

소스를 붙여보니 레이아웃의 일부인 것 같군요.

우선 테이블 레이아웃에서 CSS레이아웃으로 넘어갈 때 어려움을 느끼는 것은
CSS로 테이블을 만들려 할 경우 어렵게 느껴집니다.

이것이 어떻게 동작할지 몰라서 정확한 답은 아닐 수 있습니다.

내부에 글씨라도 있다면 더 괜찮았을 텐데요. :)

Code: Select all

<style type="text/css">
    div{border: 1px solid red;} /* 눈에보기위해 div에 빨간 테두리를 */
    #Top-Menu{width: 980px; height: 150px; position: relative;}
    #Top-Menu .box{position: absolute; top: 70px;}
    #Top-Menu .box.left{width: 150px; height: 40px; left: 0;}
    #Top-Menu .box.right{width: 830px; height: 50px; left: 150px;}
</style>

<div id="Top-Menu">
    <div class="box left">왼쪽상자</div>
    <div class="box right">오른쪽상자</div>
</div>

대충 이렇게 할 수도 있겠습니다.
정확한 크기와 동작여부를 몰라서 정확한 답은 아닐 수도 있겠지만
CSS 레이아웃에 대한 하나의 예가 되겠습니다.

CSS 레이아웃은 자유도가 높기에 갖가지 방법이 나올 수 있습니다.

저는 float 보다는 position을 이용해서 레이아웃 잡는 것을 즐겨 하다보니
위의 예제도 position으로 잡았습니다.

[hyeonseok]

저는 float 보다는 position을 이용해서 레이아웃 잡는 것을 즐겨 하다보니
위의 예제도 position으로 잡았습니다.

저도 position 을 더 선호해요.
float 는 브라우져 문제는 많이 유발 시켜서...-_-;
position + javascript 방법을 사용한답니다.

[yser]

position: absolute 는 IE 에서 드래그의 문제를 발생시키더군요...
문자를 드래그 해보면 선택이 제대로 안됩니다. 가끔 그것 때문에 환장할 때가 있습니다. 별로 필요는 없지만..

그것도 항상 그런 것도 아니고, 그때그때 다릅니다.
우하하.. -_-

float 나 position 이나 사실 정신건강에 그리 좋지 않은 게 사실...
울며 겨자 먹기로 쓸 수 밖에 없습니다. IE7 되면 해결 되겠지만,
여전히 남아 있는 구 버전 브라우저는... 어쩔 수가 없겠죠.

[박민권]

position: absolute 는 IE 에서 드래그의 문제를 발생시키더군요...
문자를 드래그 해보면 선택이 제대로 안됩니다. 가끔 그것 때문에 환장할 때가 있습니다. 별로 필요는 없지만..

이런거 우리나라 개발자들이 좋아하잖아요.

마우스 오른쪽 버튼 클릭금지,
텍스트에 블럭씌우기 금지,
텍스트 자료를 복사하는걸 막기위해 플래시나 통이미지 처리 ㅡㅡ;

뭘그리 막는걸 좋아하는지 다 퍼갈 수 있는데.