차례
    1. 4.7 편집
      1. 4.7.1 The ins element
      2. 4.7.2 The del element
      3. 4.7.3 ins, del 요소에 공통인 속성
      4. 4.7.4 편집과 문단
      5. 4.7.5 편집과 목록

4.7 편집

insdel 요소는 문서가 수정되었음을 나타냅니다.

The ins and del elements represent edits to the document.

4.7.1 The ins element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content

요소가 구문 컨텐츠만을 포함한다면 구문 컨텐츠

When the element only contains phrasing content: phrasing content.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

요소가 구문 컨텐츠만을 포함한다면 구문 컨텐츠가 올 수 있는 곳

When the element only contains phrasing content: where phrasing content is expected.

아니라면 플로우 컨텐츠가 올 수 있는 곳

Otherwise: where flow content is expected.

이 요소가 포함할 수 있는 것:Content model
투명한 내용Transparent
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
cite
datetime
DOM interface:
Uses the HTMLModElement interface.

ins 요소는 문서에 추가된 것을 나타냅니다.

The ins element represents an addition to the document.

문단 하나가 추가되었음을 나타냅니다.

The following represents the addition of a single paragraph:

<aside>
 <ins>
  <p> I like fruit. </p>
 </ins>
</aside>

이렇게 하면 aside 요소에 구문 컨텐츠만 포함되었으므로 하나의 문단만 존재합니다.역주

As does this, because everything in the aside element here counts as phrasing content and therefore there is just one paragraph:

<aside>
 <ins>
  Apples are <em>tasty</em>.
 </ins>
 <ins>
  So are pears.
 </ins>
</aside>

ins 요소는 암시된 문단 경계를 가로질러서는 안됩니다.

ins elements should not cross implied paragraph boundaries.

다음 예제에서는 문단 두 개를 추가했는데 두 번째 문단은 두 부분에 걸쳐 있습니다. 첫번째 ins 요소는 문단 경계를 가로지르게 되는데, 이러한 것은 취약한 구조입니다.역주

The following example represents the addition of two paragraphs, the second of which was inserted in two parts. The first ins element in this example thus crosses a paragraph boundary, which is considered poor form.

<aside>
 <!-- don't do this -->
 <ins datetime="2005-03-16T00:00Z">
  <p> I like fruit. </p>
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19T00:00Z">
  So are pears.
 </ins>
</aside>

이렇게 하는 것이 더 좋습니다. 요소를 더 많이 사용하긴 했지만, 어떠한 요소도 암시된 문단 경계를 가로지르지 않습니다.

Here is a better way of marking this up. It uses more elements, but none of the elements cross implied paragraph boundaries.

<aside>
 <ins datetime="2005-03-16T00:00Z">
  <p> I like fruit. </p>
 </ins>
 <ins datetime="2005-03-16T00:00Z">
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19T00:00Z">
  So are pears.
 </ins>
</aside>

4.7.2 The del element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content

요소가 구문 컨텐츠만을 포함하는 경우 : 구문 컨텐츠

When the element only contains phrasing content: phrasing content.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

요소가 구문 컨텐츠만을 포함하는 경우 : 구문 컨텐츠가 올 수 있는 곳

When the element only contains phrasing content: where phrasing content is expected.

아니라면: 플로우 컨텐츠가 올 수 있는 곳

Otherwise: where flow content is expected.

이 요소가 포함할 수 있는 것:Content model
투명한 내용Transparent
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
cite
datetime
DOM interface:
Uses the HTMLModElement interface.

del 요소는 문서로부터 삭제되었음을 나타냅니다.

The del element represents a removal from the document.

del 요소는 암시된 문단 경계를 가로질러서는 안됩니다.

del elements should not cross implied paragraph boundaries.

다음 예제는 할 일 목록입니다. 이미 끝낸 일은 줄을 그어서 지웠고 완성된 날짜도 마크업했습니다.

The following shows a "to do" list where items that have been done are crossed-off with the date and time of their completion.

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

4.7.3 ins 요소와 del 요소에 공통인 속성

