HTML5 Span 태그 사용법

1. Span 태그란?

Span 태그는 HTML 문서에서 인라인 요소를 그룹화하고 스타일링하기 위한 컨테이너입니다. 텍스트의 일부분을 선택하여 스타일을 적용하거나 JavaScript로 조작할 때 사용됩니다.

2. 기본 구조

<p>이것은 <span class="highlight">강조된</span> 텍스트입니다.</p>

<p>가격: <span class="price">₩10,000</span></p>

<p>이름: <span id="username">홍길동</span></p>

3. 자주 사용되는 속성

4. 실제 사용 예제

<article>
    <h2>제품 설명</h2>
    <p>
        이 제품은 <span class="highlight">최신 기술</span>로 제작되었습니다.
        가격은 <span class="price">₩50,000</span>이며,
        <span class="discount">20% 할인</span>이 적용됩니다.
    </p>
    
    <div class="product-info">
        <p>
            재고 상태: 
            <span class="stock-status in-stock">재고 있음</span>
        </p>
        <p>
            배송 예정일: 
            <span class="delivery-date">2024년 3월 15일</span>
        </p>
    </div>
    
    <div class="product-tags">
        <span class="tag">신제품</span>
        <span class="tag">인기상품</span>
        <span class="tag">할인</span>
    </div>
</article>

5. 스타일링 예제

<style>
    .highlight {
        background-color: #ffeb3b;
        padding: 2px 4px;
        border-radius: 2px;
    }
    
    .price {
        font-weight: bold;
        color: #e91e63;
    }
    
    .discount {
        color: #4CAF50;
        font-weight: bold;
    }
    
    .stock-status {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.9em;
    }
    
    .in-stock {
        background-color: #e8f5e9;
        color: #2e7d32;
    }
    
    .delivery-date {
        color: #666;
        font-style: italic;
    }
    
    .tag {
        display: inline-block;
        padding: 4px 8px;
        margin: 2px;
        background-color: #f5f5f5;
        border-radius: 4px;
        font-size: 0.9em;
    }
    
    .tag:hover {
        background-color: #e0e0e0;
    }
</style>

6. 성능 최적화 팁

• 불필요한 span 중첩을 피합니다.
• 시맨틱 태그를 적절히 사용합니다.
• CSS 선택자를 효율적으로 사용합니다.
• class와 id는 의미있게 명명합니다.
• 접근성을 고려한 마크업을 사용합니다.

7. 검증 및 테스트

Span 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 시맨틱 태그 사용 검토
• 다양한 브라우저에서 테스트
• 반응형 디자인 테스트
• 접근성 검사 도구 사용