HTML element 를 크게 2가지로 구분해보면 head element 처럼 화면에 표시되지 않은 element가 있고 div, p, table...과 같은 element 처럼 화면에 표시되는 element로 나눌 수 있습니다.
그릭 화면에 표시되는 element를 다시 두 가지로 분류하면 block-level과 inline-level로 구분할 수 있습니다.
- 화면에 표시되지 않는 element
- 화면에 표시되는 element
block-level과 inline-level의 구분
block-level과 inline-level을 가장 쉽게 구분할 수 있는 방법은 한 라인에 복수로 올 수 있나의 여부입니다.
block-level element는 한 라인에 하나만 위치할 수 있습니다. 반대로 inline-level element는 한 라인에 2개 이상 올 수가 있죠.
div(block-level element)와 span(inline-level element) element를 사용해 보면 이 차이를 확실하게 느낄 수 있습니다.
<div style="border:1px gray solid;">block-level element</div>
<div style="border:1px gray solid;">block-level element</div> |
위와 같이 block-level element인 div element를 연속으로 2개를 넣으면 각각 한라인을 차지하게 됩니다.
반면 inline-level element는 한줄에 옆으로 여러개가 위치할 수 있습니다.
<span style="border:1px gray solid;">inline-level element</span>
<span style="border:1px gray solid;">inline-level element</span> |
물론 block-level element가 한줄을 다 차지한다고 하더라도 자신을 포함한 element가 허용하는 한도내에서 차지합니다. 만일 테이블의 셀안에 넣어버리면 그 셀의 크기가 허용하는 범위내에서 width를 차지하게 됩니다.
<table width="400">
<tr>
<td><div style="border:1px gray solid;">block-level element</div></td>
<td><div style="border:1px gray solid;">block-level element</div></td>
</tr>
</table> |
기타 다른 차이점은, block-level element는 inline-level element를 포함할 수 있지만 반대의 경우는 불가능합니다.
다소 개념적인 부분이라서 쉽게 이해하기 힘들 수도 있지만 block-level과 inline-level의 차이를 확실하게 알고 있어야 CSS를 전문적으로 사용할 수 있습니다.
block-level elements
- p
- h1~h6
- ul
- ol
- pre
- dl
- div
- noscript
- blockquote
- form
- hr
- table
- fieldset
- address
inline-level elements
- samp
- kbd
- var
- cite
- abbr
- acronym
- a
- img
- object
- br
- script
- map
- q
- sub
- sup
- span
- bdo
- input
- select
- textarea
- label
- button
