path: root/files/ko/web/api/document/execcommand/index.html

---
title: Document.execCommand()
slug: Web/API/Document/execCommand
translation_of: Web/API/Document/execCommand
---
<div>{{ApiRef("DOM")}}</div>

<p>HTML 문서가 <code>designMode</code>로 전환되면 문서에서 <code>execCommand</code> 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영향(<em>볼드, 이탤릭 등</em>)을 미치고 나머지는 새 요소를 추가(링크 추가)하거나 전체 줄에 영향(들여쓰기)을 미칩니다. <code>contentEditable</code>을 사용할 때에 <code>execCommand()</code>를 호출하면 현재 활성화된 편집 요소에 영향을 미칩니다.</p>

<h2 id="문법">문법</h2>

<pre class="syntaxbox"><em>bool</em> = document.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>)
</pre>

<h3 id="반환값">반환값</h3>

<p>명령어가 지원되지 않거나 활성화되어 있지 않으면 <code>false</code> {{jsxref('Boolean')}} 값을 반환합니다.</p>

<h3 id="매개_변수">매개 변수</h3>

<dl>
 <dt><code>aCommandName</code></dt>
 <dd>실행해야할 명령어 이름 {{domxref("DOMString")}}을 나타냅니다. 사용 가능한 명령어 목록은 {{anch("Commands")}}를 참고하세요.</dd>
 <dt><code>aShowDefaultUI</code></dt>
 <dd>기본 사용자 UI가 나타나야하는지를 보여주는 {{jsxref("Boolean")}} 값입니다. Mozilla에서는 구현되어 있지 않습니다.</dd>
 <dt><code>aValueArgument</code></dt>
 <dd>입력 변수가 필요한 명령어(<code>insertImage</code>와 같이 삽입할 이미지의 URL이 필요한)의 경우 이 {{domxref("DOMString")}}으로 정보를 전달합니다. 변수가 필요하지 않으면 <code>null</code>을 표기합니다.</dd>
</dl>

<h3 id="명령어">명령어</h3>

