files/ko/web/guide/html/content_editable/index.html


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

---
title: Content Editable
slug: Web/Guide/HTML/Content_Editable
tags:
  - HTML
  - HTML5
  - 가이드
  - 고급
  - 예제
  - 웹
  - 필요컨텐트
translation_of: Web/Guide/HTML/Editable_content
---
<p><span class="seoSummary">HTML5 에서는 어떤 엘러먼트라도 수정이 가능하다. 약간의 JavaScript 이벤트 핸들러들을 사용하는 것만로 당신은 웹페이지를 완전하고 빠른 리치-텍스트 에디터로 변형할 수 있다. 이 문서는 이런 기능성에 대하여 대략의 정보를 제공 한다.</span></p>

<h2 id="호환성">호환성</h2>

<p>Content editable 은 현재 브라우저들과 완전히 호환된다.</p>

<ul>
 <li>Firefox 3.5+</li>
 <li>Firefox for Android 19+</li>
 <li>Chrome 4.0+</li>
 <li>Internet Explorer 5.5+ *</li>
 <li>Safari 3.1+</li>
 <li>Opera 9+</li>
 <li>iOS Safari 5.0+</li>
 <li>Android Browser 3.0+</li>
 <li>Opera Mobile 12.1+</li>
 <li>Chrome for Android 25+</li>
</ul>

<p>Opera Mini 는 아직 지원되지 않는다.</p>

<div class="note">
<p>*대부분의 html elements 를 지원 하지 않는다.</p>
</div>

<h2 id="어떻게_작동_하는가">어떻게 작동 하는가?</h2>

<p>{{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} 속성을 HTML element 에서 <code>true</code> 로 설정하라. 이 속성은 대부분의 HTML elements 에 사용될 수 있다.</p>

<h2 id="예제들">예제들</h2>

<p>간단한 예제:</p>

<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div contentEditable="true"&gt;
      This text can be edited by the user.
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt; </pre>

<p>LocalStorage 를 이용한 JavaScript 와 합쳐진 작동 예제를 <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">여기</a>에서 볼 수 있다. 소스는 <a href="http://html5demos.com/contenteditable#view-source">이곳</a>에 있다.</p>

<h2 id="더_보기">더 보기</h2>

<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>

<p><a href="/en/Midas" title="en/Midas">컨텐트와 상호 작용하는 방법 </a> (오래된 IE 스타일 API) 그리고 <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">이곳</a></p>