티스토리 뷰
출처 : 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에서는...
골치덩어리 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>
최근에 올라온 글
최근에 달린 댓글
글 보관함
- Total
- Today
- Yesterday