diff options
Diffstat (limited to 'files/ko/web/guide/html/content_editable/index.html')
| -rw-r--r-- | files/ko/web/guide/html/content_editable/index.html | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/files/ko/web/guide/html/content_editable/index.html b/files/ko/web/guide/html/content_editable/index.html new file mode 100644 index 0000000000..2e039ea976 --- /dev/null +++ b/files/ko/web/guide/html/content_editable/index.html @@ -0,0 +1,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><!DOCTYPE html> +<html> + <body> + <div contentEditable="true"> + This text can be edited by the user. + </div> + </body> +</html> </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> |