block
- 가로 너비를 가능한 최대한으로 차지
- 항상 새로운 줄에서 시작
<div>, <h1>, <p>, <header>, <footer>inline
- 컨텐츠의 크기만큼만 공간을 차지
- 줄 바꿈 없이 다른 인라인 요소와 한 줄에 배치
<span>, <a>, <strong>, <em>inline-block
- 인라인 요소처럼 한 줄에 배치되지만, 블록 요소처럼 width, height, margin, padding을 지정할 수 있다
flex
- 요소를 플렉스 컨테이너로 변환하여 자식 요소들의 배치를 유연하게 제어합니다.
- 수평 및 수직 정렬, 공간 분배 등을 쉽게 할 수 있습니다.
grid
- 2차원 레이아웃
none
- 요소를 완전히 보이지 않게 하고, 해당 요소가 차지하는 공간도 제거합니다.
- 요소가 DOM에는 존재하지만, 렌더링되지 않습니다.
FE Developer