본문 바로가기

디자인/CSS 강좌

CSS 기초강좌 10 (Box Model)

반응형

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)

까마득한 날에
하늘이 처음 열리고
어디 닭 우는 소리 들렸으랴

모든 산맥들이
바다를 연모해 휘달릴 때도
차마 이곳을 범하진 못하였으리라

끊임없는 광음(光陰)을
부지런한 계절이 피어선 지고
큰 강물이 비로소 길을 열었다

지금 눈 내리고
매화 향기 홀로 아득하니
내 여기 가난한 노래의 씨를 뿌려라
다시 천고(千古)의 뒤에
백마 타고 오는 초인이 있어
이 광야에서 목놓아 부르게 하리라

즐거운 하루 되세요.

반응형