대표적인 인라인 요소 - span - by. UXKM

주요 역할 및 특징

1. 의미 없는 인라인 컨테이너

   <div>가 블록 레벨 요소인 반면, <span>은 인라인 요소로 레이아웃에 영향을 주지 않고 콘텐츠 일부만 묶을 수 있습니다.

2. 스타일링 또는 스크립트 제어용으로 활용
   • CSS의 class, id, style 등을 통해 특정 문구에 색상, 폰트, 배경 등 스타일 적용이 가능합니다.
   • JavaScript로 일부 텍스트만 조작할 수 있습니다.
3. 구조 변경 없이 스타일 적용 가능

   문서 구조를 바꾸지 않고 특정 구문에 스타일을 적용할 수 있어 매우 유용합니다.

4. 접근성 측면에서는 시맨틱 정보가 없음

   <strong>, <em> 등 의미를 담은 요소를 먼저 고려하고, 필요할 때 <span>을 사용하시는 것이 좋습니다.

span과 div의 차이

<span>과 <div>는 모두 HTML에서 요소를 묶는 컨테이너 역할을 하지만, 동작 방식과 사용 목적에서 차이가 있습니다.

웹 페이지의 구조와 레이아웃을 구성할 때는 의미에 맞는 시맨틱 요소 또는 <div> 요소를 활용해야 합니다.
<span> 요소는 인라인 텍스트의 스타일링 용도로 사용되며, 레이아웃을 구성하는 용도로 사용해서는 안 됩니다.

span 요소의 주요 용도