display

CSS 에서는 Display 속성을 이용해 layout에 관여합니다.

Display 속성은 크게 두가지로 나뉘어집니다. outer display type과 inner display type이 있습니다.

outer display type은 같은 계층의 또는 같은 레이아웃상에서 다른 모델과 어떤 관계를 가지느냐에 대한 속성입니다.

display: inline

display: block

이 대표적인 예 입니다. Default로는 전부다 display: block 입니다. 이것은 flow에 영향을 미칩니다. flow라는 것은, 여러개의 객체가 있을 때에 어떤식으로 "흐르듯이" 레이아웃을 만들 건지 할 때의 flow를 말합니다.

block이 된다면 한줄 자체를 자신이 차지합니다. inline이 된다면 한줄 자체가 아니라 자신의 크기만큼만 차지합니다.

inner display type 같은 경우에는, 해당 모델 안에서 객체들을 어떻게 배치할 것인지 설정하는 속성입니다.

display:flex

display:grid

display:table

이 대표적입니다.