HTML 태그는 태어날 때부터 “자리를 차지하는 성격”이 정해져 있다.
어떤 태그는 화면 전체를 혼자 쓰려 하고(Block), 어떤 태그는 콘텐츠 크기만큼만 살짝 자리를 잡는다(Inline).
레이아웃이 깨지는 이유의 80%는 이 두 가지 성격을 혼동해서 발생한다. 가장 대표적인 <div>와 을 통해 이 차이를 확실히 정리한다.
- 한눈에 보는 비유: 상자 vs 포스트잇
💡 핵심 비유
Block (div): 택배 상자. 아무리 작은 물건을 넣어도 상자 하나가 선반 한 줄을 다 차지한다. 위아래로 쌓인다.
Inline (span): 포스트잇(스티커). 글자 크기만큼만 자리를 차지한다. 옆 공간이 남으면 줄줄이 옆으로 붙는다.
- Block 요소 (블록): “이기적인 녀석”
특징: “내 옆에 아무도 오지 마!”
화면 가로 너비(Width)를 100% 다 차지하는 요소다. 안에 글자가 한 글자만 있어도, 그 줄은 온전히 이 녀석의 것이다. 그래서 블록 요소 다음에 오는 태그는 무조건 줄 바꿈이 되어 아랫줄로 밀려난다.
대표 태그: <div>, <p>, <h1>~<h6>, <ul>, <li>, <header>, <footer>
크기 조절: 너비(width)와 높이(height)를 내 마음대로 지정할 수 있다.
주 용도: 웹페이지의 큰 구조(레이아웃)를 잡을 때 쓴다. (면 분할)
HTML
나도 한 줄 다 쓸 거야.
- Inline 요소 (인라인): “사교적인 녀석”
특징: “우리 사이좋게 옆에 앉자.”
딱 콘텐츠(글자, 이미지)의 크기만큼만 영역을 차지한다. 옆에 빈공간이 있으면 다른 인라인 요소들과 나란히 배치된다. 줄 바꿈이 일어나지 않는다.
대표 태그: , , , ,
크기 조절: 너비(width)와 높이(height)가 먹히지 않는다. (가장 중요한 차이점!) 아무리 CSS로 크기를 줘도 무시하고 콘텐츠 크기에 맞춘다.
주 용도: 문장 중간에 특정 부분만 스타일을 줄 때 쓴다. (글자 강조, 링크)
HTML
나는 글자만큼만.
나도 옆에 붙을래.
- ⚠️ 주의: 초보자가 가장 많이 하는 실수
“어? 왜 span에 width: 200px을 줬는데 안 커지죠?”
정답: Inline 요소는 크기(Width/Height) 값을 가질 수 없기 때문이다.
- 요약: 언제 무엇을 쓸까?
표로 정리하면 다음과 같다.
구분 Block (div) Inline (span)
줄 바꿈 O (무조건 줄 바꿈) X (옆으로 흐름)
너비(Width) 기본 100% (설정 가능) 설정 불가능 (콘텐츠 크기)
높이(Height) 설정 가능 설정 불가능
상하 여백 margin, padding 모두 적용됨 좌우는 먹히지만, 상하는 잘 안 먹힘
대표 선수 div, p, h1, ul, li span, a, strong, img
📌 결론
큰 덩어리(레이아웃)를 잡을 때 👉 Block (div)
글자 중간에 끼어들어 꾸밀 때 👉 Inline (span)
이 원칙만 지키면, 적어도 요소들이 제멋대로 줄을 바꾸거나 크기가 안 먹어서 당황하는 일은 사라진다.