BoxModel
CSS에서의 모든 요소는 하나의 박스(box)로 생각해 볼 수 있습니다.
Boxmodel 이라는 말은 주로 layout이나 디자인 할때 주로 고려됩니다..
CSS에서 Boxmodel은 어떤 HTML 요소로 감싸진 하나의 박스를 말합니다. (ex, <div>..</div>)
그 HTML 요소는 margin, border, padding 과 내용(content)으로 구성됩니다.
이러한 Boxmodel은 HTML요소 주변에 선을 그을 수도 있고 공간이나 여백을 채워넣을 수가 있어서
우리가 웹페이지를 디자인 할때 도움을 줍니다.
아래 이미지는 Boxmodel을 그림으로 표현한 것입니다.
Margin - 경계선(border) 바깥쪽에 여백을 줄때 사용합니다.
Border - 경계선입니다.
Padding - 경계선(border) 안쪽부터 내용까지의 사이에 여백을 줄때 사용합니다.
Content - Text나 이미지를 넣을 수 있습니다.
모든 브라우저에서 정확한 Width와 Height를 지정하기 위해서는 Boxmodel이 어떻게 작동하는지를 알아야 합니다.
CSS에서 정확한 너비와 높이를 정하기 위해서는 먼저 "Content 영역"의 너비와 높이를 지정합니다.
또한 어떤 HTML요소의 정확한 Full-size를 구하기 위해서는 padding, border, margin을 더해 줘야 합니다.
※ 계산방법 ※
HTML요소의 총너비=Content의 Width+왼Padding+오른Padding+왼border+오른border+왼margin+오른margin
HTML요소의 총높이=Content의 Height+위Padding+아래Padding+위border+아래border+위margin+아래 margin
※ IE8과 이전 버전의 IE에서는 Padding과 Border가 Width 속성에 포함되어 있습니다.
이문제를 해결하려면 HTML페이지에 <!DOCTYPE html>을 넣어주면 됩니다.
계산예제
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 3px;
}
※ Div총너비=320+20(왼+오른 padding)+10(왼+오른border)+6(왼+오른margin)=356px
BoxModel 예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #cbab82;
width: 450px;
margin: 30px;
border: 15px solid #E05A57;
padding: 30px;
text-align:center;
}
</style>
</head>
<body>
<div>
- 광야 - <br/>
이육사 (1904-1944)<br/>
<br/>
까마득한 날에<br/>
하늘이 처음 열리고<br/>
어디 닭 우는 소리 들렸으랴<br/>
<br/>
모든 산맥들이<br/>
바다를 연모해 휘달릴 때도<br/>
차마 이곳을 범하진 못하였으리라<br/>
<br/>
끊임없는 광음(光陰)을<br/>
부지런한 계절이 피어선 지고<br/>
큰 강물이 비로소 길을 열었다<br/>
<br/>
지금 눈 내리고<br/>
매화 향기 홀로 아득하니<br/>
내 여기 가난한 노래의 씨를 뿌려라<br/>
다시 천고(千古)의 뒤에<br/>
백마 타고 오는 초인이 있어<br/>
이 광야에서 목놓아 부르게 하리라<br/>
</div>
</body>
</html>
결과
이육사 (1904-1944)
까마득한 날에
하늘이 처음 열리고
어디 닭 우는 소리 들렸으랴
모든 산맥들이
바다를 연모해 휘달릴 때도
차마 이곳을 범하진 못하였으리라
끊임없는 광음(光陰)을
부지런한 계절이 피어선 지고
큰 강물이 비로소 길을 열었다
지금 눈 내리고
매화 향기 홀로 아득하니
내 여기 가난한 노래의 씨를 뿌려라
다시 천고(千古)의 뒤에
백마 타고 오는 초인이 있어
이 광야에서 목놓아 부르게 하리라
즐거운 하루 되세요.
