모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다.
표시 값에는block
과inline
두 가지가 있습니다.
block
과inline
이 대부분의 엘리먼트 기본값.
inline elements는 새 줄에서 시작하지 않습니다.
inline elements는 필요한 만큼만 너비를 차지합니다.
이것은 단락 내부의span
요소 입니다.
block-level elements는 항상 새 줄에서 시작합니다.
block-level elements는 항상 사용 가능한 전체 너비를 차지합니다(최대한 왼쪽과 오른쪽으로 늘어남).
block-level elements에는 위쪽 여백과 아래쪽 여백이 있지만 inline-elements에는 없습니다.
div
요소는 block-level element입니다.
div
는 Block-level Element.span
은 Inline Element.
div
와 span
에 크기를 지정하였습니다.
block-level element인 div
는 지정한 크기만큼 내용이 없어도 block
으로 출력이 되었지만, inline-element인 span
은 내용물 1,2,3만큼만 inline
으로 출력되었습니다.
display
속성 바꿔보기
위 그림을 보면 div
가 출력되지 않습니다. div
를 display: inline;
으로 설정하여, 내용물이 없으면 출력되지 않는 inline-elements로 바꾸었기 때문입니다.
div
태그에 1, 2, 3 내용물을 넣어서 그 만큼만 출력되는 것을 확인할 수 있습니다.
display: inline-block;
display: inline
에 비해,display: inline-block
의 가장 큰 차이점은width
와height
를 할당할 수 있다는 것입니다.
또한,display: inline-block
에서는margin
,padding
값을 할당할 수 있습니다.
display: block
과 비교할 때 가장 큰 차이점은 줄 바꿈을 하지 않고 나란히 배치할 수 있습니다.
div
에 display: inline-block;
으로 설정하여 나란히 배치 하였습니다.
페이지 창을 늘리면 그에 따라 일렬로 나란히 배치됩니다.
span
을 block
으로 만들기
마지막으로 span
에 내용물이 없는데도 불구하고, display: block;
으로 설정하여 파란색 네모가 출력되게 만들었습니다.