웹 브라우저에서 사용하는 HTML 태그의 기본값을 없애기 위해,
작업 전에 다음과 같은 태그를 사용할 수 있다.

table { border-collapse: collapse; border: 0px; }
td { padding: 0px; margin: 0px; vertical-align: top; }
img { border: 0px; }

이것들은 다음 태그와 같으며,

<img border=0>
(img 태그의 경우 a 태그 사이에 끼어 있으면 자동으로 border가 2가 되므로 보통은 꼭 해준다)
<table cellspacing=0 cellpadding=0 border=0>
(대부분 디자인에서 여백을 없애기 위해 쓴다)

이제 다음과 같이 쓰면 된다.

<img>
<table>



명시적으로 써 주는 것이 좋다 vs 가능한 보기 쉽게 깔끔한 소스가 좋다

일단 표준은 제쳐두고 이야기를 하겠습니다. 필자의 경우 후자를 좋아하는 편이라서, 위지윅 에디터에서 위에서 이어지는 동일한 크기의 사이즈의 TD 요소가 여러개일 경우 최상단의 설정(width="30%" 등)만 남기고 모두 지워 줍니다. 이렇게 하는 것은 테이블이 크게 복잡하지 않다면 상최단의 시작 지점 요소만 보고 이어지는 요소들의 크기를 파악하는 것은 어렵지 않기 때문인데, 뿐만 아니라 해당 열의 너비를 변경해주고 싶은 경우 최상단의 요소만 바꿔주면
된다는 장점도 있습니다. 보다 권고되는 방법은 각 TD에 class를 지정해 준 뒤 css 선언부에서 해당 class의 설정만 변경해주는 것이고, 더 권고되는 방법은 table을 사용하지 않는 것입니다만 개인적으로는 테이블을 사용할 경우의 높은 소스 코드 가독성 때문에 이러한 방법을 사용하고 있습니다.
powered by Moniwiki | themed by clockoon
last modified 2008-12-30 10:44:13
Processing time 0.0082 sec