<ins>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
HTML <ins> 요소는 문서에 추가된 텍스트의 범위를 나타냅니다. <del> 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.
시도해 보기
<p>“You're late!”</p>
<del>
<p>“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
<p>“A wizard is never late …”</p>
</ins>
del,
ins {
display: block;
text-decoration: none;
position: relative;
}
del {
background-color: #fbb;
}
ins {
background-color: #d4fcbc;
}
del::before,
ins::before {
position: absolute;
left: 0.5rem;
font-family: monospace;
}
del::before {
content: "−";
}
ins::before {
content: "+";
}
p {
margin: 0 1.8rem 0;
font-family: Georgia, serif;
font-size: 1rem;
}
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 투명. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | HTMLModElement |
특성
이 요소는 전역 특성을 포함합니다.
cite-
회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 URI.
datetime-
변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 HTML에서 사용하는 날짜와 시간 ��식 문서에서 확인할 수 있습니다.
예제
html
<ins>This text has been inserted</ins>
결과
접근성 고려사항
대부분의 스크린 리더는 기본값에서 <ins> 요소의 존재를 표현하지 않습니다. 그러나 CSS content 속성과 ::before, ::after 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.
css
ins::before,
ins::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
ins::before {
content: " [추가 부분 시작] ";
}
ins::after {
content: " [추가 부분 끝] ";
}
스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삽입 여부가 꼭 필요할 때만 사용해야 합니다.
명세
| Specification |
|---|
| HTML # the-ins-element |
브라우저 호환성
같이 보기
- 문서에서 삭제된 부분을 나타내는
<del>요소.