6.3.5 박스 모델의 성격과 display 속성

앞에서 살펴봤듯이 HTML의 모든 태그는 박스 모델을 가지고 있습니다. 그런데 이를 자세히 들여다보면 박스 모델도 블록, 인라인, 인라인 블록이라는 서로 다른 성격이 존재합니다.

● 블록 성격

블록 성격은 hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다 차지하는 것을 말합니다. 그래서 hn, p, div 태그를 여러 번 사용하면 무조건 줄 바꿈됩니다.

● 인라인 성격

인라인 성격은 a, span, strong 태그를 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 성격을 말합니다. 그래서 a, span, strong 태그를 여러 번 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치됩니다.

● 인라인 블록 성격

인라인 블록 성격은 인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적인 성격을 말합니다. 그래서 img 태그를 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치됩니다.