[CSS] Chapter 08. BOX 모델

1. 개요

 

F12를 누르면 확인할 수 있는 Box 모델

 

BOX 모델은 html 문서에서 구현되는 정보의 기본 형태를 정의하는 것으로, 가시적으로 구현되는 태그는 모두 BOX 모델을 기준으로 모양이 구성된다.

 

content는 해당 태그에 담기는 데이터를 말하며 실제 눈으로 구현되는 정보이다.

padding은 데이터와 테두리 사이의 여백을 말한다.

border는 해당 태그가 가지는 테두리를 말한다.

margin 은 태그끼리의 거리를 말한다. 

 

2. BOX 모델의 중요성 

BOX모델의 중요한 점은 태그가 가진 영역의 간격과 정보를 각각 조정할 수 있다는 것이다.

Style을 통해 id, class, tag 등 원하는 항목에 BOX 모델의 영역을 지정할 수 있다.

때문에 기본적으로 가지고 있는 영역값을 각각 지정하여 모양을 구현할 수 있고, p 태그가 아닌 text지만 BOX 모델 안에 있는 값을 지정하여 p 태그 모양으로도 변경하는 것이 가능하다.

 

3. BOX 모델과 <div></div>

html에서 가장 많이 사용하는 태그인 div는 아무 모양이 없이 공간만을 구획한다.

이러한 자유로움으로 인해 BOX 모델로 div의 공간을 계획하고 구현하는 것은, 개발자가 원하는 모양을 충분히 구현할 수 있다는 것이다.

때문에 기본적인 .BOX 모델의 개념과 div의 사용을 반드시 숙지하고 사용할 필요가 있다.

 

4. BOX 모델 공간의 정의

4.1. 전체 너비

width + left padding + right padding + left border + right border + left margin + right margin

 

4.2. 전체 높이

height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

 

5. margin의 중첩

margin은 태그와 태그 사이의 공간을 의미하는데, margin의 특성은 ‘태그 사이의 margin’이 서로 중첩된다는 것이다.

위와 아래의 태그가 서로 다른 margin을 가지고 있다면 더 큰 쪽으로 포함되어 화면이 구현된다.

이 특성이 중요한 점은 특정 태그의 margin을 증가시키거나 감소시킬때 화면에 적용되지 않는다면, 상위 혹은 아래에 더큰 margin 값의 문제라는 점이다.

 

6. 전체 선택자: *{}

해당 *{} 선택자는 style 안에서 지정할 경우, body와 body에 포함된 모든 tag에 설정한 효과를 구현한다.

표, 목록에 관계없이 적용되기 때문에 전체적으로 지정하고 싶은 color나 폰트를 지정할 때 용이하다.

중요한 점은 Box 모델에 근거하여 각 값을 초기화 시키면 원하는 모양을 수준 높고 세세하게 지정할 수 있다는 점이다.