contenteditable 속성의 정의 및 사용법

contenteditable 속성은
요소의 콘텐츠를 편집할 수 있는지 여부를 지정합니다. 이 속성은 true로 설정하면 요소의 콘텐츠를 편집할 수 있고 false로 설정하면 편집할 수 없습니다.

HTML 
<div contenteditable="true" style="padding: 15px; background: #eee; border-radius: 5px;">
    이 내용을 직접 편집해 보세요.
</div>
브라우저에서 실제 표시된 모습 직접 내용을 편집해 볼 수 있습니다.

contenteditable 속성의 사용법

contenteditable 속성은 HTML 요소의 전역(글로벌) 속성 중 하나로, 사용자가 해당 요소 내부의 텍스트나 콘텐츠를 직접 편집할 수 있도록 해주는 속성입니다.

이를 통해 웹 페이지에서 간단한 텍스트 편집을 가능하게 할 수 있습니다. 자바스크립트를 같이 사용하면 인라인 텍스트 편집기도 제작할 수 있습니다.

구문

HTML 
<element contenteditable="true|false">

속성 값

contenteditable 속성 값
true 요소의 콘텐츠를 사용자가 편집할 수 있는 상태로 만듭니다. 사용자가 클릭하거나 포커스를 받으면 텍스트를 수정할 수 있게 됩니다.
"" 빈 문자열일 경우 true 값과 동일합니다.
false 요소의 콘텐츠를 사용자가 편집할 수 없는 상태로 만듭니다. 즉, 요소 내부의 텍스트나 콘텐츠를 클릭하거나 수정할 수 없습니다.
inherit 이 값은 상위 요소의 contenteditable 값에 의존합니다. 상위 요소에서 상속받은 값에 따라 요소의 편집 가능 여부가 결정됩니다.

주의할 점

위 값을 보면 알 수 있듯이 contenteditable 속성은 불리언 타입의 속성이 아닙니다. 열거형 타입 속성입니다.

참조하세요! 불리언 타입의 속성은 속성만 마크업하면 값이 true가 되고 그렇지 않을 경우 false 값이 되는 속성을 말하며, 열거형 타입의 속성은 속성에 값을 명시적으로 지정해야 하는 속성을 의미합니다.

값이 없을 경우에는 빈 문자열("")로 간주합니다. 아래의 예제를 통해 확인할 수 있습니다.

HTML 
<div contenteditable style="padding: 15px; background: #eee; border-radius: 5px;">
    이 내용을 직접 편집해 보세요.
</div>
브라우저에서 실제 표시된 모습 값이 없을 경우에는 빈 문자열("")로 간주합니다. 빈 문자열일 경우 true 값과 동일합니다.

contenteditable 속성이 적용되지 않는 요소

HTML에서 다음과 같은 전통적인 사용자가 직접 입력하는 요소들은 고유한 기능이 있어 contenteditable 속성이 적용되지 않습니다.

  • <input>
  • <textarea>

브라우저 호환성

contenteditable 속성에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
contenteditable 4 12 3 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

contenteditable 속성에 대한 명세서 사양
명세서 사양
contenteditable HTML Standard
#attr-contenteditable

참고문헌

같이 보기