HTML inline(인라인) vs block(블록) 요소

HTML의 태그 요소는 HTML5 이전에 inline(인라인) 요소와 block(블록) 요소로 구분 되어왔다.

 

HTML5에 들어서는 태그들을 단순히 인라인, 블록으로 구분하는 것이 아닌

Contents Model(컨텐츠 모델)로 각 태그별 사용되는 역할에 따라 분류를 한다.

 

Contents Model(컨텐츠 모델)에 대해 알아보기 전 인라인, 블록 요소들의 구분은

어떻게 지을 수 있는지에 대해 알아보려고 한다.

 

 

1. 인라인 요소 (inline element)

- 인라인 요소는 다른 인라인 요소를 포함할 수 있다

<span>
	Hello <storng>World</strong>   (o)
</span>

- 인라인 요소는 다른 블록 요소를 포함할 수 없다.

<span>
	Hellow <p>World</p>   (x)
</span>

- 인라인 요소는 너비나 높이 값을 줄 수 없다. (width, height)

- 대표적인 태그로는 <span>, <a>, <strong>, <em> 태그 등이 있다.

- 그 외의 인라인 태그 : abbr, acronym, b, bdo, big, br, button, cite, code, dfn, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, sub, sup, textarea, tt, var

 

2. 블록 요소 (block element)

- 블록 요소는 인라인 요소와 다른 일부 블록요소를 포함할 수 있다.

<div>
   <p>Hello</p>
   <strong>World</strong>
</div>

- 예외의 상황으로 <p> 태그에는 또 다른 <p>태그 뿐만 아니라 다른 블록 요소들이 들어갈 수 없다.

<p>
   <div>Hello</div>   (x)
   <strong>World</strong>   (o)
</p>

- 블록 요소는 너비나 높이 값을 줄 수 있다.

- 대표적인 태그로는 <div>, <p>, <h1~h6>, <ul> 등의 태그가 있다.

- 그 외의 블록 태그 : address, article, aside, audio, blockquote, canvas, dt, dd, dl, fieldset, figcaption, figure, footer, form, header, hgroup, hr, noscript, ol, li, output, pre, section, table, video

 

 

3. 인라인 요소와 블록 요소가 차지하는 영역

인라인 요소와 블록 요소의 영역이 어떻게 잡히는지에 대한 이미지

<div>
   <span>inline</span>
   <span>inline</span>
   <span>inline</span>
</div>

<div>
   <div>block</div>
   <div>block</div>
   <div>block</div>
</div>

위의 이미지 및 소스와 같이 인라인 요소는 태그별로 영역이 나란히 나열된다.

 

그 반대로 블록 요소의 경우 각 요소별로 너비를 100%씩 차지하여 아래로 떨어지면서 나열되게 된다.