블록(Block) 요소와 인라인(Inline) 요소
웹 브라우저가 태그들을 화면에 그릴 때 공간을 차지하는 방식에 대한 가장 핵심적인 규칙입니다. 이 개념을 모르면 나중에 CSS로 레이아웃을 짤 때 "왜 이 박스가 내 맘대로 안 움직이지?" 하고 멘붕에 빠지게 됩니다!
🧱 블록과 🔤 인라인의 차이 시각화
🧱 블록(Block) 요소의 특징: 거대한 레고 블록
무조건 새 줄에서 툭툭 떨어지며 시작하고, 브라우저의 가로 넓이를 100% 꽉 채웁니다. CSS로 넓이(width)와 높이(height)를 자유롭게 변경할 수 있습니다. (예: div, p, h1)
첫 번째 블록 (100% 차지)
두 번째 블록 (아래로 떨어짐)
🔤 인라인(Inline) 요소의 특징: 기차 꼬리칸
새 줄로 넘어가지 않고, 딱 자기 안의 글자 크기만큼만 조그맣게 자리를 차지하며 옆으로 나란히 붙습니다. CSS로 넓이나 높이를 아무리 설정해도 먹히지 않습니다! (예: span, a, strong)
첫 번째 인라인
두 번째 인라인 (옆에 딱 붙음)
세 번째
블록(큰 상자) 안에는 인라인 요소(물건)를 넣을 수 있지만, 인라인 요소(작은 봉투) 안에 블록 요소(큰 상자)를 넣으면 안 된다는 문법적 규칙도 꼭 기억하세요!
| 태그명 | 주요 속성 | 설명 |
|---|---|---|
<div> | - | 대표적인 무색무취의 블록 요소로, 디자인을 위해 구역을 나눌 때 거대한 박스 용도로 사용합니다. |
<p> | - | 문단(Paragraph)을 의미하는 블록 요소입니다. 글이 끝나면 자동으로 줄바꿈이 됩니다. |
<span> | - | 대표적인 인라인 요소로, 줄바꿈 없이 텍스트 중 특정 단어만 색상을 바꾸는 등 스타일을 줄 때 사용합니다. |
<a> | - | 하이퍼링크를 만드는 인라인 요소입니다. 문장 중간에 링크를 걸어도 텍스트 흐름이 끊기지 않습니다. |
<!-- 블록(Block) 요소: 항상 새로운 줄에서 시작하며 가로폭 전체를 차지 -->
<div style="border: 2px solid #3b82f6;">
나는 블록 요소인 div 입니다. 혼자서 한 줄을 다 씁니다!
</div>
<p style="border: 2px solid #3b82f6;">
나는 p 태그입니다. 나도 한 줄을 다 차지하죠.
</p>
<!-- 인라인(Inline) 요소: 새로운 줄로 넘어가지 않고 내용물 크기만큼만 차지 -->
<span style="border: 2px solid #ec4899;">나는 span 인라인 요소!</span>
<a href="#" style="border: 2px solid #ec4899;">나는 a 태그! 옆에 딱 붙어있죠?</a>
<!-- 블록 안에 인라인은 O, 인라인 안에 블록은 X -->
<div>
<p>블록 안에 <span>인라인</span>을 넣는 것은 <strong>정상</strong>입니다.</p>
</div>