[HTML] contentEditable 속성

contentEditable

HTML 요소의 contenteditable 속성은 요소의 편집 가능 여부를 나타냅니다.

contenteditable 속성은 HTML 요소를 수정 가능한 편집 가능한 요소로 만드는 데 사용됩니다. 

 

열거형 속성으로, 다음 중 하나의 값을 가질 수 있습니다.

'true' :  요소가 contenteditable임을 의미합니다.
'false'  : 요소를 편집할 수 없음을 의미합니다.
'inherit'  : 요소가 부모의 편집 가능 여부를 상속함을 의미합니다. (기본값)

 

contenteditable 속성을 사용하면 사용자가 직접 HTML 요소 내부의 텍스트, 이미지 및 기타 콘텐츠를 편집할 수 있습니다. 이것은 특히 CMS (컨텐츠 관리 시스템) 및 블로그 등의 웹 애플리케이션에서 유용합니다.

예를 들어, 다음과 같은 코드는 <div> 요소를 편집 가능한 요소로 만듭니다.

<div contenteditable="true">
  이 부분은 사용자가 편집할 수 있는 부분입니다.
</div>

이 속성을 사용할 때 주의할 점은 보안 문제가 있을 수 있다는 것입니다. 

사용자가 입력한 콘텐츠를 검증하지 않고 서버에 저장하면, 크로스 사이트 스크립팅 (XSS) 공격 등의 보안 문제가 발생할 수 있습니다. 따라서 서버 측에서 콘텐츠를 검증하고 이스케이프 처리하는 것이 좋습니다.

 

contenteditable 속성은 div뿐만 아니라, 모든 HTML 요소에서 사용할 수 있습니다.

일반적으로 contenteditable 속성을 가진 요소는

 <div>, <p>, <section>, <article>, <h1> ~ <h6>, <pre>, <blockquote>, <td> 및 <th> 등입니다.

하지만, input 요소나 textarea 같이 이미 사용자 입력을 받는 폼 요소에 대해서는 

contenteditable 속성을 사용하지 않습니다.

 

또한, contenteditable 속성은 일부 브라우저에서 지원하지 않는 경우가 있으며, 특히 모바일 기기에서는 일부 제약이 있을 수 있습니다. 따라서 웹 애플리케이션을 개발할 때, 브라우저 호환성과 모바일 지원에 대해 고려해야 합니다.

 

 

.html() 메서드를 사용하여 contenteditable 속성을 가진 요소 변경 예시

html :

<div id="editable" contenteditable>
  <p>Hello, <strong>world!</strong></p>
</div>

jquery :

// #editable 요소의 내부 HTML 코드를 변경합니다.
$('#editable').html('<p>안녕하세요, <strong>세계</strong>!</p>');

위 코드는 $('#editable')를 사용하여 id 속성이 "editable"인 요소를 선택하고,

jquery의 .html() 메서드를 사용하여 요소 내부의 HTML 코드를 "안녕하세요, <strong>세계</strong>!"로 변경합니다.

 이때, contenteditable 속성을 가진 요소의 내부 HTML 콘텐츠를 변경할 수 있기 때문에, 

변경된 HTML 코드가 화면에 반영됩니다.