HTML 강좌 / div와 span은 언제 사용할까?

div와 span은 별도의 의미를 부여하지 않고 내용을 묶는 HTML 요소입니다. CSS나 스크립트를 적용할 그룹이 필요하지만 그 내용에 맞는 의미 요소가 없을 때 사용합니다. div는 큰 묶음에, span은 문장 안의 일부에 주로 씁니다.

div와 span의 차이

div는 여러 문단이나 카드 전체처럼 흐름 콘텐츠를 묶는 데 적합합니다. span은 문장 안의 짧은 구간처럼 구문 콘텐츠를 묶습니다. 두 요소 모두 그 자체로 ‘제목’, ‘버튼’, ‘중요함’ 같은 뜻을 전달하지 않습니다.

브라우저의 기본 표시에서는 div가 블록처럼 새 줄에서 시작하고 span은 주변 글과 같은 줄에 놓입니다. 하지만 화면 모양은 CSS로 바꿀 수 있으므로, 선택 기준은 모양보다 내용의 구조여야 합니다.

div 안에는 문단·목록 등 여러 요소를 묶을 수 있지만, span 안에는 문장 안에 들어갈 수 있는 내용만 넣습니다. 단순히 줄바꿈이 필요하다면 새 div를 만들기 전에 문단을 나누거나 CSS의 표시 방식을 조정할지 판단하세요.

스타일을 적용할 부분만 묶기

다음 코드를 HTML 파일의 body에 넣고, CSS를 head의 style 요소에 넣어 보세요.

<div class="product-card">
  <h2>텀블러</h2>
  <p>가격: <span class="price">15,000원</span></p>
</div>

.product-card {
  padding: 16px;
  border: 1px solid #dadada;
}
.price {
  color: #075cb4;
  font-weight: 700;
}

카드 전체에는 테두리가 생기고 가격 부분만 색과 굵기가 달라집니다. class는 CSS가 적용할 대상을 찾기 위한 이름입니다. CSS가 없어도 제품 이름은 h2, 설명은 p로 남아 의미를 잃지 않습니다.

실행할 때는 HTML을 body에, CSS를 head의 style에 넣고 파일을 저장한 뒤 새로고침하세요. 가격만 파랗게 보이지 않는다면 HTML의 class="price"와 CSS의 .price 철자가 같은지 확인합니다. 점(.)은 CSS에서 클래스를 선택한다는 표시이지 HTML 클래스 이름의 일부가 아닙니다.

의미 있는 요소가 있다면 먼저 사용하기

페이지의 주요 메뉴를 div로만 묶기보다 nav를, 독립적인 글을 표현할 때는 article을 검토하세요. 사용자가 누르는 기능에는 span을 클릭 가능하게 꾸미기보다 button을 쓰는 편이 키보드 조작과 의미 전달에 알맞습니다.

위 예제의 가격은 특별한 데이터 형식으로 처리하지 않으므로 span만으로 충분합니다. 목적에 맞는 의미 요소가 있는지는 MDN HTML 요소 목록에서 확인할 수 있습니다.

흔한 실수

span 안에 여러 문단이나 div를 넣지 마세요. 문장 안의 작은 구간을 묶는 요소이기 때문입니다. 레이아웃을 위해 모든 요소를 div로 바꾸는 것도 피하세요. CSS 클래스는 유지하면서 HTML 요소만 의미에 맞게 고칠 수 있습니다.

div와 span만으로 버튼이나 제목을 만들면 화면은 비슷하게 꾸밀 수 있어도 원래 요소가 제공하는 의미와 키보드 동작은 생기지 않습니다. 먼저 적합한 HTML 요소가 있는지 확인한 뒤, 의미 없는 묶음이 필요한 곳에만 이 둘을 사용하세요.