<dl>
 <dt><code>backColor</code></dt>
 <dd>문서의 배경색을 변경합니다. <code>styleWithCss</code> 모드에서는 대신 상위 요소의 배경색에 영향을 미칩니다. 변수 값으로 {{cssxref("&lt;color&gt;")}} 값을 넘겨야 합니다. Internet Explorer는 이 명령어를 텍스트 배경색을 변경하는데 사용합니다.</dd>
 <dt><code>bold</code></dt>
 <dd>선택 영역이나 입력 위치에 볼드를 온/오프합니다. Internet Explorer는 {{HTMLElement("b")}} 대신 {{HTMLElement("strong")}} 태그를 사용합니다.</dd>
 <dt><code>contentReadOnly</code></dt>
 <dd>내용 문서를 읽기 전용으로 하거나 편집 가능하게 합니다. boolean true/false 값을 변수로 넘겨주어야 합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
 <dt><code>copy</code></dt>
 <dd>클립보드에 현재 선택 영역의 내용을 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.</dd>
 <dt><code>createLink</code></dt>
 <dd>선택 영역이 있을 때 선택 영역에 링크 요소를 만듭니다. 변수 값으로 HREF URI 문자열이 필요합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)</dd>
 <dt><code>cut</code></dt>
 <dd>현재 선택 영역을 잘라내어서 클립보드에 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.</dd>
 <dt><code>decreaseFontSize</code></dt>
 <dd>선택 영역이나 입력 위치에 {{HTMLElement("small")}} 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
 <dt><code>delete</code></dt>
 <dd>현재 선택 영역을 지웁니다.</dd>
 <dt><code>enableInlineTableEditing</code></dt>
 <dd>표의 행과 열을 추가 삭제하는 명령 도구를 활성화하거나 비활성화합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
 <dt><code>enableObjectResizing</code></dt>
 <dd>이미지나 다른 크기 조정이 가능한 객체의 크기 조정 도구를 활성화하거나 비활성화합니다.</dd>
 <dt><code>fontName</code></dt>
 <dd>선택 영역이나 입력 위치의 서체 이름을 변경합니다. 변수 값으로 서체 이름 문자열(<code>예를 드러 "Arial"</code>)을 넘겨야 합니다.</dd>
 <dt><code>fontSize</code></dt>
 <dd>선택 영역이나 입력 위치의 서체 크기를 변경합니다. 변수 값으로 HTML 서체 크기(<code>1</code>-<code>7</code>)을 넘겨야 합니다.</dd>
 <dt><code>foreColor</code></dt>
 <dd>선택 영역이나 입력 위치의 서체 색상을 변경합니다. 변수 값으로 색상 값 문자열을 넘겨야 합니다.</dd>
 <dt><code>formatBlock</code></dt>
 <dd>현재 선택 영역이 있는 줄을 포함하는 HTML 요소를 추가하고 줄을 포함하는 요소가 있을 경우 요소을 변경합니다(Firefox에서는 BLOCKQUOTE가 예외적으로 상위 요소를 감쌉니다). 변수 값으로 태그 이름 문자열을 넘겨야 합니다. 실질적으로 모든 블록 요소를 사용할 수 있습니다(예 "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer는 제목 태그  H1 - H6와 ADDRESS, PRE만 지원하고 태그 구분자 &lt; &gt;를 써서 "&lt;H1&gt;"와 같이 사용해야 합니다.)</dd>
 <dt><code>forwardDelete</code></dt>
 <dd><a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29">커서</a> 위치 앞의 글자를 지웁니다. delete 키를 누른 것과 동일합니다.</dd>
 <dt><code>heading</code></dt>
 <dd>선택 영역이나 입력 위치 줄에 제목 태그를 추가합니다. 변수 값으로 제목 이름 문자열(예 "H1", "H6")을 넘겨야 합니다. (Internet Explorer와 Safari는 지원하지 않습니다.)</dd>
 <dt><code>hiliteColor</code></dt>
 <dd>선택 영역이나 입력 위치의 배경 색상을 변경합니다. 변수 값으로 생상 값 문자열을 넘겨야 합니다. 이 함수는 UseCSS가 반드시 켜져 있어야 합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
 <dt><code>increaseFontSize</code></dt>
 <dd>선택 영역이나 입력 위치에 BIG 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
 <dt><code>indent</code></dt>
 <dd>선택 영역이나 입력 위치를 포함하는 줄을 들여쓰기 합니다. Firefox에서는 선택 영역이 여러줄에 걸처 서로 다른 들여쓰기 값을 가지고 있으면 제일 조금 들여쓰기된 줄만 들여쓰기가 됩니다.</dd>
 <dt><code>insertBrOnReturn</code></dt>
 <dd>엔터키를 눌렀을 때 br 태그를 넣을지 현재의 블록 요소를 두개로 나줄지 제어합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
 <dt><code>insertHorizontalRule</code></dt>
 <dd>입력 위치에 가로줄을 넣습니다(선택 영역은 지워집니다).</dd>
 <dt><code>insertHTML</code></dt>
 <dd>입력 위치에 HTML 문자열을 넣습니다(선택 영역을 지워집니다). 변수 값으로 유효한 HTML 문자열을 넘겨야 합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
 <dt><code>insertImage</code></dt>
 <dd>입력 위치에 이미지를 넣습니다(선택 영역을 지워집니다). 변수 값으로 이미지의 SRC URI 문자열을 넘겨야 합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)</dd>
 <dt><code>insertOrderedList</code></dt>
 <dd>선택 영역이나 입력 위치에 번호 순서가 있는 목록을 넣습니다.</dd>
 <dt><code>insertUnorderedList</code></dt>
 <dd>선택 영역이나 입력 위치에 번호 순서가 없는 목록을 넣습니다.</dd>
 <dt><code>insertParagraph</code></dt>
 <dd>선택 영역이나 현재 줄에 문단 태그를 추가합니다. (Internet Explorer는 입력 위치에 문단을 삽입하고 선택 영역은 삭제합니다.)</dd>
 <dt><code>insertText</code></dt>
 <dd>입력 위치에 지정된 텍스트를 입력합니다(선택 영역은 지워집니다).</dd>
 <dt><code>italic</code></dt>
 <dd>선택 영역이나 입력 위치에 이탤릭을 온/오프합니다. (Internet Explorer는 I 대신 EM 태그를 사용합니다.)</dd>
 <dt><code>justifyCenter</code></dt>
 <dd>선택 영역이나 입력 위치를 가운데 정렬합니다.</dd>
 <dt><code>justifyFull</code></dt>
 <dd>선택 영역이나 입력 위치를 양쪽 정렬합니다.</dd>
 <dt><code>justifyLeft</code></dt>
 <dd>선택 영역이나 입력 위치를 좌측 정렬합니다.</dd>
 <dt><code>justifyRight</code></dt>
 <dd>선택 영역이나 입력 위치를 우측 정렬합니다.</dd>
 <dt><code>outdent</code></dt>
 <dd>선택 영역이나 입력 위치의 줄을 내어쓰기 합니다.</dd>
 <dt><code>paste</code></dt>
 <dd>입력 위치에 클립보드의 내용을 붙여넣기 합니다(현재의 선택 영역을 교체합니다). user.js 설정 파일에서 클립보드가 활성화 되어 있어야 합니다. 참고 [1].</dd>
 <dt><code>redo</code></dt>
 <dd>이전에 실행 취소된 명령을 다시 실행합니다.</dd>
 <dt><code>removeFormat</code></dt>
 <dd>현재 선택 영역의 모든 문서 형식을 제거합니다.</dd>
 <dt><code>selectAll</code></dt>
 <dd>편집 가능 영역의 모든 내용을 선택합니다.</dd>
 <dt><code>strikeThrough</code></dt>
 <dd>선택 영역이나 입력 위치의 가로줄을 온/오프 합니다.</dd>
 <dt><code>subscript</code></dt>
 <dd>선택 영역이나 입력 위치의 아랫첨자를 온/오프 합니다.</dd>
 <dt><code>superscript</code></dt>
 <dd>선택 영역이나 입력 위치의 윗첨자를 온/오프 합니다.</dd>
 <dt><code>underline</code></dt>
 <dd>선택 영역이나 입력 위치의 밑줄을 온/오프 합니다.</dd>
 <dt><code>undo</code></dt>
 <dd>직전에 실행된 명령을 취소합니다.</dd>
 <dt><code>unlink</code></dt>
 <dd>선택된 링크에서 링크 태그를 제거합니다.</dd>
 <dt><code>useCSS</code> {{Deprecated_inline}}</dt>
 <dd>생성된 마크업의 HTML 태그나 CSS 사용을 토글합니다. 변수 값으로 boolean true/false 값을 넘겨야 합니다. 주의: 이 값은 논리적으로 반대입니다(CSS를 사용하기 위해서는 false를 HTML을 사용하기 위해서는 true). (Internet Explorer는 지원하지 않습니다.) 이 명령은 더이상 사용하지 않습니다. 대신 <em>styleWithCSS</em> 명령어를 사용하세요.</dd>
 <dt><code>styleWithCSS</code></dt>
 <dd><em>useCSS</em> 명령어를 대체합니다. 변수 값은 예상한대로 작동합니다. 예를 들어서 마크업에서 <em>style</em> 속성을 수정하거나 생성하려면 true를, false는 포매팅 요소를 생성합니다.</dd>
</dl>

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

<p>CodePen의 <a href="http://codepen.io/netsi1964/full/QbLLGW/">how to use</a>를 참고하세요.</p>

<h2 id="명세">명세</h2>

<table class="spectable standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}</td>
   <td>{{Spec2('HTML Editing')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>{{Compat("api.Document.execCommand")}}</p>

<h2 id="참고">참고</h2>

<ul>
 <li>{{domxref("HTMLElement.contentEditable")}}</li>
 <li>{{domxref("document.designMode")}}</li>
 <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
 <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> with bugs related to <code>document.execCommand</code>.{{CompatUnknown}}</li>
</ul>