[CSS] Display 속성

None

화면에 나타나지 않음. 요소를 렌더링 하지 않도록 설정해 영역도 차지하지 않음

Block

width, height 값을 지정할 수 있음

가로 영역을 모두 차지하여 항상 줄 바꿈 된 새로운 라인에서 시작

💡 <div>,<p>,<h><li>,<form> 등

Inline

block과는 달리 줄 바꿈이 되지 않고 width, heigt 을 지정할 수 없음. margin과 padding 속성도 좌우 간격만 반영이 되고 상하 간격은 반영되지 않음

 💡 <span>,<a>,<b>,<i>,<img> 등

Inline-block

요소 자체는 inline처럼 줄바꿈이 되지 않지만 요소 내부에서는 블록 요소처럼 동작한다. width, heignt, 여백 값을 지정 가능함

 💡 <button>, <input>, <select> 등

Flex

아이템들을 가로 혹은 세로 방향으로 배치할 수 있는 방식으로 요소의 크기가 불분명하거나 동적인 경우에도 각 요소를 정렬할 수 있음

Grid

2차원으로 배치하는 방식, column과 row의 비율과 크기를 지정할 수 있음