block level 요소와 inline level 요소

block level 요소

한개의 독립된 덩어리로 자신의 컨텐츠 길이에 상관없이 화면의 가로 폭 전체를 차지하는 요소들을 말한다. 화면의 가로 폭 전체를 차지하기 때문에 block level 요소들은 세로로 배치가 된다.

• 대표적인 block level 요소: <article>, <header>, <section>, <div>, etc...

block level 요소는 가로 폭 전체를 차지하기 때문에 <div>, <article>, <section>의 배경색이 화면 가로폭 전체를 차지하고 세로로 정렬되는 것을 확인할 수 있다.

• 특징
  1. width, height, margin, padding 속성을 통해 크기 조절이 가능하다.
  2. block, inline요소를 포함가능하다.

inline level 요소

컨텐츠 자신의 크기 만큼 영역을 가지는 요소를 말한다. 일반적으로 인라인 요소들은 인라인 요소만 중첩이 가능하고 정렬을 할때 text-align의 영향을 받는다.

• 대표적인 inline level 요소: <span>, <strong>, <a>, <input>, <button>, etc..

inline level 요소는 컨텐츠 자신의 크기 만큼 영역을 가지기 때문에<span>, <a>, <button>의 배경색이 컨텐츠 자신의 크기 만큼 변경되고 기본적으로 가로 정렬이 되는 것을 확인 가능하다. div.wrap의 자식으로 존재하는 <span>, <a>, <button>의 경우 text-align:center 속성에 따라 해당 요소들이 div.wrap 영역에 중앙 정렬 되는 것을 확인할 수 있다. (📌inline level 요소 내부의 컨텐츠들이 중앙 정렬된 것은 아니다.)

• 특징

  1. 항상 block level 요소 안에 포함되어 있고, inline 요소가 다른 inline 요소를 포함하는 것이 가능하다.
     (📌 inline level 요소가 block level 요소를 포함하는 것은 불가능)

  2. 컨텐츠의 크기 만큼 영역을 가지기 때문에 임의로 width, height를 지정해 크기 조절이 불가능하다.(📌 margin(좌우만), padding 속성은 사용 가능하고,line-height 속성을 통해 줄의 높낮이 조절은 가능하다.)
     

inline-block 요소

inline level block의 특성(컨텐츠의 크기만큼 영역을 차지해서 가로로 배치)과 block level 요소의 특성(width, height를 지정해 크기 조절 가능)을 합친 요소로 display:inline-block을 통해 지정이 가능하다.

div.two와 div.three가 inline-block 요소가 되어 width, height를 지정해 크기 조절 가능하고 가로로 배치되는 것을 확인 가능하다.