HTML <s> 요소는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. <s> 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, <s>는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 <del>과 <ins> 요소를 대신 사용하세요.
<p><s>There will be a few tickets available at the box office tonight.</s></p>
<p>SOLD OUT!</p>
/* stylelint-disable-next-line block-no-empty */
s {
}
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 요소 | `HTMLElement` |
특성
이 요소는 전역 특성만 포함합니다.
예제
<s>Today's Special: Salmon</s> SOLD OUT<br />
접근성 고려사항
대부분의 스크린 리더는 기본값에서 <s> 요소의 존재를 표현하지 않습니다. 그러나 CSS content 속성과 ::before, ::after 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.
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: " [취소선 끝] ";
}
스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 취소선의 유무가 꼭 필요할 때만 사용해야 합니다.
- Short note on making your mark (more accessible) | The Paciello Group
- Tweaking Text Level Styles | Adrian Roselli
같이 보기
- 자료가 삭제된 경우 사용하는
<del>요소. <s>요소의 시각적 요소를 재현할 수 있는 CSStext-decoration-line속성.