[HTML+CSS] 블록과 인라인

블록레벨(Block-level)

태그를 삽입하여 요소를 삽입했을 때 혼자 한 줄(블럭)을 차지하는 요소

예) hn, div, p 등

 

 

인라인레벨(Inline-level)

한 줄을 차지하지 않고 자신의 공간만큼만 차지하는 요소, 박스모델의 너비와 높이를 지정 못함

예) span, img, strong

 

 

 

예시

대표적인 블록 레벨인 div와 인라인 레벨인 span을 사용하였고, 둘다 폰트색깔은 흰색에 배경색은 파랑으로 설정하였다.

그러자 블록레벨인 div는 배경색이 한줄을 차지하지만, 인라인레벨인 span은 자신의 공간만큼만 배경색이 적용되었다.

 

 

 

 

블록 레벨인 div에 강제로 인라인을 적용시켜보았다. 스타일에 display: inline;을 집어넣어 보면

인라인 모델처럼 배경색이 div의 공간만큼만 적용되는걸 확인할 수 있다.