[HTML/CSS] 태그의 정의 및 사용법

<span>의 “span”이라는 단어는 영어로 “범위” 또는 “간격”을 의미합니다.

<span> 태그의 정의 및 사용법

<span> 태그는 HTML에서 인라인(inline) 요소들을 그룹화하기 위한 특별한 의미가 없는(non-semantic) 컨테이너(container)입니다. 즉, <span> 자체만으로는 시각적인 변화나 특별한 의미를 가지지 않지만, 주로 CSS로 스타일을 적용하거나 JavaScript로 특정 부분을 제어하기 위해 사용됩니다.

주요 특징

1. 인라인 요소 (Inline Element)

   • 줄 바꿈 없이 다른 인라인 요소들과 같은 줄에 배치됩니다.

   • 내용(content)의 너비만큼만 공간을 차지합니다. (<div> 같은 블록 레벨 요소와 대비됩니다.)

2. 의미 없음 (Non-semantic)

   • <h1>(제목), <p>(문단), <strong>(중요) 태그처럼 내용의 의미를 나타내지 않습니다.

   • 단순히 스타일링이나 스크립트 적용을 위한 ‘갈고리(hook)’ 역할을 합니다.

사용법 및 목적

<span> 태그는 주로 다음과 같은 목적을 위해 사용됩니다.

1. CSS 스타일링: 텍스트의 특정 부분(단어, 구절 등)에만 다른 스타일(색상, 폰트 크기, 배경색 등)을 적용하고 싶을 때 사용합니다.

2. JavaScript 제어: 특정 텍스트나 인라인 요소 그룹을 JavaScript로 선택하여 내용을 변경하거나 이벤트를 추가하는 등의 조작을 할 때 사용합니다.

기본 구문

<span>내용(텍스트 또는 다른 인라인 요소)</span>

1. 텍스트 일부 스타일링:

   <p>이 문장에서 <span style="color: red; font-weight: bold;">이 부분</span>만 강조하고 싶습니다.</p>

   결과: 문장 내에서 “이 부분” 텍스트만 빨간색과 굵은 글씨로 표시됩니다.

2. 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>

   결과: “중요한 부분”은 노란색 배경과 이탤릭체로, “특별한 단어”는 밑줄이 적용됩니다.

3. 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> 태그와의 차이점:

주의사항 및 권장사항:

• 시맨틱 태그 우선 사용: 강조는 <strong>이나 <em>, 하이라이트는 <mark> 등 의미에 맞는 시맨틱 태그가 있다면 먼저 사용하는 것이 웹 접근성과 SEO에 좋습니다. <span>은 적절한 시맨틱 태그가 없을 때 스타일링이나 스크립팅 목적으로 사용하는 것이 좋습니다.

• 남용 금지: 꼭 필요한 경우가 아니면 <span> 태그를 과도하게 사용하는 것은 코드 가독성을 해칠 수 있습니다.

• class 또는 id 사용: style 속성을 직접 사용하는 것보다 class나 id를 부여하고 CSS 파일에서 스타일을 관리하는 것이 유지보수에 더 효율적입니다.

요약하자면, <span> 태그는 문장 내의 특정 단어나 구절처럼 작은 인라인 부분을 묶어서 스타일을 적용하거나 스크립트로 제어하고 싶을 때 사용하는 유용한 도구입니다.