[비전공자를 위한 HTML/CSS] (13) BLOCK & INLINE LEVEL

Block level 요소 : 한 줄에 하나의 요소 표시. 부모 요소의 가로 영역에 맞게 가득 채워져 표현됨. 양 옆에 다른 요소 올수 없으므로 자동 개행. 대표적으로 <div>, <h1-6>, <p>, <ul>, <li>, <table> 등이 있다.

블록레벨 요소는 일반적인 모든요소(블록, 인라인 레벨 등)을 다 포함할 수 있다.

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

<div>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
</div>

 

block-level

 

 

Inline level 요소 : 하나의 라인에 자신의 내용만큼의 박스를 만드는 요소. 개행 없이 자신의 위치에 자리한다. 대표적으로 <span>, <i>, <img>, <em>, <strong>, <a> 등이 있다.

<span>
  <i>a</i>
  <i>b</i>
  <i>c</i>
</span>
<span>
  <i>A</i>
  <i>B</i>
  <i>C</i>
</span>

Inline-level

 

 

block-level요소는 inline-level요소를 자식 요소로  가질 수 있으나, inline-level 요소는 block-level을 자식요소로 가질 수 없다.

 

HTML5에서 <a>는 예외적으로 inline-level 요소지만 block-level요소를 자식 요소로 가질 수 있다.