[css] display

inline

inline 요소는 컨텐츠의 크기만큼 크기가 지정된다. 그래서 width, height 와 같은 속성이 적용되지 않는다. 대표적으로 span 태그가 있다.

p 태그는 원래 block 요소이지만, display 속성을 inline 으로 지정하니 텍스트의 크기만큼만 자리를 차지한 것을 볼 수 있다.

block

block 요소는 위에서 본 p 태그 처럼 컨텐츠의 크기와 상관없이 한 줄을 다 차지한다. div, h1 등이 있다. 줄바꿈을 하지 않았지만 모두 줄바꿈이 된 것을 확인할 수 있다.

inline-block

inline-block 은 inline 과 block 요소를 합쳐놓은 것이다. inline 요소처럼 줄바꿈 없이 한 줄에 배치되지만, block 요소처럼 크기 지정이 가능하다.

none

display: none 은 화면에서 요소가 보이지 않게 해준다. visibility: hidden 이라는 속성도 있는데, 둘의 차이점은 display: none 은 차지하고 있던 공간 조차도 없애준다. display: none 속성이 설정된 p2 는 완전히 지워진 반면, visibility: hidden 속성이 설정된 p5 는 공간이 남아있는 것을 볼 수 있다.

flex

flex 는 모든 자식 요소를 inline-block 으로 지정해준다.
(추후 업데이트 예정)   👈🏻   자세히 알아보기