본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크
이야기/잡담

[잡담]DTD에 따른 브라우저 박스크기변화

by 빽짱구 2008. 3. 21.

먼저 이글은 http://zine.standardmag.org/200802/20 와 같은 내용임을 알려 드리며 다시한번 테스트 해본 결과입니다.

크로스브라우징으로 인해 시간낭비 및 생각하지 않던 것들때문에 야근을 하는 경우가 종종 발생하죠. 참 안타까운 현실입니다.
알려진 크로스브라우징 팁 가운데 DTD의 선택도 중요한 부분을 차지 하고 있다는건 여러 글들을 통해 접했으리라 생각합니다.
그래서 DTD에 따른 박스크기 변화를 다시한번 테스트해 보았습니다.

테스트 박스는 공통적으로 width = 150px / height = 100px / padding = 30px / border = 3px 값을 주었을때 입니다.

먼저 DTD를 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 로 했을 경우에 결과입니다.
소스는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

<body>
<div id="wrap">테스트 크로스 브라우징</div>
</body>
</html>


사용자 삽입 이미지
보시는 바와 같이 파이어폭스를 제외한 IE6 / 7 은 지정한 가로/세로 값으로 보여지며 border 과 padding 값을 포함하고 있는 반면 파이어폭스는 지정한 가로/세로 값에서 border 값과 padding 값이 추가된 사이즈로 박스가 보여집니다.


다음은 DTD 가 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 로 했을 경우 입니다.

소스는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

<body>
<div id="wrap">테스트 크로스 브라우징</div>
</body>
</html>


사용자 삽입 이미지
이처럼 DTD에 따라 각 브라우저 별로 다르게 보임을 알수 있습니다.

오페라와 사파리(3.1) 역시 파폭과 동일하게 DTD와 관계없이  padding 값과  border 값만큼 지정한 박스보다  커짐을 알수 있었습니다.

사용자 삽입 이미지
사용자 삽입 이미지
역시 IE만 혼자 노는걸 알수 있군요.. 참고 되셨으면 좋겠네요..^^