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 코드가 화면에 반영됩니다.
