[웹표준] td높이 와 img요소의 문제점

웹을 해본 사람이라면 누구나 퍼블리싱 과정에서 난해함을 겪었을 것이다.

 

이유인즉, 수많은 브라우져에서 같은 페이지가 다르게 표현되기 때문

 

그래서 웹표준이라것을 적용하지만, 이마저도 완벽한 해결책은 되지 못하고 있으니..

 

브라우져 별 특성을 따르지 않았으면 좋겠다. 라고 생각하지만, 문서모드들까지 여러가지를 복잡하기만 웹ㅠㅠ

 

 

 

이번에 다루게 된 내용은 table의 셀과 img요소의 문제점을 다뤄보도록 하겠습니다.

doctype를 html5에 맞게 변경을 하면서, 기존사이트에 생기는 문제점이다.

기본 html4.01이나 쿼크모드에서 발생하지 않는 점을 미리 알려드린다.

 

기본 html의 형식은

<table>

......

<tr><td><img src='http://abc.def/ti.jpg ></td></tr>

......

</table>

 

이런 형태의 소스자체가 문제점을 야기하는데,

default td height는 보통 font-size와 line-height의 영향을 받게 되는데, inline요소인 img요소가 들어가고, img의 height값이 기본 td 높이보다 작을 경우이다.

 

그러면 img의 vertical-align에 따라 다르지만, 위아래에 여백이 생기게 되는데, 이게 IE만의 문제점만은 아니것으로 판명된다.

 

외국 포럼이나 구글 검색을 해보면, 이전부터 새로운 doctype과 웹표준의 문제점으로 보인다.

 

근본적으로 td내에 img단일 요소가 들어가는 경우는 레이아웃을 구성하는 형태일테고, 원초적으로는 저렇게 사용을 하는것이 문제다.

background로 지정을 하던가!!

개인적으로, table로 레이아웃을 잡는것은 별로지만, 가끔씩 쓰면 참 편할때도 있는것

 

아무튼, 저문제점은 기본적으로 생각할수 있는

vertical-align이나 td의 padding 혹은 img의 margin,border의 문제점이 아니라는것을 알아야한다.

 

해결책

첫째는 부모td에 line-height를 0px나 0% 등으로 없애버리 것이다.

둘째는 img에 display:block; 스타일을 적용하는 것이다.

허나, 둘은 약간의 차이점이 있다.

inline요소는 정렬을 따르지만, block요소로 바꾸면 정렬을 따르지 않는다는 것이다.

이건 trick으로써의 한계인데, 두가지를 적절이 사용하면 될 것이다.

캡쳐사진을 참고하자.

기본상태에서는 line-height영향으로 위아래 여백이 생겼으며

나머지는 괜찮은 상태다. 하지만 정렬이 중앙이라면, 이미지를 block요소로 변경 시, 정렬이 무시되므로, 이또한 신경을 써야한다.

구형 html에서나 볼수있는 img로 테두리잡기 신공은, 아직도 남아있다.ㅠㅠ

저게 우정렬이 경우는 block과 float:right를 같이 사용해야 할판이다.

결론적으로는 line-height:0%가 좋은 편법이 될 것이다.

 

근본적으로는 역시 td에 img요소를 넣어서 레이아웃을 잡는 일을 없애야겠다.

개념과 사용이 같아져야 할텐데, 참 많이 아쉬운 부분이다.

 

요소들은 점점 개념이 정확해지고 있다. table로 layout을 잡는 일도 없어지리라..

무조건 구현을 위해서, 잘못된 사용법? 혹은 trick으로 table layout을 쓰고, quirk mode를 지향했던게,

다시 일로써, 잡아야되는 bug로써, 돌아오고, 이를 다시금 브라우져별 css hack같은 것들로 해결하던 시기

그리고 완성되어가는 웹의 형태로써, 발전하고 있는 거라고 생각한다.