HTML을 공부하다 보면 div와 span 태그를 자주 보게 됩니다.
둘 다 특별한 의미를 가진 태그라기보다는, 내용을 묶기 위해 사용하는 태그입니다.
하지만 화면에서 동작하는 방식이 다릅니다.
핵심 차이는 간단합니다.
div는 한 줄 전체를 차지하는 블록 요소입니다.
span은 글자처럼 필요한 만큼만 차지하는 인라인 요소입니다.
이 글에서 다루는 내용
div태그span태그- 블록 요소
- 인라인 요소
- 그룹을 나누는 이유
1. div 태그란?
div는 여러 요소를 하나의 구역으로 묶을 때 사용하는 태그입니다.
<div>
<h2>공지사항</h2>
<p>이번 주 금요일에 점검이 있습니다.</p>
</div>
위 코드에서 h2와 p는 하나의 공지사항 영역으로 묶여 있습니다.
div는 보통 다음과 같은 상황에서 사용합니다.
- 화면 영역을 나눌 때
- 여러 태그를 하나로 묶을 때
- CSS를 적용할 그룹이 필요할 때
- JavaScript로 특정 영역을 제어할 때
예를 들어 웹페이지를 만들 때는 다음처럼 구역을 나눌 수 있습니다.
<div class="header">상단 영역</div>
<div class="content">본문 영역</div>
<div class="footer">하단 영역</div>
div는 화면의 큰 박스를 만드는 느낌으로 이해하면 쉽습니다.
2. span 태그란?
span은 문장 안에서 일부 텍스트나 작은 요소를 묶을 때 사용하는 태그입니다.
<p>오늘의 상태는 <span>좋음</span>입니다.</p>
위 코드에서 span은 좋음이라는 글자만 감싸고 있습니다.
span은 보통 다음과 같은 상황에서 사용합니다.
- 문장 안의 특정 단어만 꾸밀 때
- 일부 텍스트에 CSS를 적용할 때
- JavaScript로 특정 글자나 값을 바꿀 때
예를 들어 가격만 강조하고 싶다면 다음처럼 사용할 수 있습니다.
<p>상품 가격은 <span class="price">10,000원</span>입니다.</p>
span은 큰 박스라기보다는, 문장 안의 특정 글자에 붙이는 작은 표시라고 생각하면 됩니다.
3. 블록 요소란?
블록 요소는 화면에서 한 줄 전체를 차지하는 요소입니다.
대표적인 블록 요소는 다음과 같습니다.
| 태그 | 의미 |
|---|---|
div | 구역 묶기 |
h1부터 h6까지 | 제목 |
p | 문단 |
ul, ol | 목록 |
li | 목록 항목 |
블록 요소는 기본적으로 새 줄에서 시작합니다.
<div>첫 번째 영역</div>
<div>두 번째 영역</div>
화면에서는 보통 다음처럼 보입니다.
첫 번째 영역
두 번째 영역
두 div가 같은 줄에 붙지 않고 각각 한 줄씩 차지합니다.
4. 인라인 요소란?
인라인 요소는 글자처럼 필요한 공간만 차지하는 요소입니다.
대표적인 인라인 요소는 다음과 같습니다.
| 태그 | 의미 |
|---|---|
span | 일부 텍스트 묶기 |
a | 링크 |
strong | 중요한 텍스트 |
em | 강조 텍스트 |
q | 짧은 인용문 |
인라인 요소는 새 줄로 내려가지 않습니다.
<span>첫 번째</span>
<span>두 번째</span>
화면에서는 보통 다음처럼 보입니다.
첫 번째두 번째
두 span은 필요한 만큼만 공간을 차지하기 때문에 같은 줄에 이어서 보입니다.
5. div와 span 차이 비교
| 구분 | div | span |
|---|---|---|
| 요소 종류 | 블록 요소 | 인라인 요소 |
| 차지하는 공간 | 한 줄 전체 | 내용만큼만 |
| 줄바꿈 | 기본적으로 줄바꿈됨 | 줄바꿈되지 않음 |
| 사용 위치 | 큰 영역 묶기 | 문장 안 일부 묶기 |
| 예시 | 카드, 섹션, 레이아웃 | 단어 강조, 가격 표시 |
간단히 말하면 다음과 같습니다.
div는 박스입니다.
span은 형광펜입니다.
큰 영역을 묶을 때는 div를 사용하고, 문장 안의 일부만 묶을 때는 span을 사용합니다.
6. 그룹을 나누는 이유
HTML에서 그룹을 나누는 이유는 크게 세 가지입니다.
1. 구조를 알아보기 쉽게 만들기
여러 태그가 섞여 있으면 어디가 어떤 영역인지 보기 어렵습니다.
<div class="profile-card">
<h2>김민준</h2>
<p>백엔드 개발자를 준비하고 있습니다.</p>
</div>
이렇게 묶으면 profile-card가 하나의 프로필 카드 영역이라는 것을 알 수 있습니다.
2. CSS를 적용하기 쉽게 만들기
그룹을 나누면 특정 영역에만 스타일을 적용할 수 있습니다.
<div class="notice">
<p>서비스 점검 안내입니다.</p>
</div>
.notice {
border: 1px solid black;
padding: 16px;
}
위 코드는 notice라는 영역에만 테두리와 여백을 적용합니다.
3. JavaScript로 제어하기 쉽게 만들기
특정 영역이나 글자를 JavaScript로 바꾸고 싶을 때도 그룹이 필요합니다.
<p>현재 점수는 <span id="score">0</span>점입니다.</p>
document.getElementById("score").textContent = "100";
위 코드는 score라는 span 안의 값을 100으로 바꿉니다.
이처럼 span은 문장 안의 특정 값만 바꿀 때 자주 사용됩니다.
7. 전체 예시
아래 예시는 div와 span을 함께 사용한 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div와 span 예시</title>
</head>
<body>
<div class="card">
<h2>상품 정보</h2>
<p>상품명: 무선 키보드</p>
<p>가격: <span class="price">35,000원</span></p>
</div>
<div class="card">
<h2>배송 정보</h2>
<p>배송 상태: <span class="status">배송 중</span></p>
</div>
</body>
</html>
위 코드에서 div는 상품 정보와 배송 정보라는 큰 영역을 나눕니다.
span은 가격과 배송 상태처럼 문장 안의 일부 값만 묶습니다.
정리
| 태그 | 핵심 역할 | 쉽게 비유 |
|---|---|---|
div | 큰 영역을 묶음 | 박스 |
span | 문장 안 일부를 묶음 | 형광펜 |
div와 span은 둘 다 내용을 묶는 태그입니다.
하지만 div는 블록 요소라서 한 줄 전체를 차지하고, span은 인라인 요소라서 내용만큼만 차지합니다.
큰 구역을 나눌 때는 div, 문장 안 일부를 꾸미거나 바꿀 때는 span을 사용하면 됩니다.
한 줄 요약
div는 큰 영역을 묶는 블록 요소이고, span은 문장 안 일부를 묶는 인라인 요소입니다.