css에서 잘못알고있는 width

CSS Baese Design을 할 때...
이전의 <TABLE>이 하던 것을 <DIV>로 대체해야 하기에...
아마도 height속성과 더불어 가장 많이 쓰이는 CSS속성이 될 것이다.

지금까지 <TABLE>위주의 코딩을 하던 사람들에게는...
CSS의 width값의 적용범위가 <TABLE>에 익숙해있던 범위와는 달라서...곤혹을 치룰 것이다.


예를 들어 <TABLE>에 width=360을 입력해놓은 상태이면...
width=120인 <TD>를 3개 있다치더라도...cellpadding, cellspacing값과는 무관하게
width=120과는 오차범위가 1pixel이상 나는 일이 별로 없고,
width=360은 어느정도는 절대적으로 지켜졌기 때문이다.

그림 1

그리고, 이전의 익스플로러에서
margin, border, padding값을 자의적으로 적용함과 함께...
width값의 적용범위를 border가 그려지는 영역으로 되었기 때문에...

그림 2

대다수의 사람들이 위의 그림처럼 border의 안쪽영역을 width값의 범위인 줄 알고 있고,
padding값은 width값의 안쪽 부분의 여백을 정의하는 것으로 알고 있다.


나도 2004년 2월까진 저렇게 알고 있었다.


내가 그토록 신뢰했던 CSS refernce 서적과 국내 CSS에 대해 설명해놓은 사람들의 홈페이지나 글들을 봐도 저것이 잘못되었다고 말하는 이가 하나도 없다.


아니다.


width값은...실제 데이타가 들어가는 영역의 범위를 규정하는 것이다.
margin값과 padding값, 그리고 border의 width값에 영향을 받지 않는
텍스트나 이미지, 또다른 요소들이 차지하는 영역에만 width값을 적용시켜야한다.

그러나, 익스플로러는 그렇지 못하다.

익스플로러 장난 아니다.


<DIV>에 width값을 적용시켜놓으면 1px짜리 border정도까지 포함시키고
padding값이 width값의 안쪽에 적용되어 의도했던 것보다 <DIV>의 크기가 작게 나온다.

더욱 웃긴건...
padding값이 같은 익스플로러6.0에서조차도 차이가 난다.

익스플로러 5.0과 window2000에서의 익스플로러6.0은 그림2처럼 구현을 하고
windowXP에서는 그림3처럼 구현을 하는데...
같은 페이지에서조차 그림2처럼 구현하기도 한다.

(같은 페이지에서 저러면 돌아버린다.)

또한, border값은 width와 다른 범위이지만, Block의 width값에 일부를 포함시켜 의도했던 border의 두께가 나오지 않을 때도 있다. border-left:10px solid #FF0000을 적용시켜도 width값이 지정되어 있을 때 실제 border가 8pixel만 나올 때도 있다.

CSS Based Design을 하시려는 분이 있다면...
넷스케이프6.0이상 버젼을 꼭 깔기를 추천합니다.
CSS적용에 대해서는 넷스케이프의 CSS엔진이 훨씬 훌륭합니다.


추신:
<td style="padding-left:12px;"> 이거 쓰지마시라
만약 꼭! 써야한다면...<table>에 width값을 정의하지말지니라.
window2000에서 볼때와 windowXP에서 볼 때 적용된 것이 다르다.