[HTML/CSS] Display

display 속성 - inline, block, inline-block, list-item, table, flex, none 등

모든 element 요소는 display 속성 중 단 하나를 갖고 있다.

CSS에서 display로 변경할 수 있다.

 

inline display

ex) <span>, <b>, <img>, <a>, <i>, <button>

- 다른 요소들과 같은 줄에 머무르려 함.

- 텍스트처럼 다룰 수 있음

- 가로 길이는 필요한 만큼 차지

- width, height 지정 불가

(img는 width, height 지정 가능)

 

block display

ex) <div> ,<h1>, <p>, <nav>, <ul>, <li>

- 새로운 줄에 가려고 함.

- 가로 길이는 최대한 많이 차지

 

inline-block display

- 같은 줄에 머무르려 함.

- 텍스트처럼 다룰 수 있음

- weight, height 지정 가능