HTML DOM designMode 속성 – 문서 전체를 편집 가능하게 만드는 방법

HTML DOM의 designMode 속성은 문서 전체를 편집할 수 있는지 여부를 지정하는 기능입니다. 이 속성을 활성화하면 HTML 문서가 WYSIWYG(What You See Is Is What You Get, 위지윅) 편집기처럼 동작하여, 브라우저에서 직접 문서의 내용을 수정할 수 있습니다. designMode 속성의 기본값은 "off"이며, 이 값을 "on"으로 변경하면 문서 편집이 가능해집니다.

구문(Syntax)

designMode 속성을 설정하는 구문은 다음과 같습니다.

document.designMode = "on|off"

여기서 "off"는 기본값이며, "on"으로 설정하면 문서를 자유롭게 편집할 수 있습니다.

예제(Example)

HTML DOM designMode 속성의 실제 사용 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Document designMode Property</h1>
<p> This is a paragraph with some text</p>
<button type="button">BUTTON1</button>
<script>
    document.designMode="on";
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM designMode 속성 – 문서 전체를 편집 가능하게 만드는 방법

문서를 편집한 후의 모습입니다.

HTML DOM designMode 속성 – 문서 전체를 편집 가능하게 만드는 방법

예제 분석

위 예제에서 수행한 작업을 단계별로 살펴보겠습니다.

먼저 <h1> 요소, <p> 요소, 그리고 <button> 요소 등 여러 HTML 요소를 생성했습니다.

<h1>Document designMode Property</h1>
<p> This is a paragraph with some text</p>
<button type="button">BUTTON1</button>

그다음 document.designMode를 "on"으로 설정하여 HTML 문서 전체를 편집할 수 있는 상태로 만들었습니다. 이제 텍스트를 자유롭게 변경할 수 있으며, 요소의 텍스트를 모두 지워 해당 요소 자체를 제거하는 것도 가능합니다.

예를 들어 버튼의 텍스트를 삭제하면 버튼 자체도 화면에서 사라지게 됩니다.

<script>
document.designMode="on";
</script>

참고: designMode와 contenteditable의 차이

designMode는 문서 전체에 일괄 적용되는 반면, contenteditable 속성은 특정 요소 단위로 편집 가능 여부를 지정합니다. 또한 designMode는 주로 iframe 내부 문서에 적용되어 웹 기반 리치 텍스트 에디터를 구현하는 데 널리 활용됩니다. 간단한 편집 기능이 필요하다면 contenteditable, 문서 전체를 편집 대상으로 삼아야 한다면 designMode를 사용하는 것이 좋습니다.