contenteditable 속성이란?
HTML에서 contenteditable 속성을 사용하면 특정 요소의 내용을 사용자가 브라우저에서 직접 편집할 수 있도록 만들 수 있습니다. 이 속성은 별도의 JavaScript 없이도 간단히 적용할 수 있어, 메모 앱이나 실시간 텍스트 편집 기능을 구현할 때 유용하게 활용됩니다.
속성 값
contenteditable 속성은 다음 세 가지 값을 가질 수 있습니다.
- true – 해당 요소의 내용을 편집할 수 있습니다.
- false – 해당 요소의 내용을 편집할 수 없습니다.
- inherit – 부모 요소의 편집 가능 여부를 상속받습니다. (기본값)
예제
다음 코드를 실행하면 contenteditable 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 편집 가능한 문단 안에 커서를 클릭한 후 텍스트를 입력해 보세요. 아래쪽 일반 문단은 편집되지 않는 것과 대조됩니다.
<!DOCTYPE html> <html> <body> <p contenteditable = "true">이 내용은 편집할 수 있습니다. 직접 수정해 보세요.</p> <p>이것은 일반적인 문단입니다. 편집할 수 없습니다.</p> </body> </html>
활용 팁
contenteditable 속성은 CSS와 함께 사용하면 더욱 직관적인 편집 환경을 제공할 수 있습니다. 예를 들어, 편집 가능한 영역에 :focus 스타일을 적용해 테두리나 배경색을 표시하면 사용자가 어디를 수정할 수 있는지 한눈에 파악할 수 있습니다. 또한 input 이벤트와 조합하면 사용자가 입력하는 내용을 실시간으로 감지하여 저장하거나 처리하는 기능도 구현할 수 있습니다.