HTML contenteditable 속성

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

 

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다.

 

contenteditable 속성은 HTML 요소의 글로벌 속성 중 하나로, 사용자가 해당 요소 내부의 텍스트나 콘텐츠를 직접 편집할 수 있도록 해주는 속성입니다. 이 속성을 사용하면 웹 페이지에서 간단한 텍스트 편집을 가능하게 할 수 있습니다. 자바스크립트를 같이 사용하면 인라인 텍스트 편집기도 제작할 수 있습니다.

 

예제

<div contenteditable="true" style="padding: 15px; background: #eee; border-radius: 5px;">
    이 내용을 직접 편집해 보세요.
</div>

 

구문

<element contenteditable="true|false|plaintext-only">

 

속성 값

• true: 요소의 콘텐츠를 사용자가 편집할 수 있는 상태로 만듭니다. 사용자가 클릭하거나 포커스를 받으면 텍스트를 수정할 수 있게 됩니다.
• "": 빈 문자열일 경우 true 값과 동일합니다.
• false: 요소의 콘텐츠를 사용자가 편집할 수 없는 상태로 만듭니다. 즉, 요소 내부의 텍스트나 콘텐츠를 클릭하거나 수정할 수 없습니다.
• plaintext-only: 일반적인 텍스트로만 편집 가능합니다. HTML 태그나 CSS 및 자바스크립트 코드 등의 서식이 적용되지 않습니다.

contenteditable="true" vs. contenteditable="plaintext-only"

contenteditable="true"는 복사한 텍스트의 서식이 유지되는 반면에 contenteditable="plaintext-only"는 복사한 텍스트의 서식이 유지되지 않습니다.

 

주의할 점

위 값을 보면 알 수 있듯이 contenteditable 속성은 부울 속성(Boolean attribute)이 아닙니다. 열거형 타입 속성입니다.

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

 

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

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

 

• <input>
• <textarea>

 

그 밖에 참고한 문헌

https://codingeverybody.jp/html-contenteditable-attribute/

HTML contenteditable属性：HTML要素を編集可能にする - codingEverybody

 

https://coding.courses/html-contenteditable-attribute/

HTML contenteditable Attribute – Making HTML Elements Editable - codingCourses