HTML의 <div>와 <span> 태그란?
<div>와 <span>은 모두 웹 페이지의 특정 영역을 정의하는 데 사용되는 대표적인 HTML 태그입니다. 두 태그 모두 자체적인 의미(시맨틱)를 갖지 않으며, 주로 CSS로 스타일을 적용하거나 여러 요소를 하나의 그룹으로 묶을 때 활용됩니다. 그렇다면 이 두 태그는 어떤 점이 다를까요? 핵심은 바로 콘텐츠가 배치되는 방식, 즉 블록 레벨(block-level)과 인라인(inline)의 차이입니다.
<div>와 <span>의 핵심 차이점
1. 블록 레벨 요소 vs 인라인 요소
<div>는 블록 레벨(block-level) 요소입니다. 블록 레벨 요소는 항상 새로운 줄에서 시작하며, 기본적으로 부모 요소의 전체 너비를 차지합니다. 따라서 <div> 안팎의 콘텐츠는 위아래로 자연스럽게 구분됩니다.
반면 <span>은 인라인(inline) 요소입니다. 인라인 요소는 줄바꿈 없이 텍스트 흐름 속에 그대로 배치되며, 콘텐츠 크기만큼의 공간만 차지합니다.
2. 용도의 차이
<div>는 문서의 섹션(header, footer, 본문 영역 등)이나 레이아웃 단위처럼 비교적 큰 영역을 묶을 때 사용합니다. 반면 <span>은 문단 중 일부 텍스트나 작은 이미지처럼 작은 부분만 감싸 스타일을 적용할 때 사용하는 것이 적절합니다.
3. 코드 예시
다음 예시를 보면 두 태그가 어떻게 함께 사용되는지 알 수 있습니다.
<div>데모 텍스트, <span>일부 강조된</span> 텍스트.</div>위 코드에서 <div>는 전체 문단을 감싸는 역할을 하고, <span>은 그중 일부 텍스트만 감싸 별도의 스타일(색상, 굵기 등)을 적용할 수 있게 해줍니다.
한눈에 보는 비교표
| 구분 | <div> | <span> |
|---|---|---|
| 표시 방식 | 블록 레벨 | 인라인 |
| 줄바꿈 | 앞뒤로 줄바꿈 발생 | 줄바꿈 없이 흐름 유지 |
| 기본 너비 | 부모 요소의 100% | 콘텐츠 크기만큼 |
| 주요 용도 | 섹션·레이아웃 그룹화 | 텍스트 일부 스타일링 |
CSS 레이아웃 관점에서의 활용
실무에서 <div>는 CSS 기반 레이아웃을 구성할 때 필수적인 요소로 사용됩니다. 페이지를 여러 영역으로 나누고 각 영역에 위치, 크기, 배경 등을 지정하는 데 적합하기 때문입니다. 반면 <span>은 레이아웃보다는 텍스트의 일부에 개별적인 스타일을 입히는 용도로 많이 쓰입니다.
마치며
정리하자면, <div>는 블록 단위로 영역을 나누고 구조를 만드는 태그이며, <span>은 인라인 단위로 세부 요소를 꾸미는 태그입니다. 두 태그의 표시 방식과 용도를 정확히 이해하면 더 깔끔하고 유지보수하기 쉬운 HTML 구조를 작성할 수 있습니다.