블록/인라인 요소

블록(Block) 요소와 인라인(Inline) 요소

웹 브라우저가 화면에 요소를 그릴 때 공간을 차지하는 방식에 대한 가장 핵심적인 규칙입니다.
이 개념을 명확히 알아야 추후 CSS 레이아웃을 작성할 때 요소가 왜 원하는 대로 움직이지 않는지 이해할 수 있습니다.

1. 블록(Block)과 인라인(Inline)의 공간 차지 방식 비교

거대한 벽돌처럼 한 줄을 다 차지하는 블록 요소와, 글자 크기만큼만 기차처럼 이어 붙는 인라인 요소를 시각화했습니다.

2. 주요 태그 분류표

태그	구분	특징 및 설명
`<div>`, `<p>`, `<h1>` 등	블록 (Block)	가로폭 100%를 차지하며, 무조건 새로운 줄에서 시작합니다. 너비와 높이 지정이 가능합니다.
`<span>`, `<a>`, `<strong>` 등	인라인 (Inline)	텍스트의 크기만큼만 공간을 차지하며 옆으로 나열됩니다. 크기 지정(width/height)이 무시됩니다.

3. 블록 vs 인라인 실습

블록 요소와 인라인 요소가 브라우저에서 어떻게 다르게 동작하는지 아래 코드를 통해 확인하세요.

<div class="playground"> <h2>1. 블록 요소 (Block)</h2> <div class="block-el"> 나는 <strong><div></strong> 블록 요소입니다. 가로를 꽉 채우죠! </div> <p class="block-el" style="width: 50%;"> 나는 <strong><p></strong> 블록 요소입니다. (width를 50%로 줄여도 내 옆엔 아무도 못옵니다!) </p> <h2>2. 인라인 요소 (Inline)</h2> <div class="inline-container"> <span class="inline-el">첫 번째 <span></span> <a href="#" class="inline-el">두 번째 <a> 링크</a> <strong class="inline-el">세 번째 <strong></strong> <span class="inline-el invalid-inline">크기(width)를 200px 줘볼까요? (무시됨)</span> </div> </div>

태그

구분

특징 및 설명

<div>, <p>, <h1> 등

블록 (Block)

가로폭 100%를 차지하며, 무조건 새로운 줄에서 시작합니다. 너비와 높이 지정이 가능합니다.

<span>, <a>, <strong> 등

인라인 (Inline)

텍스트의 크기만큼만 공간을 차지하며 옆으로 나열됩니다. 크기 지정(width/height)이 무시됩니다.