[CSS] display : block, inline, inline-block 속성(블록 레벨, 인라인 레벨 요소)

블록 레벨 요소와 인라인 레벨 요소

HTML 태그들은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라집니다. 위의 이미지를 보시면 블록 레벨 요소는 세로로 하나씩 배치되어 있는 반면 인라인 레벨 요소는 가로로 하나씩 배치되어 있는 모습을 보실 수 있습니다. 

 

 블록 레벨 요소에 대하여 

• 태그를 사용하여 요소를 삽입했을 경우 혼자서 한 줄을 차지하는 요소입니다.
• 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.

먼저 블록 레벨 요소는 좌측의 사진처럼 요소를 삽입 했을 때 혼자 한 줄을 차지합니다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소들이 올 수 없습니다. 

 

대표적인 블록 레벨 HTML 태그들

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>

 

 

 인라인 레벨 요소 

• 줄을 차지하지 않는 요소입니다.
• 화면에 표시되는 콘텐츠 만큼만 영역을 차지하며 그 외의 공간에는 다른 요소가 와도 상관없습니다.
• 한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있습니다.

반면에 인라인 레벨 요소는 줄을 차지하지 않는 요소들입니다. 즉 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소들이 올 수 있습니다. 따라서 한줄에 여러개의 인라인 레벨 요소를 표시할 수 있습니다. 

 

대표적인 인라인 레벨 HTML 태그들

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>

 

 

 블록 요소와 인라인 요소를 강제로 지정하는 방법 : display 속성 

위에서 살펴본 것처럼 HTML태그들은 각각 블록 요소와 인라인 요소로 구분되어 있습니다. 그렇다면 이 요소들의 형태를 바꿀 수는 없을까요? display 속성을 사용하면 가능합니다. 

 

• display:block = 해당 요소를 블록 레벨로 지정합니다.
• display:inline = 해당 요소를 인라인 레벨로 지정합니다. 
• display:inline-block = 인라인(inline) 요소는 한 줄로는 배치할 수 있지만 너비나 높이, 마진등의 값은 적용되지 않습니다. 만약 인라인으로 배치하면서 블록처럼 너비나 높이등을 지정하고 싶다면 inline-block을 사용하면 됩니다.
• display:none = 이 속성을 지정하면 해당 요소를 화면에 아예 표시하지 않으며 공간도 차지하지 않습니다.

 

See the Pen dispaly:bolck by wjdxo513 (@wjdxo513) on CodePen.

 

위의 예제를 보시면 블록 레벨 요소인 <div> 태그를 사용했기 때문에 1줄에 box 3개를 나란히 배치시키기는 본래 불가능합니다. 하지만 CSS에서 display:inline-block;라고 명시를 해주었기 때문에 <div> 태그가 인라인 레벨 요소로 변경되어 나란히 배치할 수 있게 됩니다.

 

 

See the Pen display:block by wjdxo513 (@wjdxo513) on CodePen.

 

마찬가지로 위의 예제에서는 인라인 레벨 요소인 <span> 태그를 사용했기 때문에 세로로 box3개를 차례대로 배치시키기는 본래 불가능합니다. 하지만 CSS에서 display:block;라고 명시를 해주었기 때문에 <span> 태그가 블록 레벨 요소로 변경되어 세로로 차례대로 배치시킬 수 있게 됩니다.