CSS | display 속성 (inline, block, inline-block) 과 float

display
inline
block
inline-block
float

---

display

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다. 

 

inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. inline 엘리먼트를 사용할 때 주의할 점은, 콘텐츠 크기 만큼만 공간을 차지하도록 되어있기 때문에 width와 height 속성을 지정해도 무시된다는 것이다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

 

inline 요소의 종류의 태그

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

 

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. 기본적으로 너비 100% (width:100%) 속성을 가지고 있다고 보면 된다.  block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 된다.

 

block 요소의 종류의 태그

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

 

inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.

 

inline-block 요소의 종류의 태그

button, input, select

 

---

float

float는 해당 요소를 다음 요소 위에 떠 있게 한다. 자세하게 설명하자면 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하게 한다. 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다.

float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다. float:left는 왼쪽부터 가로 정렬되고 float:right는 오른쪽부터 가로 정렬된다.