CSS 박스 모델에 대해

CSS 에서 가장 중요한 개념 중 하나가 박스모델입니다. 박스모델의 개념을 이해함으로써 각각의 엘리먼트를 문서에 배치하는 원리를 알 수 있기 때문입니다. 그리고 이를 응용하여 전체 레이아웃을 정의할 수도 있고, 콘텐츠를 디자인할 수도 있기 때문에 CSS를 통한 디자인을 하려면 박스모델을 이해하는 것이 필수라고 할 수 있습니다. 우선… 첫번째로 이해해야 할 명제는 “모든 엘리먼트, 태그는 박스 모델이다” 라는 것입니다. <br>, <b> 같은 표현을 위한 태그를 제외하면, 자주 사용하는 <div>, <span>, <table>, <p> 등의 태그들은 기본적으로 사각형(박스) 형태로 되어 있습니다. 두번째는 “contents, padding, border, margin” 입니다. 모든 박스모델은 이러한 속성을 가지고 있고 이 순서대로...