코딩시 테이블을 줄입시다.
테이블 사용의 문제점
1. 페이지 구조 파악이 어려워진다. => 비용발생
2. 페이지를 수정할 경우 유지, 보수가 어려워진다. => 비용발생
3. 테이블은 구성하는 태그가 많으므로 페이지 로딩 속도가 느려진다.
4. 테이블의 본래 쓰임에 맞지 않는다.
대안
1. 단순히 여백, 공간의 문제라면 padding 또는 margin을 이용함
2. div의 적극적인 도입
3. 테이블은 말 그대로 표를 그리거나, 큰 범위에서 표로 볼 수 있는 구조(게시판, 전체 디자인 레이아웃)일 경우에만 한정하도록 노력
(**테이블을 레이아웃에 사용하지 않는 것은 오히려 많은 어려움을 가져올 수 가 있습니다. 특히 우리나라의 웹현실에서 얼마나 고역인지 해보신 분들은 아실 겁니다.. 따라서 필요할 때 적절하게 그러나 과하지 않게 사용하는 것이 중요하다고 생각됩니다.)<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:54:41 CSS에서 이동 됨]</div>
1. 페이지 구조 파악이 어려워진다. => 비용발생
2. 페이지를 수정할 경우 유지, 보수가 어려워진다. => 비용발생
3. 테이블은 구성하는 태그가 많으므로 페이지 로딩 속도가 느려진다.
4. 테이블의 본래 쓰임에 맞지 않는다.
대안
1. 단순히 여백, 공간의 문제라면 padding 또는 margin을 이용함
2. div의 적극적인 도입
3. 테이블은 말 그대로 표를 그리거나, 큰 범위에서 표로 볼 수 있는 구조(게시판, 전체 디자인 레이아웃)일 경우에만 한정하도록 노력
(**테이블을 레이아웃에 사용하지 않는 것은 오히려 많은 어려움을 가져올 수 가 있습니다. 특히 우리나라의 웹현실에서 얼마나 고역인지 해보신 분들은 아실 겁니다.. 따라서 필요할 때 적절하게 그러나 과하지 않게 사용하는 것이 중요하다고 생각됩니다.)<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:54:41 CSS에서 이동 됨]</div>
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 6개
일예로 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적용만 하면 그 블럭내에 모두 적용이 되어야 하거늘 ... 그게 안되니 쩝쩝..
제가 잘못하는지 아무리 해도 IE는 엉터리로 표현하더군요.ㅡ,.ㅡ
그래서 굳이 테이블을 안 쓰고 div로만 할때는 div를 이중으로쓰고 padding보다는 margin을 씁니다. margin은 계산법이 IE와 FF가 둘다 같잖아요. 즉, 하나의 div에 padding을 쓰려하는 경우, 호환성을 위해서 두개의 div를 쓰고 안쪽의 div에 margin값을 주어서 같은 효과를 노리는거지요.
제가 쓰는 편법이기는 하나 무슨 고생인지-_-;