TIL.display란?

display속성

• 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, grid, flex처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.
• 화면에 어떻게 들어나게 할지 결정하는 속성이다.

display 속성값

• block
• inline
• inline-block
• none

display 속성값은 4가지이다.

displat: block;

일반적으로 설정하지 않아도 div가 갖게되는 기본값이다. 기본적으로 width 가 자신의 컨테이너의 100%가 되게끔 한다.

display: inline;

• block태그와 다르게 줄바꿈이 되지 않고, 컨텐츠를 감싸게 되고, 크기를 변화시킬 수 없다.
• 보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록요소는 포함할 수 없다.

  display: inline-block;

• inline과 block의 특성을 합쳐놓은 속성이다. 기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있다.
• inline속성처럼 전후 줄바꿈 없이 한 줄에 다른 속성들과 나란히 배치된다.

  display: none;

  화면에서 사라진다. 크기 자체도 차지하지 않는다.