CSS Display 속성

✅ `display` 속성 정리

display는 요소가 어떤 박스 모델로 보여질지 결정하는 속성이야.

즉, 레이아웃의 기본 단위가 어떻게 동작할지 설정하는 거지.

값	설명	특징	IE 지원
`block`	블록 요소로 렌더링	한 줄 전체 차지, 줄바꿈 O	✅
`inline`	인라인 요소로 렌더링	내용 크기만큼 차지, 줄바꿈 ❌	✅
`inline-block`	인라인 + 블록 중간 형태	inline처럼 배치되면서 크기 조절 O	✅
`none`	화면에서 제거	렌더링되지 않음	✅
`flex`	플렉스 컨테이너로 만듦	자식 요소 배치 제어 강력	✅
`inline-flex`	인라인처럼 보이는 flex	`flex`와 동일하지만 inline처럼 보임	✅
`grid`	그리드 컨테이너	2차원 레이아웃 제어	✅ (IE는 `-ms-grid`만 부분 지원)
`inline-grid`	인라인처럼 보이는 grid	`grid` + inline 형태	❌ (IE 미지원)
`contents`	자신은 사라지고 자식만 남음	구조적 트릭에 쓰임	❌ (IE 완전 미지원)

div, section, article, p {
  display: block;
}

span, a, strong {
  display: inline;
}