<s>

HTML <s> 요소는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. <s> 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, <s>는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 <del>과 <ins> 요소를 대신 사용하세요.

HTML <s> 요소는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. <s> 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, <s>는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 <del>과 <ins> 요소를 대신 사용하세요.

HTML

<p><s>There will be a few tickets available at the box office tonight.</s></p>

<p>SOLD OUT!</p>

CSS

/* stylelint-disable-next-line block-no-empty */
s {
}

콘텐츠 카테고리	플로우 콘텐츠, 구문 콘텐츠.
가능한 콘텐츠	구문 콘텐츠.
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할	모두
DOM 요소	`HTMLElement`

특성

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

예제

HTML

<s>Today's Special: Salmon</s> SOLD OUT<br />

접근성 고려사항

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

CSS

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

s::before {
  content: " [취소선 시작] ";
}

s::after {
  content: " [취소선 끝] ";
}

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

자료가 삭제된 경우 사용하는 <del> 요소.
<s> 요소의 시각적 요소를 재현할 수 있는 CSS text-decoration-line 속성.

<s>

특성

예제

접근성 고려사항

명세

브라우저 호환성

같이 보기