06. HTML 블록(Block)요소와 인라인(Inline)요소

○ 블록(block) 요소 / 블록 레벨 태그

    - 특정영역에 대해서 블럭을 지정

    - 내용의 크기와 상관없이 정해진 크기를 가지고 있음

    - <div> </div>, <blockquote> </blockquote>, <pre> </pre> 등

 

○인라인(inline) 요소 / 인라인 레벨 태그

    - 내용의 크기가 곧 영역의 크기

    - <strong> </strong>, <span> </span>, <h1> </h1> 등

 

○ 블록 요소와 인라인 요소의 크기 비교

    - 블록 요소는 텍스트 내용의 길이와 상관없이 정해진 영역 모두 자신의 영역 (한 줄의 배경색이 모두 변함) 

    - 인라인 요소는 텍스트 내용의 길이가 곧 자신의 영역 (텍스트 부분만 배경색이 변함)

<div style="background-color: burlywood;">블록요소 DIV</div>
<blockquote style="background-color: aquamarine;">블록요소 BLOCKQUOTE</blockquote>
<pre style="background-color: coral;">블록요소 PRE</pre>

<strong style="background-color: darkkhaki;">인라인요소 STRONG</strong>
<span style="background-color: red;">인라인요소 SPAN</span>

블록요소 DIV

블록요소 BLOCKQUOTE

블록요소 PRE

인라인요소 STRONG 인라인요소 SPAN