윈컴이의 컴퓨터 이야기

CSS 기초 강좌 - 7강. CSS Box Model(박스모델)이란? 본문

프로그래밍/웹 개발

CSS 기초 강좌 - 7강. CSS Box Model(박스모델)이란?

윈컴이 2012.01.07 21:24

출처 : http://www.w3schools.com/css/css_boxmodel.asp 

모든 HTML 요소는 박스로 생각하면 됩니다. CSS에서디자인과 레이아웃 얘기를 할 때, 용어 '박스 모델"이 사용됩니다. 박스 모델은 우리가 다른 요소와 관련 요소와 공간 요소 주위에 테두리를 삽입하실 수 있습니다.

아래의 이미지는 상자 모델을 보여줍니다



Width(너비)와 Height(높이)는 어떻게 정해질까?

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
이렇게 CSS가 되어있다고 생각해보면, 너비는 아래와 같이 됩니다.
250px (너비)
+ 20px (왼쪽, 오른쪽 패딩)
+ 10px (왼쪽, 오른쪽 테두리)
+ 20px (왼쪽, 오른쪽 여백)
= 300px 
즉, 너비가 완전한 너비가 아니고, 너비 + 패딩 + 테두리 + 여백(마진)을 붙여야지 보여지는 너비가 완성됩니다.

그러면, 높이는 얼마일까요? 같습니다.
높이 + 패딩 + 테두리 + 여백을 하시면 됩니다. 간단하죠?

골치덩어리 IE에서는...

출처 http://www.cyworld.com/be2u/195315

골치덩어리 IE에서는 이것 초차 다르게 나옵니다.
IE에서는 너비를 너비만으로 계산하더라고요. 그래도 간단하게 해결 할 수 있습니다.
XHTML1.0 Transitional로 정의하면 됩니다.

예제)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
~~~
</html> 


신고