ins(insert) element - by. UXKM

요약 설명

<ins> 요소는 문서에 새롭게 삽입된 콘텐츠를 나타내는 시맨틱 태그로, 수정 이력이나 변경 사항을 시각적으로 강조할 때 사용됩니다.
기본적으로 밑줄(underline)로 렌더링되며, datetime 속성을 사용해 삽입된 시점을 명시할 수 있습니다. 기존 내용을 제거한 <del> 요소와 함께 사용하면, 문서의 변경 전후 상태를 명확하게 비교하거나 기록할 수 있어, 수정 이력이 필요한 콘텐츠에 유용합니다.

주요 역할 및 특징

  1. 새로 추가된 콘텐츠 강조
    • <ins> 요소는 문서 변경 사항을 시각적으로 나타내기 위해 사용됩니다.
    • 브라우저에서 기본적으로 밑줄(underline)이 적용됩니다.
  2. datetime 속성을 통해 추가 시점 기록 가능

    추가된 날짜와 시간을 ISO 8601 형식으로 기록할 수 있어 수정 내역 관리에 용이합니다.

  3. <del> 요소와 함께 사용해 수정 내역 관리
    • <del>은 삭제된 텍스트를, <ins>는 새로 추가된 텍스트를 나타냅니다.
    • 함께 사용하면 이전 내용과 새로운 내용을 비교하여 볼 수 있습니다.
  4. SEO 및 접근성 향상
    • <ins> 요소를 사용하면 검색 엔진이 문서의 변경 사항을 이해하는 데 도움을 줄 수 있습니다.
    • 화면 낭독기(Screen Reader)는 새로운 콘텐츠를 강조하여 읽어 줄 수 있습니다.
  5. 일반 텍스트뿐만 아니라 HTML 요소도 포함 가능

    <ins> 요소 안에는 문장뿐만 아니라 다른 HTML 요소(<p>, <span>, <a> 등)도 포함할 수 있습니다.

CSS 기본 값

<ins> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

[cite] 선택 사항 <ins cite="URL">

새로 추가된 내용의 출처를 명시하는 URL을 제공하는 역할을 합니다. 하지만 필수 속성은 아니며, 브라우저에서 이를 시각적으로 표시하지는 않습니다.
cite 속성은 텍스트 설명이 아닌 URL만 허용합니다.

[datetime] 선택 사항 <ins datetime="값">

문서의 변경 이력을 관리하고 추적이 가능히도록 새로 추가된 날짜와 시간을 ISO 8601 형식으로 기록합니다.

형식 :
날짜만 : YYYY-MM-DD (예 : 2025-02-18)
날짜와 시간 : YYYY-MM-DDThh:mm:ssZ (예 : 2025-02-18T10:30:00Z)
시간대 포함 : YYYY-MM-DDThh:mm:ss+09:00 (예 : 2025-02-18T10:30:00+09:00)

예제

정가 / 할인가 예제

추가된 날짜와 시간 기록 (datetime 사용)

<del> 요소와 같이 사용

주의사항

  • <ins> 요소는 실제로 문서에서 새로 추가된 내용을 나타낼 때만 사용해야 합니다.
    단순히 밑줄을 추가하려면 CSS에서 text-decoration: underline;을 사용하는 것이 더 적절합니다.
  • cite 속성은 텍스트 설명이 아닌 URL만 허용합니다.