[CSS] display 속성

display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성이다. 

조금더 쉽게 말하면 요소 크기를 어떻게 결정할 것인지를 결정하는 속성이다.

 

display 속성값의 종류

1. none

display: none;

화면에서 사라진다. 

 

2. block

display: block;

width가 자신 컨테이너의 100%가 되게끔 한다. (가로 한줄을 다 차지)

 

3. inline

display: inline;

컨텐츠를 딱 감쌀정도의 크기만 갖게된다.

 

4. inline-block

display: inline-block;

inline과 block의 특성을 합쳐놓은 것으로, 해당 요소 자체는 inline처럼 동작한다.

하지만 요소 내부에서는 block 요소처럼 동작하게 된다.

 

5. flex

display: flex;

아이템들을 가로 방향 혹은 세로방향으로 배치할 수 있는 방식이다.

지정한 요소는 컨테이너에 적용되는 속성이고 하위 요소들은 아이템에 적용된다.

 

6. grid

display: grid;

flex와 다르게 2차원으로 배치하는 방식으로 column과 row의 비율이나 크기를 지정한다.

 

7. table

display: table;

레이아웃을 table로 표현할 수 있는 속성이다.