cite 속성으로 어떻게 바꿨는지 설명하는 문서의 위치를 명시할 수 있습니다. 문서가 길다면 해시(#)를 써서 정확한 위치를 가리키길 권합니다.

The cite attribute may be used to specify the address of a document that explains the change. When that document is long, for instance the minutes of a meeting, authors are encouraged to include a fragment identifier pointing to the specific part of that document that discusses the change.

cite 속성의 값은 반드시 바꾼 내역을 설명하는 유효한, 앞뒤로 공백을 허용하는 URL이어야 합니다. 대응하는 링크를 얻을 때는 속성의 값을 요소에 대해 상대적으로 해석해야 합니다. 사용자 에이전트는 사용자가 인용 링크를 따라갈 수 있도록 해야 합니다.

If the cite attribute is present, it must be a valid URL potentially surrounded by spaces that explains the change. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents should allow users to follow such citation links.

datetime 속성을 사용해서 변경한 날짜와 시간을 명시할 수 있습니다.

The datetime attribute may be used to specify the time and date of the change.

datetime 속성의 값은 반드시 선택적으로 시간정보를 갖는 유효한 날짜 문자열이어야 합니다.

If present, the datetime attribute's value must be a valid date string with optional time.

User agents must parse the datetime attribute according to the parse a date or time string algorithm. If that doesn't return a date or a global date and time, then the modification has no associated timestamp (the value is non-conforming; it is not a valid date string with optional time). Otherwise, the modification is marked as having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated time-zone offset information to determine which time zone to present the given datetime in.

ins 요소와 del 요소는 HTMLModElement 인터페이스를 구현해야 합니다.

The ins and del elements must implement the HTMLModElement interface:

interface HTMLModElement : HTMLElement {
           attribute DOMString cite;
           attribute DOMString dateTime;
};

The cite IDL attribute must reflect the element's cite content attribute. The dateTime IDL attribute must reflect the element's datetime content attribute.

4.7.4 편집과 문단

This section is non-normative.

ins 요소와 del 요소가 문단에 영향을 미치지 않기 때문에 다음과 같은 일이 벌어질 수 있습니다. 문단이 명시적인 p 요소에 의해 선언되지 않은 곳에서 insdel 요소가 두 개의 문단 전체, 혹은 다른 비 구문 컨텐츠 요소와 다른 문단으로 확장되는 경우입니다. 다음 예제를 보십시오.

Since the ins and del elements do not affect paragraphing, it is possible, in some cases where paragraphs are implied (without explicit p elements), for an ins or del element to span both an entire paragraph or other non-phrasing content elements and part of another paragraph. For example:

<section>
 <ins>
  <p>
   This is a paragraph that was inserted.
  </p>
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 </ins>
 This is a second sentence, which was there all along.
</section>

ins 요소나 del 요소가 p 요소로 만들어진 문단 일부만을 감싸면, 첫 문단의 끝까지를 포함하고 두 번째 문단 전체, 그리고 세 번째 문단의 시작부분까지 ins 요소나 del 요소 하나로 감싸버리는 일이 벌어질 수 있습니다(이러한 것은 매우 혼란스러우며 좋은 구현으로 간주되지 않습니다).

By only wrapping some paragraphs in p elements, one can even get the end of one paragraph, a whole second paragraph, and the start of a third paragraph to be covered by the same ins or del element (though this is very confusing, and not considered good practice):

<section>
 This is the first paragraph. <ins>This sentence was
 inserted.
 <p>This second paragraph was inserted.</p>
 This sentence was inserted too.</ins> This is the
 third paragraph in this example.
 <!-- (don't do this) -->
</section>

하지만 암시적인 문단이 정의되는 방법 때문에 한 문단의 마지막 부분과 그 다음 문단의 시작 부분을 insdel 요소로 마크업하는 것이 불가능합니다. 그대신 하나, 혹은 두 개의 p 요소와, 두 개의 ins 또는 del 요소를 사용해야 합니다. 예를 들어:

However, due to the way implied paragraphs are defined, it is not possible to mark up the end of one paragraph and the start of the very next one using the same ins or del element. You instead have to use one (or two) p element(s) and two ins or del elements, as for example:

<section>
 <p>This is the first paragraph. <del>This sentence was
 deleted.</del></p>
 <p><del>This sentence was deleted too.</del> That
 sentence needed a separate &lt;del&gt; element.</p>
</section>

위에서 설명한 혼란과 어느정도 관련이 있는 이유로, 모든 문단을 p 요소를 이용해서 명시적으로 마크업 할 것을 권장합니다. 그리고 insdel 요소가 어떤 암시적인 문단도 가로지르지 않도록 할 것을 권장합니다.

Partly because of the confusion described above, authors are strongly encouraged to always mark up all paragraphs with the p element, instead of having ins or del elements that cross implied paragraphs boundaries.

4.7.5 편집과 목록

This section is non-normative.

olul 요소의 내용 모델은 insdel 요소를 자식요소로서 허용하지 않습니다. 목록은 항상 아이템 전체를 나타내어야 하는데, 삭제된 것으로 표시되었을 것 역시 이에 포함됩니다.

The content models of the ol and ul elements do not allow ins and del elements as children. Lists always represent all their items, including items that would otherwise have been marked as deleted.

목록 아이템이 추가되었거나 삭제되었음을 표시하려면, ins 요소나 del 요소가 li 요소의 내용을 감싸도록 마크업해야 합니다. 목록 아이템이 다른것으로 대체되었음을 표시하려면, li 요소 내부에 del요소와 ins 요소를 함께 사용할 수 있습니다.

To indicate that an item is inserted or deleted, an ins or del element can be wrapped around the contents of the li element. To indicate that an item has been replaced by another, a single li element can have one or more del elements followed by one or more ins elements.

처음에 빈 것으로 시작한 목록이 시간이 지남에 따라 아이템을 추가하고, 또한 삭제하였습니다. 이 예제에서 강조된 부분은 목록의 "현재" 상태를 보여줍니다. 그렇지만 목록 아이템의 숫자는 그러한 변경을 반영하지 않습니다.

In the following example, a list that started empty had items added and removed from it over time. The bits in the example that have been emphasized show the parts that are the "current" state of the list. The list item numbers don't take into account the edits, though.

<h1>Stop-ship bugs</h1>
<ol>
 <li><ins datetime="2008-02-12T15:20Z">Bug 225:
 Rain detector doesn't work in snow</ins></li>
 <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
 Water buffer overflows in April</ins></del></li>
 <li><ins datetime="2008-02-16T13:50Z">Bug 230:
 Water heater doesn't use renewable fuels</ins></li>
 <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
 Carbon dioxide emissions detected after startup</ins></del></li>
</ol>

다음 예제는 과일 목록으로 시작했다가 색상 목록으로 바뀌었습니다.

In the following example, a list that started with just fruit was replaced by a list with just colors.

<h1>List of <del>fruits</del><ins>colors</ins></h1>
<ul>
 <li><del>Lime</del><ins>Green</ins></li>
 <li><del>Apple</del></li>
 <li>Orange</li>
 <li><del>Pear</del></li>
 <li><ins>Teal</ins></li>
 <li><del>Lemon</del><ins>Yellow</ins></li>
 <li>Olive</li>
 <li><ins>Purple</ins></li>
</ul>

aside 요소에 구문 컨텐츠만 들어 있다면 aside 요소도 구문 컨텐츠입니다. 섹션 컨텐츠가 텍스트 노드를 포함할 수 없다는 명시적인 언급은 없지만, 섹션 컨텐츠 안에 있는 텍스트 노드는 문단이라는 개념은 있습니다. 그에 따라 다음과 같이 암시적인 문단이 생성됩니다.

<aside>
  <p>
    <ins>
      사과는 <em>맛있습니다</em>.
    </ins>
    <ins>
      배도 맛있습니다.
    </ins>
  </p>
</aside>돌아가기

섹션 컨텐츠 안에 있는 텍스트 노드는 문단이라고 했습니다. 따라서 다음과 같은 구조가 만들어집니다.

<aside>
 <!-- 이렇게 하면 안됩니다. -->
 <ins datetime="2005-03-16T00:00Z">    <!-- 이 ins 요소는 명시적인 문단을 포함하므로 플로우 컨텐츠입니다. -->
  <p>나는 과일을 좋아합니다.</p>       <!-- 여기서 명시적인 문단이 끝났으므로 -->
  <p>                                  <!-- 암시적인 문단이 생성됩니다. -->
   사과는 <em>맛있습니다</em>.
   </ins>                              <!-- 이 ins 요소는 문단 경계에 모호하게 걸쳤습니다. -->
   <ins datetime="2007-12-19T00:00Z">  <!-- 이 ins 요소는 구문 컨텐츠만 포함하므로 구문 컨텐츠입니다. -->
                                       <!-- 문단에는 영향이 없습니다. -->
    배도 맛있습니다.
   </ins>
  </p>                                 <!-- 아래에서 섹션이 명시적으로 종료하므로 암시적인 문단을 닫습니다. -->
</aside>돌아가기