💡 퀵 접속: htm.kr/del_inss

HTML5 Del/Ins 태그 사용법

1. Del/Ins 태그란?

Del 태그와 Ins 태그는 HTML 문서에서 텍스트의 삭제와 삽입을 표시하는 데 사용되는 태그입니다. Del 태그는 삭제된 텍스트를, Ins 태그는 새로 삽입된 텍스트를 나타냅니다. 이 태그들은 문서의 변경 이력을 추적하거나, 수정 사항을 표시할 때 유용합니다.

2. 기본 구조

Del/Ins 태그의 기본 사용법

<p>
    이전 가격: <del>20,000원</del>
    현재 가격: <ins>15,000원</ins>
</p>

<p>
    회의 일정이 <del>3월 15일</del>
    <ins>3월 20일</ins>로 변경되었습니다.
</p>

3. 자주 사용되는 속성

속성 설명 예시
datetime 변경 날짜/시간 <del datetime="2024-03-15">
cite 변경 이유 URL <ins cite="changes.html">
class CSS 클래스 지정 <del class="old-price">

4. 실제 사용 예제

<article class="product-update">
    <h2>제품 정보 업데이트</h2>
    
    <div class="price-change">
        <h3>가격 변경</h3>
        <p>
            정상가: <del datetime="2024-03-15">30,000원</del>
            <br>
            할인가: <ins datetime="2024-03-15">25,000원</ins>
        </p>
    </div>
    
    <div class="spec-change">
        <h3>제품 사양 변경</h3>
        <ul>
            <li>
                프로세서: <del>Intel Core i5</del>
                <ins>Intel Core i7</ins>
            </li>
            <li>
                메모리: <del>8GB</del>
                <ins>16GB</ins>
            </li>
        </ul>
    </div>
    
    <div class="update-info">
        <small>
            * 변경일시: 2024년 3월 15일
            <br>
            * 변경사유: 제품 사양 개선
        </small>
    </div>
</article>

💡 주의사항

  • del 태그는 삭제된 텍스트를 표시할 때 사용합니다.
  • ins 태그는 새로 삽입된 텍스트를 표시할 때 사용합니다.
  • datetime 속성을 사용하여 변경 시점을 명시합니다.
  • cite 속성을 사용하여 변경 이유를 링크할 수 있습니다.
  • 접근성을 고려한 마크업을 사용합니다.

5. 스타일링 예제

<style>
    /* 기본 삭제/삽입 스타일 */
    del {
        text-decoration: line-through;
        color: #999;
        background-color: #ffebee;
    }

    ins {
        text-decoration: underline;
        color: #2e7d32;
        background-color: #e8f5e9;
    }

    /* 가격 변경 스타일 */
    .price-change del {
        color: #d32f2f;
        font-weight: 500;
    }

    .price-change ins {
        color: #1976d2;
        font-weight: 600;
    }

    /* 제품 사양 변경 스타일 */
    .spec-change del {
        color: #666;
        background-color: #f5f5f5;
    }

    .spec-change ins {
        color: #2e7d32;
        background-color: #e8f5e9;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        del, ins {
            padding: 0 2px;
        }
    }
</style>

6. 성능 최적화 팁

  • del/ins 태그의 중첩을 최소화합니다.
  • CSS로 스타일링을 처리합니다.
  • 접근성을 고려한 마크업을 사용합니다.
  • 검색 엔진 최적화를 고려합니다.
  • 불필요한 사용은 피합니다.

7. 검증 및 테스트

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

  • W3C 마크업 검증 서비스 사용
  • 스크린 리더 테스트
  • 다양한 브라우저에서 테스트
  • 접근성 검사 도구 사용
  • 검색 엔진 최적화 도구 사용