비전공자를 위한 HTML/CSS-블록&인라인

블록 레벨 요소

부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다.

양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다.

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

" div, h1~h6, p, ul, li, table ..."

 

인라인 레벨 요소

하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다.

라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다.

인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다.

즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없습니다. 

" span, i, img, em, strong, a ..." 

다만, HTML5 버전에서 생겨난 한가지 예외 경우가 있는데 <a>는 인라인 레벨 요소지만

자손으로 블록 레벨 요소를 가질 수 있습니다.

 

---

 

참고자료

 

 

Block-level elements

https://developer.mozilla.org

HTML (Hypertext Markup Language) elements are usually either "block-level" elements or "inline" elements. A block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.

 

Inline elements

https://developer.mozilla.org

In HTML, inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.