제11편: 구역 나누기 - 레이아웃의 기본 Div와 Span

지난 10편에서 표(Table)를 이용해 데이터를 깔끔하게 정리하는 법을 배웠죠? 이제 글의 구성 요소들을 모두 배웠으니, 이 요소들을 어디에 배치할지를 결정해야 합니다. 웹사이트를 하나의 건물로 비유하면, 제목이나 본문은 가구이고, 오늘 배울 <div>와 <span>은 가구를 배치하는 ‘방’이나 ‘구역’이라고 할 수 있습니다.

웹 디자인의 첫걸음, 구역 나누기(레이아웃)의 기초를 함께 정복해 봅시다!

[왜 구역을 나누어야 할까요?]

블로그에 글을 쓸 때 모든 내용을 그냥 일렬로 쭉 나열하면 디자인이 엉망이 됩니다. "여기서부터 여기까지는 헤더(Header) 영역", "여기는 본문(Content) 영역", "여기는 사이드바(Sidebar) 영역"처럼 구역을 나눠야 우리가 원하는 대로 예쁘게 꾸밀 수 있겠죠? HTML에서는 이 구역을 만들기 위해 <div>와 <span> 태그를 사용합니다.

[Div와 Span의 차이점: 상자와 포스트잇]

이 둘의 차이를 이해하는 것이 오늘 수업의 핵심입니다!

<div> (Division - 나눔): '상자'라고 생각하세요.
- <div>는 그 자체로 한 줄을 꽉 차지합니다. 마치 택배 상자를 쌓으면 다음 상자가 무조건 아래에 붙는 것과 같죠.
- 큰 구역(머리말, 본문, 꼬리말 등)을 나눌 때 사용합니다.
<span> (Span - 걸치다): '포스트잇'이라고 생각하세요.
- <span>은 필요한 만큼의 공간만 차지합니다. 줄바꿈이 되지 않고 글자 사이에 쏙 들어갑니다.
- 특정 단어의 색상을 바꾸거나, 작은 글자 조각들을 묶을 때 사용합니다.

[실전 연습: 메모장에 구역 나눠보기]

직접 눈으로 확인해 봅시다. <div>는 아래로 툭 떨어지고, <span>은 나란히 붙어있을 거예요.

HTML
<div style="background-color: lightblue;">
  여기는 큰 상자(div) 영역입니다.
</div>
<div style="background-color: lightgreen;">
  여기도 다른 상자(div) 영역입니다. (자동으로 줄바꿈됨!)
</div>

<p>
  글자 사이에 
  <span style="color: red;">빨간색 포스트잇(span)</span>과 
  <span style="color: blue;">파란색 포스트잇(span)</span>을 붙여보았습니다.
</p>

(참고: style="background-color: ..."는 여러분이 이해하기 쉽게 색을 입힌 옵션입니다.)

[구역 나누기 전략]

초보자가 구역을 나눌 때 가장 주의할 점은 '의미 없는 태그 남발'입니다.

과유불급: 블로그 본문 내용을 무조건 <div>로 감싸려고 하지 마세요. 구글은 글의 본질이 담긴 <p> 태그나 <h1>~<h3> 태그를 더 좋아합니다.
레이아웃 용도로만: <div>는 디자인을 잡는 '골격' 용도로만 사용하고, 내용은 정해진 태그(<h1>, <p>, <ul> 등)를 올바르게 사용하는 것이 구글이 가장 사랑하는 '웹 표준' 준수 방법입니다.

[에코노트허브의 조언]

지금은 <div>와 <span>의 차이만 기억해도 충분합니다. "덩어리로 묶고 싶으면 div, 글자 중간에서 예쁘게 꾸미고 싶으면 span!" 이렇게만 기억하세요. 나중에 배울 CSS를 만나면 이 구역들은 여러분의 블로그를 멋지게 변신시키는 도화지가 될 것입니다.

핵심 요약

<div>는 한 줄을 다 차지하는 '박스' 형태이며, 큰 레이아웃 영역을 나눌 때 씁니다.
<span>은 필요한 만큼만 차지하는 '포스트잇' 형태이며, 특정 글자나 요소만 묶을 때 씁니다.
<div>와 <span>은 그 자체로는 아무 기능이 없으며, CSS를 통해 디자인을 입히기 위한 틀 역할을 합니다.
블로그 글 작성 시에는 의미에 맞는 태그(p, h1 등)를 우선 사용하고, 전체적인 레이아웃 정리가 필요할 때만 div를 활용하세요.

다음 편 예고: 12편에서는 HTML의 뼈대에 드디어 화려한 옷을 입히는 시간! [서식의 완성: HTML과 CSS가 만나는 지점]에 대해 알아보겠습니다. 드디어 여러분의 블로그가 '진짜 블로그'처럼 보이기 시작할 거예요!

여러분의 블로그 메인 화면을 상상해 볼까요? 어떤 구역(헤더, 본문, 사이드바 등)으로 나누면 좋을지 고민해 보셨나요? 어떤 부분을 가장 눈에 띄게 배치하고 싶으신가요?