박스모델의 이해

박스 모델의 이해

단락이나 제목을 생각할때는 아마 글자, 단어, 문장에 대해서 생각할 것이다. 그리고 <img> 태그를 생각하면 동시에 사진, 로고, 혹은 그밖의 여러 사진이 떠오를 것이다. 그러나 웹브라우저는 모든 태그를 하나의 박스로 취급한다. 브라우저 입장에서 보면, 모든 태그는 그안에 텍스트, 이미지 등을 포함하는 여느 태그처럼 무언가를 포함한 박스이다.

내용을 둘러싸는 것은 박스를 만드는 다른 여러 프로퍼티다.

• Padding(내부공백) 은 내용과 테두리 사이의 공간이다. Padding 은 사진과 사진의 틀을 이루는 테두리를 분리시켜주는 매개 영역이다.
• Border(테두리)는 박스의 각 변둘레에 그려지는 선이다. 네변 전체에 border를 넣을수도 있고, 한면에만 혹은 각면의 조합 전체에 border 를 넣을 수 있다.
• Background-color 는 padding 영역을 포함한 border 안쪽 공간을 채운다
• Margin(여백) 은 하나의 태그를 다른 태그와 분리 시켜주는 공간이다. 예를 들면, 주로 웹페이지 텍스트 단락의 상단과 하단 사이에 넣는 그 공간이 margin이다

주어진 태그에 대해서 여러프로퍼티를 아무렇게나 조합해서 사용할수 있다. 태그의 margin 만을 지정할 수도 있고, 아니면 border ,margin, padding 을 전부 지정할수도 있다.혹은 border 와 margin 만 넣고 padding 은 지정하지 않을수도 있다. 만약 이 프로퍼티들 중 어느것도 조절하지 않는다면, 좋든 싫든 브라우저 기본설정대로 될것이다. 예를 들어 , 브라우저는 보통 페이지의 모든 태그에 padding 이나 border 를 적용하지 않는 반면에, 머리글자나 단락같은 일부태그에는 기본적으로 상하 margin 이 할당된다.