CSS Block/Inline
Block와 Inline
CSS에서 <display>속성은 웹페이지 상에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지를 결정합니다. 여러가지 <display> 속성값 중에서 가장 기본적인 Block와 Inline에 대해 알아보겠습니다.
Block
Block로 지정된 요소들은 전후 줄바꿈이 들어가 다른 요소들을 다른줄로 밀어내고 혼자 한 줄을 차지합니다. 아래는 Block 요소의 태그들입니다.
<adress>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <ul>, <p>, <ol>, <video> ...등등
Inline
Inline으로 지정된 요소는 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치됩니다. 아래는 Inline 요소의 태그들입니다.
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>,
<em>, <small>, <tt>, <map>, <textarea>, <label>, <sub>, <q>, <button>, <cite> ...등등
Inline-block
inline, block의 단점을 보완하기 위해 만들어졌습니다.
inline 요소 처럼 줄바꿈이 일어나지 않고 다른 요소들과 함께 위치할 수 있습니다.
block 요소처럼 width, height, margin, padding 반영이 가능합니다.
여러 개의 요소를 한줄에 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 용의합니다.
요약
인라인 구조는 텍스트 구조로, <a> 태그를 제외하고는 블록 구조에 들어갈 수 없습니다.
블록구조는 박스 구조로, 인라인 구조에 들어갈 수 있습니다. 쉽게 말해 <span> 안에 <div>는 들어 갈 수 없습니다.