[HTML5] block과 inline level 요소들

css에서 display 속성을 사용할 때 우리는 사용하는 tag가 block-lever인지 inline-level인지를 구분할 필요가 있다. 두 요소의 특징을 살펴보면 block요소는 한 라인을 전부 차지한다. 따라서 내용이 많지 않은 block요소라도 한 라인을 전부 차지하고 복수개의 block을 사용하면 옆에 위치할 수 없기 때문에 위 아래로 배치된다.

이에 반해 inline요소는 내용의 크기만큼만 자리를 차지하고 같은 라인이지만 옆에 자리가 남는다면 옆에 위치하게 된다.

다음 포스트에서 설명할 예정이지만 이런 특징 때문에 block요소의 tag지만 inline요소처럼 배치하고 싶을 때는 inline-block속성을 사용하게 되는 것이다.

다음은 block 속성의 tag와 inline속성의 tag를 정리한 것이다.

block 속성 tag	inline 속성 tag
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>	<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>