모든 element는 레이아웃에서 어떻게 흐르는지를 제어하는 기본 display 동작을 가집니다.
<div>, <p>, <h1>, <section>, <ul>.<span>, <a>, <strong>, <em>.<p>This is a <strong>bold</strong> word inside a paragraph.</p>
<!-- <strong>은 inline으로 유지된다; 아래 두 개의 <div>는 세로로 쌓인다 -->
<div>Block one</div>
<div>Block two</div>
span { width: 200px; height: 50px; } /* ❌ 무시됨 — span은 inline이다 */
inline element에 width/height를 설정해도 아무 효과가 없습니다. 해결책은 display를 바꾸는 것입니다.
span { display: inline-block; width: 200px; } /* ✅ inline으로 흐르되 크기를 존중한다 */
inline-block은 텍스트 흐름 속(나란히)에 위치하면서 동시에 width/height/margin을 존중합니다. 한 줄에 배치되는 내비게이션 항목, 배지, 버튼에 적합합니다.
block → 새 줄, 전체 너비, 크기 조절 가능
inline → 줄 안, 콘텐츠 너비, 크기 조절 불가 (세로 방향)
inline-block → 줄 안, 콘텐츠 흐름, 크기 조절 가능
기본 display를 이해하면 <span>이 왜 높이를 갖지 않는지, <div>가 왜 쌓이는지, 언제 inline-block, flex, grid로 전환해야 하는지를 알 수 있습니다.
이는 레이아웃 시스템을 적용하기 전에 element가 어떻게 배치되는지의 기초입니다.