코딩시 테이블을 줄입시다.

좋은 정보 감사합니다^

<div>의 깔끔함 때문에 최근들어 자주 쓰려고 하고 있습니다. 그런데 처음부터 발목을 잡는게 호환성이더군요. FF2.0에서는 예상대로 되는데 IE6에서는 구현이 안되거나 하는 문제들. 또는 그 반대 현상들. FF2.0은 CSS규약에 의거해서 유추하여 작성하면 거의 그대로 나오는 반면 IE6은 CSS의 Cascading이란 말을 무색케 하더군요. 구식이라서 그런건지. IE7에서는 좀 나아지려는지. 하지만 IE7은 그 보급 단계부터 문제가 있으니 어떻게 될런지...

일예로 div와 CSS를 사용하여 레이아웃을 바꾸려고 했는데 padding부분에서 두 브라우저간에 상충되는 부분때문에 하다 포기했습니다. 잔머리 굴려가며 해봐야 시간낭비라는 생각이 들더군요. 기껏 고생고생해서 피해가는 법을 궁리해 놔 봐야 브라우저가 업그레이드 되면 그 빠진 머리카락 보상해 주는 것도 아니고 말이죠.

결과적으로 짧은 소견이지만 그나마 호환성 문제가 가장 적은게 테이블이더란 말입니다. 테이블의 역사가 긴 만큼 당연한 얘기겠지요. 어쩔 수 없이 당분간 머리카락 안 빠지고 사는 방법은 테이블을 쓰는 것인 듯 합니다.

시간이 지나고 CSS스펙에 모든 브라우저가 충실해지면 이러한 삽질도 사라지겠죠?

예전에 겪었던 문제를 적어 둔게 있군요.
-------------------------------------
[CSS] FF2.0과 IE6에서 css padding처리의 차이점

FF2.0 과 IE6의 CSS Padding처리방식이 달라서 CSS의 padding을 이용하여 두 브라우저에 동일하게 반영되도록 간격을 맞춘다는 것이 너무 힘들군요. 서로 역관계라 한쪽에 맞추면 다른 쪽이 틀어지고 그 반대도 마찬가지고요.

FF2.0은 비교적 CSS 스펙에 충실한 반면 IE6은 오래된 버전이라서 그런지는 몰라도 CSS 스펙을 기준으로 유추해서 사용했다가는 낭패를 보기 일쑤입니다.

결론적으로 FF2.0과 IE6에 동일하게 반영되도록 간격을 맞추는 가장 간단한 방법은 padding을 0으로 하고 테이블의 셀을 이용하는 것 같습니다. padding값 0은 어떤 식으로 확장이 되든 0이기 때문에 다를 수가 없겠지요.

현재까지 시험한 바로는 IE6은 CSS의 Cascading이란 말이 무색하단 느낌이다. table보다는 가급적 div태그를 써보려던 나의 생각은 여지없이 시작부터 뭉개져 버렸습니다. div태그는 브라우저간의 격차가 줄어들기 전까지는 제한적으로 쓸 수밖에 없겠군요.

ex)
<style type="text/css">
#idname {
padding-left: 16px;
}
</style>
<table id="idname">....
<tr>
<td>
</tr>
</table>

위의 예제는 FF2.0에서는 제대로 반영되지만 IE6에서는 감감무소식입니다. IE6의 경우는 <td>에 적용해야 반영되더군요. 이것이 IE6이 Cascading이란 말을 무색하게 만드는 부분이죠.

아무튼 본인도 div를 써서 문제가 없는 경우엔 table보다는 div를 쓰는 것이 좋다고 생각합니다.

IE6이 CSS의 cascading에 충실하다면 단순히 어떤 블럭을 div로 감싸서 css적용만 하면 그 블럭내에 모두 적용이 되어야 하거늘 ... 그게 안되니 쩝쩝..

몇몇 CSS 관련 번역책을 보면 IE hack을 이용하여 IE padding문제를 개선한다고 하는데,
제가 잘못하는지 아무리 해도 IE는 엉터리로 표현하더군요.ㅡ,.ㅡ

그래서 굳이 테이블을 안 쓰고 div로만 할때는 div를 이중으로쓰고 padding보다는 margin을 씁니다. margin은 계산법이 IE와 FF가 둘다 같잖아요. 즉, 하나의 div에 padding을 쓰려하는 경우, 호환성을 위해서 두개의 div를 쓰고 안쪽의 div에 margin값을 주어서 같은 효과를 노리는거지요.

제가 쓰는 편법이기는 하나 무슨 고생인지-_-;

ㅋㅋ1픽셀에 울고 1픽셀에 자지러지는 나~

1픽셀이 사람 잡는다니깐요 -_-