1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: <ins>
slug: Web/HTML/Element/ins
tags:
- Element
- HTML
- HTML edits
- Reference
- Web
translation_of: Web/HTML/Element/ins
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><ins></code> 요소</strong>는 문서에 추가된 텍스트의 범위를 나타냅니다.</span> {{htmlelement("del")}} 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td>투명.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>모두</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLModElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함</span>합니다.</p>
<dl>
<dt>{{htmlattrdef("cite")}}</dt>
<dd>회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 {{glossary("URI")}}.</dd>
<dt>{{htmlattrdef("datetime")}}</dt>
<dd>변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 <a href="/ko/docs/Web/HTML/Date_and_time_formats">HTML에서 사용하는 날짜와 시간 형식</a> 문서에서 확인할 수 있습니다.</dd>
</dl>
<h2 id="예제">예제</h2>
<pre class="brush: html"><ins>This text has been inserted</ins></pre>
<h3 id="결과">결과</h3>
<p>{{EmbedLiveSample("예제")}}</p>
<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
<p>대부분의 스크린 리더는 기본값에서 <code><ins></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p>
<pre class="brush: 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: " [추가 부분 끝] ";
}</pre>
<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삽입 여부가 꼭 필요할 때만 사용해야 합니다.</p>
<ul>
<li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li>
<li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li>
</ul>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">주석</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.ins")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>문서에서 삭제된 부분을 나타내는 {{HTMLElement("del")}} 요소.</li>
</ul>
|
