aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/html/element/ins/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/html/element/ins/index.html')
-rw-r--r--files/ko/web/html/element/ins/index.html137
1 files changed, 137 insertions, 0 deletions
diff --git a/files/ko/web/html/element/ins/index.html b/files/ko/web/html/element/ins/index.html
new file mode 100644
index 0000000000..669da42046
--- /dev/null
+++ b/files/ko/web/html/element/ins/index.html
@@ -0,0 +1,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>&lt;ins&gt;</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">&lt;ins&gt;This text has been inserted&lt;/ins&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
+
+<p>대부분의 스크린 리더는 기본값에서 <code>&lt;ins&gt;</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', '&lt;ins&gt;')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;ins&gt;')}}</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>