블록 레벨 인라인 레벨 요소

| 블록 레벨 요소 및 인라인 레벨 요소(Block Level Element)

 

블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻합니다. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄넘김이 됩니다.

 

블록 레벨은 다음과 같은 특징이 있습니다. 

 

• margin, width, height 속성을 정의하면 모두 적용됩니다. 이런 특성 때문에 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용할 수 있습니다.

 

| 인라인 레벨 요소(Inline Level Element)

 

인라인 레벨(inline-level) : 줄을 차지하지 않는 요소입니다. 브라우저같은 화면에 표시되는 컨텐츠만큼 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다. 따라서 한 줄에 여러 개의 인라인 레벨 요소를 표시하는 것이 가능합니다.

 

인라인 레벨은 다음과 같은 특징이 있습니다.

 

• 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않습니다. 상, 하 여백은 margin이 아니라 line-height 속성에 의해 발생됩니다.
• 너비(width)와 높이(height) 속성이 적용되지 않습니다. 인라인 요소의 너비 및 높이는 태그가 품고 있는 내부 요소 부피에 맞춰집니다.
• 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우 최소한의 간격을 유지하기 위해 좌, 우에 약 5px 가량의 외부 여백이 자동으로 발생합니다.

 

<pre" class="brush:css">

 

다음은 블록 레벨, 인라인 레벨인 태그들의 목록입니다.</pre">

 

블록 레벨	<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨	<a>, <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>