block | inlne

block | inline

블록레벨 요소와 인라인 요소에 대해 알아봅시다.

---

block

블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

예제

<p> 요소는 텍스트의 레이아웃을 완전히 바꿔, <p> 이전과 자기 자신의 텍스트, 그리고 <p> 이후의 세 부분으로 나눠버렸습니다.

block 요소

<address> <article> <aside> <blockquote> <details> <dialog> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <header> <hgroup> <hr> <li> <main> <nav> <ol> <p> <pre> <section> <table> <ul>

---

inline

인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.
보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록 요소는 포함할 수 없습니다.

예제

이 예제에서 <div>는 텍스트를 가진 블록 레벨 요소입니다.
그 텍스트 안에는 인라인 요소인 <span>이 존재합니다. <span>은 인라인이기 때문에 전체 문단이 끊기지 않고 하나로 그려집니다.

inline 요소

<a> <abbr> <acronym> <audio> <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <output> <picture> <progress> <q> <ruby> <s> <samp> <script> <select> <slot> <small> <span> <strong> <sub> <sup> <svg> <template> <textarea> <time> <u> <tt> <var> <video> <wbr>