한개의 독립된 덩어리로 자신의 컨텐츠 길이에 상관없이 화면의 가로 폭 전체를 차지하는 요소들을 말한다. 화면의 가로 폭 전체를 차지하기 때문에 block level 요소들은 세로로 배치가 된다.
<article>
, <header>
, <section>
, <div>
, etc...block level 요소는 가로 폭 전체를 차지하기 때문에
<div>
,<article>
,<section>
의 배경색이 화면 가로폭 전체를 차지하고 세로로 정렬되는 것을 확인할 수 있다.
width
, height
, margin
, padding
속성을 통해 크기 조절이 가능하다.컨텐츠 자신의 크기 만큼 영역을 가지는 요소를 말한다. 일반적으로 인라인 요소들은 인라인 요소만 중첩이 가능하고 정렬을 할때
text-align
의 영향을 받는다.
<span>
, <strong>
, <a>
, <input>
, <button>
, etc..inline level 요소는 컨텐츠 자신의 크기 만큼 영역을 가지기 때문에
<span>
,<a>
,<button>
의 배경색이 컨텐츠 자신의 크기 만큼 변경되고 기본적으로 가로 정렬이 되는 것을 확인 가능하다.div.wrap
의 자식으로 존재하는<span>
,<a>
,<button>
의 경우text-align:center
속성에 따라 해당 요소들이div.wrap
영역에 중앙 정렬 되는 것을 확인할 수 있다. (📌inline level 요소 내부의 컨텐츠들이 중앙 정렬된 것은 아니다.)
특징
항상 block level 요소 안에 포함되어 있고, inline 요소가 다른 inline 요소를 포함하는 것이 가능하다.
(📌 inline level 요소가 block level 요소를 포함하는 것은 불가능)
컨텐츠의 크기 만큼 영역을 가지기 때문에 임의로 width
, height
를 지정해 크기 조절이 불가능하다.(📌 margin
(좌우만), padding
속성은 사용 가능하고,line-height
속성을 통해 줄의 높낮이 조절은 가능하다.)
inline level block의 특성(컨텐츠의 크기만큼 영역을 차지해서 가로로 배치)과 block level 요소의 특성(
width
,height
를 지정해 크기 조절 가능)을 합친 요소로display:inline-block
을 통해 지정이 가능하다.
div.two
와div.three
가 inline-block 요소가 되어width
,height
를 지정해 크기 조절 가능하고 가로로 배치되는 것을 확인 가능하다.