CSS를 시작할 때 가장 골치아픈 부분이 박스모델일 겁니다.
그나마!! Internet Explorer 8 이 나오고 나서는 좀 나아졌습니다.
IE6 퇴출 운동과, Firefox와 Chrome의 점유율 확대, 그리고 아이폰과 아이패드로 인한 Safari의 급성장이 웹 프로그래머들을 약간 혼란스럽게 하지만~ 박스모델 부분에 있어서는 좋은 방향으로 변하고 있는 것 같습니다.
1. 박스모델이 뭔데 그러죠?
웹 프로그래밍 하면서 CSS로 너비, 여백, 테두리 등을 픽셀로 지정하는 방법의 차이 때문에 브라우저마다 다르게 보이는 문제가 있습니다.
브라우저가 얼마나 많은지... IE6, IE7, IE8, FF, Chrome, Safari, Opera.... etc.
여기에 DOCTYPE 을 어떻게 지정하느냐에 따라서, 'Quirks' 모드와 'Standard'모드로 렌더링을 하게 됩니다.
그런데 이 조합이 또 다양합니다~
크로스 브라우징의 세계는 어찌 이리도 복잡한지...
바깥여백(Margin)
테두리(Border)
안여백(Padding)
내용(Contents)
2. Quirks 모드
DOCTYPE을 지정하지 않거나, 'HTML 4.01 Transitional'보다 낮은 타입을 사용할 경우 몇몇 브라우저에서 Quirks 모드로 작동합니다.
이 모드에서는 바깥여백을 제외한 부분이 'Width'와 'Height'가 됩니다.
Width = BorderLeft + BorderRight + PaddingLeft + PaddingRight + ContentsWidth
width:220px;
padding:5px;
border:3px solid #333;
margin:10px;
이런 경우에는 내용(Contents)의 너비는 204px이 됩니다.
padding:5px;
border:3px solid #333;
margin:10px;
이런 경우에는 내용(Contents)의 너비는 204px이 됩니다.
3. Standard 모드
이제 다들 이 모드를 썼으면 합니다. DOCTYPE만 잘 지정해 주면 됩니다~
이 모드에서는 내용(Contents) 부분만 'Width'와 'Height'가 됩니다.
Width = ContentsWidth
width:220px;
padding:5px;
border:3px solid #333;
margin:10px;
이런 경우에는 내용(Contents)의 너비는 220px이 됩니다.
padding:5px;
border:3px solid #333;
margin:10px;
이런 경우에는 내용(Contents)의 너비는 220px이 됩니다.
4. 그래서 DOCTYPE은 뭘 쓸까요?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
보통 이정도 모드를 사용하는 것 같습니다."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
전 Strict 모드를 쓰려고 합니다."http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
