오늘 학원 수업 시간에 강사님이 그러시더군요. “여러분, 홈페이지는 사실 거대한 도시락 통입니다.” 처음엔 다들 무슨 소린가 해서 눈만 껌뻑였는데, 수업이 끝날 때쯤엔 모두 고개를 끄덕였습니다. 저도 예전에 혼자 독학할 때, 글자 색 하나 바꾸려다 레이아웃이 와장창 깨져서 당황했던 적이 있거든요.
그때 제가 몰랐던 게 바로 오늘 배운 ‘블록(Block)’과 ‘인라인(Inline)’의 차이였습니다. 오늘 이 글을 다 읽으시면, 다시는 <div>와 <span>을 헷갈려서 모니터를 부여잡는 일은 없으실 겁니다. 자, 복습 들어갑니다!
1. Div 태그: 욕심쟁이 도시락 통 (Block Element)
먼저 <div>입니다. 이 녀석은 성격이 아주 ‘욕심쟁이’입니다. 우리가 도시락을 쌀 때, 밥을 담는 칸이나 국을 담는 칸을 생각해보세요. 그 칸은 옆에 아무리 공간이 남아도 혼자서 한 줄을 다 차지하죠?
이걸 전문 용어로 블록 요소(Block Element)라고 합니다.
- ✅ 특징: 화면 가로 너비(Width)를 100% 차지합니다.
- ✅ 행동: “내 옆에 아무도 오지 마!”라며 자동으로 줄바꿈을 해버립니다.
- ✅ 용도: 웹사이트의 레이아웃(구획)을 나눌 때 주로 씁니다. (헤더, 본문, 푸터 등)
“수업 시간에 제가 <div> 두 개를 나란히 놓으려고 애쓰니까 강사님이 웃으시더군요. ‘그건 블록이라서 기본적으론 불가능해. CSS라는 마법을 부려야만 옆으로 와.’ 라고요. Div는 태생이 독불장군이라는 걸 기억해야 합니다.”
2. Span 태그: 소심한 반찬들 (Inline Element)
반면에 <span>은 아주 ‘겸손하고 소심’합니다. 도시락 밥 위에 올라가는 ‘콩자반’이나 ‘깨’를 떠올려보세요. 콩자반을 올려놓는다고 해서 밥 전체가 바뀌거나 줄이 바뀌지 않죠? 그냥 밥 알갱이들 사이에 쏙 들어갑니다.
이것이 바로 인라인 요소(Inline Element)입니다.
- ✅ 특징: 딱 자기 내용물(글자) 크기만큼만 자리를 차지합니다.
- ✅ 행동: 줄바꿈이 일어나지 않고, 글자들 사이에 자연스럽게 흐릅니다.
- ✅ 용도: 문장 중간에 특정 단어만 색상/굵기를 바꿀 때 씁니다.
3. 한눈에 보는 비교 (오늘의 핵심!)
오늘 배운 내용을 표로 정리해봤습니다. 나중에 헷갈리면 이 부분만 다시 보세요.
| 구분 | Div (Block) | Span (Inline) |
|---|---|---|
| 비유 | 도시락 통 (용기) | 반찬, 밥알 (내용물) |
| 영역 | 한 줄 전체 차지 | 콘텐츠 크기만큼만 |
| 줄바꿈 | 무조건 일어남 | 일어나지 않음 |
💡 코드캠의 복습 TIP
절대 하지 말아야 할 실수가 있습니다. 바로 <span> 안에 <div>를 넣는 것입니다. 작은 콩자반 안에 거대한 도시락 통을 욱여넣는 꼴이거든요. 문법적으로 틀린 건 아니지만(HTML5 기준), 브라우저가 렌더링할 때 꼬일 확률이 높습니다. 항상 큰 박스(Div) 안에 작은 요소(Span)를 넣는 순서를 기억하세요!
Div와 Span으로 요소를 만들었다면, 이제 원하는 위치에 배치할 차례입니다. 초보자가 가장 많이 헷갈리는 정렬 방법은 Flexbox의 Justify와 Align 구분법 글에서 쉽게 해결할 수 있습니다.
마치며
정리하자면, 레이아웃을 잡고 덩어리를 나눌 때는 ‘도시락 통(Div)’을 꺼내고, 텍스트의 일부분만 예쁘게 꾸미고 싶을 때는 ‘반찬(Span)’을 쓴다고 생각하면 됩니다.
오늘 복습은 여기까지입니다. 이 개념만 확실히 잡고 있어도 다음 시간에 배울 ‘박스 모델(Box Model)’이 훨씬 쉬워질 거예요. 집에 가서 꼭 한 번 코드로 쳐보시길 바랍니다!
혹시 설명 중에 이해가 안 가거나, 학원 진도 나가면서 막히는 부분이 있나요? 댓글로 남겨주시면 제 복습 노트에서 답을 찾아 알려드릴게요!
