1. boxmodel
css에서는 모든 요소를 하나의 박스라고 할 수 있습니다. boxmodel이라는 말은 주로 layout 또는 디자인 할때 주로 고려되고 있습니다.
css에서 boxmodel은 어떠한 html요소로 감싸여진 하나의 박스를 말합니다. <div></div>
html요소는 margin,padding,border와 내용으로 구성되어집니다. 이러한 boxmodel은 html요소 주변에 서능 긋거나 공간, 여백을 채워서 넣을 수가 있기에 일상 웹페이지를 작업할때 많은 도움이 됩니다.
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; }
|
boxmodel의 예제
|
<!DOCTYPE html> <html> <head> <style> div { background-color: #a74219; width: 270px; margin: 28px; border: 13px solid #E42A37; padding: 20px; text-align:center; } </style> </head> <body>
학교종이 <br/>
<br/>학교종이 땡땡땡 <br/> 어서모이자<br/> 선생님이 우리를<br/> 기다리신다<br/> </div> </body> </html>
|
'IT > CSS' 카테고리의 다른 글
| css를 활용한 라운드 박스 및 박스 속성 (0) | 2015.03.31 |
|---|---|
| CSS에서 opacity(투명도)와 shadow(그림자) 생성하기 (1) | 2015.03.26 |
| box-sizing에 대해 알아봅시다. (0) | 2015.03.13 |
| 배경 설정하기 (0) | 2015.03.12 |
| 링크와 표를 꾸미기 (0) | 2015.03.11 |