[html]div와 span을 이용하여 영역 나누기

<div>와 <span> : HTML의 중요한 레이아웃 도구로, 둘 다 그룹을 묶는 태그지만, 목적과 성격이 조금 다름

🧱 <div> vs <span> 비교

<div>	블록(block) 요소	큰 영역을 묶음	✅ 자동 줄바꿈 O
<span>	인라인(inline) 요소	글 속 작은 영역 묶음	❌ 줄바꿈 X

✅ 언제 쓰면 좋을까?

페이지를 상단/중단/하단으로 나눌 때	<div>
카드, 박스형 영역을 만들 때	<div>
글 안에 색상/글꼴/배경 등 강조할 때	<span>

---

🧱 <div>: 영역(구역)을 묶는 박스

웹페이지를 레이아웃 단위로 나누고 싶을 때 사용

<div style="background-color: lightblue; padding: 10px;">
  <h2>공지사항</h2>
  <p>오늘은 휴무입니다.</p>
</div>

 

공지사항

오늘은 휴무입니다.

---

🧩 <span>: 텍스트 속 일부만 스타일링

문장 중 일부 글자에만 스타일을 줄 때 사용

• span은 줄바꿈 없이 텍스트의 일부만 꾸밈
• 강조, 색상 변경, 하이라이트 등에 좋

 

<p>오늘은 <span style="color: red;">중요한 날</span>입니다.</p>

 

오늘은 중요한 날입니다.