del(Deleted Text) element - by. UXKM

2025-05-16

요약 설명
<del> 요소는 문서에서 삭제되었거나 더 이상 유효하지 않은 콘텐츠를 나타내는 시맨틱 태그로, 수정 이력이나 변경 내용을 시각적으로 표현할 때 사용됩니다.
기본적으로 취소선(strikethrough)으로 렌더링되며, datetime 속성을 통해 삭제된 시점을 명시할 수 있습니다. 변경 전과 후의 내용을 비교하거나 기록할 때 <ins> 요소와 함께 사용되며, 문서 편집 히스토리를 명확하게 보여주고자 할 때 유용합니다.

주요 역할 및 특징

삭제된 텍스트를 시각적으로 표시
기본적으로 취소선(strikethrough) 을 적용해 삭제된 텍스트임을 명확히 표시합니다.
datetime 속성을 통해 삭제 시점 기록 가능
삭제된 날짜와 시간을 ISO 8601 형식으로 지정할 수 있습니다.
<ins> 요소와 함께 사용해 수정 내역 관리
<del>은 삭제된 텍스트를, <ins>는 새로 추가된 텍스트를 나타내며, 함께 사용하면 수정 내역을 보다 명확하게 관리할 수 있습니다.
SEO 및 접근성 향상
- <del> 요소를 사용하면 검색 엔진이 문서 변경 내역을 이해하는 데 도움을 줄 수 있습니다.
- 화면 낭독기(Screen Reader)는 삭제된 텍스트를 인식하여 사용자에게 알릴 수 있습니다.
일반 텍스트뿐만 아니라 HTML 요소도 포함 가능
<del> 요소 안에는 문장뿐만 아니라 다른 HTML 요소(<p>, <span>, <a> 등)도 포함할 수 있습니다.

CSS 기본 값

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

							del {
								display: inline;
								text-decoration: line-through; /* 취소선 적용 */
							}

기본 문법

							<del>삭제된 내용</del>

속성

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

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

								<del cite="https://example.com/reasons">이 문장은 삭제되었습니다.</del>

[datetime] 선택 사항 <del 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)

								<del datetime="2025-02-18T10:30:00Z">이 텍스트는 삭제되었습니다.</del>

예제

정가 / 할인가 예제

삭제된 날짜와 시간 기록 (datetime 사용)

								<del datetime="2025-02-11T14:00:00">이 문장은 삭제되었습니다.</del>

`<ins>` 요소와 같이 사용

								<p>
									<del cite="https://example.com/history" datetime="2025-02-18T10:30:00Z">
										구 버전의 텍스트입니다.
									</del>
									<ins datetime="2025-02-18T11:00:00Z">
										새롭게 추가된 텍스트입니다.
									</ins>
								</p>

주의사항

<del> 요소는 단순한 스타일링을 위한 취소선이 아니라, 의미 있는 삭제 기록을 나타낼 때 사용해야 합니다.
스타일이 목적이라면 CSS를 활용(text-decoration: line-through;)하는 것이 적절합니다.
cite 속성은 텍스트 설명이 아닌 URL만 허용합니다.
<s> 요소는 문서에서 더 이상 유효하지 않은 내용을 나타내지만, 공식적으로 삭제되었다는 의미는 아닙니다.
반면, <del> 요소는 실제로 문서에서 삭제된 내용을 의미하므로 두 요소를 구분하여 사용해야 합니다.