Block, Inline과 Inline-Block

display 속성은 CSS에서 가장 기본적인 속성 중 하나입니다. 요소가 레이아웃 흐름에 참여하는 방식을 결정하며, 블록 수준 상자나 인라인 상자를 만들지 또는 그 중간 형태가 될지를 정합니다.

블록 요소는 새 줄에서 시작하고 컨테이너의 전체 너비를 채우도록 늘어납니다. 모든 면에 너비, 높이, 여백, 패딩을 설정할 수 있습니다.

기본 블록 요소: div, p, h1-h6, section, article.

인라인 요소는 텍스트 안에서 흐릅니다. 새 줄에서 시작하지 않습니다. width나 height를 설정해도 효과가 없습니다. 위쪽과 아래쪽 여백은 무시되지만 가로 여백과 패딩은 적용됩니다.

기본 인라인 요소: span, a, strong, em, img.

display: inline-block은 두 방식이 결합된 형태입니다. 요소는 인라인으로 흐르므로 강제로 줄이 바뀌지 않지만, 블록 요소처럼 너비, 높이 및 모든 상자 모델 속성을 지원합니다.

플렉스박스가 나오기 전에는 가로 탐색 막대에 inline-block을 사용했습니다. 단점은 HTML 소스의 공백이 항목 사이에 작은 간격을 만든다는 것입니다.

부모 요소에 font-size: 0을 설정한 다음 자식 요소에서 글꼴 크기를 복원하거나 HTML의 공백을 제거하면 인라인 블록 요소 사이의 공백 간격을 없앨 수 있습니다.

현대적인 CSS에서는 부모 요소에 display: flex를 설정하는 것이 공백 문제 없이 가로 레이아웃을 구현하는 선호되는 방법입니다. inline-block은 단일 요소의 크기를 지정할 때 여전히 유용합니다.

CSS를 사용하면 어떤 요소의 표시 유형이든 변경할 수 있습니다. 링크를 버튼 모양으로 만들거나 목록 항목을 가로로 배치할 때 흔히 사용합니다.

CSS는 표가 아닌 요소에 표 레이아웃을 적용할 수 있도록 display: table, display: table-row, display: table-cell 등을 제공합니다. 오늘날에는 거의 필요하지 않지만 이전 환경에서 세로 중앙 정렬을 할 때 유용합니다.

display: flow-root는 overflow: hidden의 부작용 없이 새로운 블록 서식 컨텍스트를 만듭니다. 부동 요소를 정리하고 여백 축소가 컨테이너 밖으로 새어 나가는 것을 방지합니다.

블록 요소와 인라인 요소가 형제 요소로 섞여 있으면 브라우저는 부모가 없는 인라인 콘텐츠를 익명의 블록 상자 안에 배치합니다. 눈에 보이지 않는 동작이지만 예상치 못한 레이아웃 이동이 발생하는 이유를 설명해 줍니다.

요소를 인라인 흐름에 유지하면서 width를 설정할 수 있는 display 값은 무엇입니까?

블록 요소는 전체 너비를 차지하고 새 줄에서 시작합니다. 인라인 요소는 텍스트와 함께 흐르며 너비와 높이를 무시합니다. 인라인 블록은 두 방식을 결합하여 인라인으로 흐르면서도 너비와 높이를 허용합니다. 현대적인 레이아웃에서는 인라인 블록 그리드보다 플렉스박스와 그리드를 우선 사용합니다.