<del>

시도해 보기

<blockquote>
  There is <del>nothing</del> <ins>no code</ins> either good or bad, but
  <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

del {
  text-decoration: line-through;
  background-color: #fbb;
  color: #555;
}

ins {
  text-decoration: none;
  background-color: #d4fcbc;
}

blockquote {
  padding-left: 15px;
  border-left: 3px solid #d7d7db;
  font-size: 1rem;
}

특성

이 요소는 전역 특성을 포함합니다.

cite

회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 URI.

datetime

변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 HTML에서 사용하는 날짜와 시간 형식 문서에서 확인할 수 있습니다.

예제

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>

ê²°ê³¼

접근성 고려사항

대부분의 스크린 리더는 기본값에서 <del> 요소의 존재를 표현하지 않습니다. 그러나 CSS content 속성과 ::before, ::after 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.

del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [제거 부분 시작] ";
}

del::after {
  content: " [제거 부분 끝] ";
}

스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삭제 여부가 꼭 필요할 때만 사용해야 합니다.

• Short note on making your mark (more accessible) | The Paciello Group
• Tweaking Text Level Styles | Adrian Roselli

명세

브라우저 호환성

같이 보기

• 텍스트의 삽입을 위한 <ins> 요소
• 삭제 여부와 관계 없이 취소선을 위한 <s> 요소