contenteditable

contenteditable은 모든 HTML요소에 적용가능한 전역요소로 요소 안에 글을 수정할 수 있게 해 줍니다. 

 

---

index.html

<div contenteditable="true">text</div>
<div contenteditable="">text</div>
<div contenteditable>text</div>

 

위와 같이 설정 시 브라우저에서 아래처럼 수정이 가능합니다.

 

하위 요소는 부모의 editable속성을 물려받습니다. 따라서, 부모가 편집가능 상태이면 자손도 편집이 가능합니다.

<div contenteditable="true">
  <p> child </p>
</div>

 

마무리

이상으로 HTML 전역요소 contenteditable에 대해서 알아보았습니다.

 

 

---

 

참고

contenteditable - HTML: HyperText Markup Language | MDN