HTML <span> 요소는 텍스트를 감싸는 데 사용되는 범용 인라인 컨테이너입니다. 이 글에서는 <span>의 기본 개념부터 실전 활용 예제, <div>와의 차이점까지 체계적으로 정리해 드립니다.
<span> 요소란?
HTML <span> 요소는 텍스트를 마크업하기 위한 범용(generic) 인라인 컨테이너 요소입니다. 자체적인 의미를 갖지 않기 때문에 주로 <p> 같은 다른 요소 내부에서 텍스트의 일부를 감쌀 때 사용됩니다.
<span>은 문장 전체가 아니라 텍스트의 특정 부분만 나머지와 다르게 보이게 하고 싶을 때 가장 널리 활용됩니다.
간단한 예시를 살펴보겠습니다.
<p>My hat is <span style="color:red">red.</span></p>위 코드에서는 “red.”라는 단어만 빨간색으로 표시됩니다. 이처럼 <span>을 사용하면 문장의 흐름을 해치지 않으면서 원하는 부분만 자유롭게 꾸밀 수 있습니다.
class 속성으로 요소 그룹화하기
<span>은 class 속성을 통해 동일한 스타일 값을 공유하는 여러 요소를 하나의 그룹으로 묶는 용도로도 사용할 수 있습니다.
예를 들어 레시피 글을 작성하면서, 본문에 등장하는 모든 재료 단어를 특정 색상으로 강조하고 싶다고 가정해 보겠습니다.
<p>
To make my delicious garlic butter you need just four ingredients,
<span class="ingredient">butter</span>,
<span class="ingredient">garlic</span>,
<span class="ingredient">salt</span> and
<span class="ingredient">black pepper.</span>
</p>그런 다음 아래와 같이 CSS 클래스를 정의합니다.
.ingredient {
color: green;
}재사용 가능한 클래스의 장점
재사용 가능한 클래스를 활용하면 유지보수가 훨씬 수월해집니다. 나중에 재료 단어의 표현 방식을 바꾸고 싶어질 때 .ingredient 클래스의 스타일을 딱 한 번만 수정하면, 이 클래스를 사용하는 모든 <span> 요소에 변경 사항이 자동으로 반영됩니다.
예를 들어 색상 대신 굵은 글씨체로 재료를 강조하고 싶다면 아래와 같이 수정하면 됩니다.
.ingredient {
font-weight: bold;
}비시맨틱 요소라는 점을 기억하세요
<span>은 고유한 의미를 지니지 않은 범용 요소이기 때문에 비시맨틱(non-semantic) 요소로 분류됩니다. 따라서 <strong>이나 <em>처럼 더 적합한 의미를 가진 요소가 있다면, 가능한 한 그 요소를 먼저 사용하는 것이 좋습니다.
<div> 요소와의 차이점
<span>은 <div> 요소와 성격이 비슷하지만, 결정적인 차이가 있습니다. 기본적으로 <span>은 인라인(inline) 요소인 반면 <div>는 블록 레벨(block-level) 요소입니다. 즉, <span>은 문장 중간에 자연스럽게 배치되는 반면, <div>는 새로운 줄에서 시작하는 독립적인 영역을 형성합니다. 물론 CSS의 display 속성을 사용하면 두 요소의 기본 표시 방식을 얼마든지 변경할 수 있습니다.