Box 모델
• CSS에서 Box Model 이라는 용어는 하나의 블록 레벨 요소에게 할당 되는 영역을 설명하는 모델입니다.
Box Model은 근본적으로 HTML 요소등을 감싸고 있는 영역을 의미 하고 margin, border, padding, Content로 이루어 져 있습니다.
(블록레벨 요소 와 인라인 레벨 요소에 대한 설명을 (링크)HTML 블록 요소와 인라인 요소를 통해 알수 있습니다.)
• 만약 Content의 width값을 200px이라고 하고 margin, border, padding값을 각각 10px씩 가진다면 박스의 크기는 260px의 가지게 됩니다.(※ 높이(heigth) 또한 공식이 적용 됩니다.)
width:200 + margin-left:10 + margin-right:10+ border-left:10 + border-right:10 + padding-left:10 + padding-right:10 = "260"
|
• 하나의 박스 모델은 독립적은 영역을 가지게 됩니다.
