[HTML/CSS] CSS의 박스모델링
[HTML/CSS] CSS의 박스모델링
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
모든 요소는 하나의 박스(Box)로 생각 할 수 있습니다. 큰 박스, 작은 박스 등을 쌓아올려 보기좋게 레이아웃을 구성할 수 있으며 블로그 및 홈페이지를 제작할때 확실히 이해를 하고 있어야 합니다. |
|
|
|
|
|
박스모델을 한장의 이미지로 가장 쉽게 설명한 것인데 흔히 우리가 표현하고자 하는 내용이 녹색 부분의 "Element Content"가 되는것이며 테두리(Border)를 기준으로 안쪽여백은 "Padding" 바깥여백은 "Margin"이라고 하며 이것들을 통째로 박스모델이라고 표현해요. * Content - 텍스트나 이미지가 들어가는 요소 * Padding - 테두리와 Content사이의 여백, 안쪽여백 * Border - 테두리(경계선) * Margin - 바깥여백 |
|
background-color등의 속성들을 부여 할때는 테두리(경계선) 안까지만 지정이 됩니다. 한마디로 "Margin"은 집의 담벼락, 울타리 같은 개념으로 생각 할 수 있으며, "Padding"은 집 안의 공간, "Border"는 집의 벽면 이라고 생각하면 이해하기 쉽습니다. 또한 HTML요소의 정확한 크기를 구하기 위해서는 여백까지 모두 더해줘야 합니다. 예) DIV=200(width)+10(왼쪽padding)+10(오른쪽padding)+10(왼쪽border)+10(오른쪽border)+10(왼쪽margin)+10(오른쪽margin)=총 260px |
< 연습하기 >
