<span>
의 “span”이라는 단어는 영어로 “범위” 또는 “간격”을 의미합니다.
<span> 태그의 정의 및 사용법
<span> 태그는 HTML에서 인라인(inline) 요소들을 그룹화하기 위한 특별한 의미가 없는(non-semantic) 컨테이너(container)입니다. 즉, <span> 자체만으로는 시각적인 변화나 특별한 의미를 가지지 않지만, 주로 CSS로 스타일을 적용하거나 JavaScript로 특정 부분을 제어하기 위해 사용됩니다.
주요 특징
-
인라인 요소 (Inline Element)
-
줄 바꿈 없이 다른 인라인 요소들과 같은 줄에 배치됩니다.
-
내용(content)의 너비만큼만 공간을 차지합니다. (<div> 같은 블록 레벨 요소와 대비됩니다.)
-
-
의미 없음 (Non-semantic)
-
<h1>(제목), <p>(문단), <strong>(중요) 태그처럼 내용의 의미를 나타내지 않습니다.
-
단순히 스타일링이나 스크립트 적용을 위한 ‘갈고리(hook)’ 역할을 합니다.
-
사용법 및 목적
<span> 태그는 주로 다음과 같은 목적을 위해 사용됩니다.
-
CSS 스타일링: 텍스트의 특정 부분(단어, 구절 등)에만 다른 스타일(색상, 폰트 크기, 배경색 등)을 적용하고 싶을 때 사용합니다.
-
JavaScript 제어: 특정 텍스트나 인라인 요소 그룹을 JavaScript로 선택하여 내용을 변경하거나 이벤트를 추가하는 등의 조작을 할 때 사용합니다.
기본 구문
<span>내용(텍스트 또는 다른 인라인 요소)</span>
-
텍스트 일부 스타일링:
<p>이 문장에서 <span style="color: red; font-weight: bold;">이 부분</span>만 강조하고 싶습니다.</p>
결과: 문장 내에서 “이 부분” 텍스트만 빨간색과 굵은 글씨로 표시됩니다.
-
CSS 클래스(Class) 또는 ID와 함께 사용: (더 일반적이고 권장되는 방식)
<style> .highlight { background-color: yellow; font-style: italic; } #special-word { text-decoration: underline; } </style> <p>문서의 <span class="highlight">중요한 부분</span>을 강조하고, <span id="special-word">특별한 단어</span>에는 밑줄을 긋습니다.</p>
결과: “중요한 부분”은 노란색 배경과 이탤릭체로, “특별한 단어”는 밑줄이 적용됩니다.
-
JavaScript와 함께 사용:
<p>카운트: <span id="counter">0</span></p> <script> let count = 0; const counterElement = document.getElementById('counter'); setInterval(() => { count++; counterElement.textContent = count; // span 태그 안의 텍스트를 업데이트 }, 1000); </script>
결과: 1초마다 <span> 태그 안의 숫자가 1씩 증가합니다.
<div> 태그와의 차이점:
특징 | <span> 태그 | <div> 태그 |
요소 유형 | 인라인(Inline) 요소 | 블록(Block) 레벨 요소 |
줄 바꿈 | 없음 (다른 요소와 같은 줄에 배치) | 있음 (기본적으로 너비 전체를 차지하고 줄 바꿈) |
주요 용도 | 텍스트 일부 등 작은 범위 그룹화, 스타일링 | 큰 영역 구분, 레이아웃 구조화, 스타일링 |
기본 너비 | 내용(content) 만큼 | 부모 요소의 100% |
주의사항 및 권장사항:
-
시맨틱 태그 우선 사용: 강조는 <strong>이나 <em>, 하이라이트는 <mark> 등 의미에 맞는 시맨틱 태그가 있다면 먼저 사용하는 것이 웹 접근성과 SEO에 좋습니다. <span>은 적절한 시맨틱 태그가 없을 때 스타일링이나 스크립팅 목적으로 사용하는 것이 좋습니다.
-
남용 금지: 꼭 필요한 경우가 아니면 <span> 태그를 과도하게 사용하는 것은 코드 가독성을 해칠 수 있습니다.
-
class 또는 id 사용: style 속성을 직접 사용하는 것보다 class나 id를 부여하고 CSS 파일에서 스타일을 관리하는 것이 유지보수에 더 효율적입니다.
요약하자면, <span> 태그는 문장 내의 특정 단어나 구절처럼 작은 인라인 부분을 묶어서 스타일을 적용하거나 스크립트로 제어하고 싶을 때 사용하는 유용한 도구입니다.