HTML의 contenteditable 속성은 웹 페이지의 콘텐츠를 사용자가 직접 수정할 수 있도록 설정하는 기능입니다. 불리언 값인 true 또는 false로 편집 가능 여부를 지정하며, 전역 속성(Global Attribute)에 해당하기 때문에 모든 HTML 요소에 적용할 수 있다는 것이 큰 장점입니다.
contenteditable 속성의 기본 문법
사용 방법은 매우 간단합니다. 다음과 같이 요소에 속성을 추가하고 값을 지정하면 됩니다.
<element contenteditable="true|false">
요소를 편집 가능하게 만들고 싶다면 true, 읽기 전용으로 유지하고 싶다면 false를 설정합니다.
contenteditable 속성 사용 예제
실제로 heading 요소와 문단 요소에 contenteditable 속성을 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2 contenteditable="true">Demo Heading</h2>
<p contenteditable="true">This is a demo line.</p>
</body>
</html>실행 결과
위 코드를 실행하면 제목(h2)과 문단(p) 요소가 화면에 표시되며, 두 요소 모두 클릭하여 내용을 직접 수정할 수 있는 상태가 됩니다.
브라우저에서 해당 텍스트 영역을 클릭한 뒤 입력하면, 일반 텍스트 편집기처럼 제목과 본문 내용을 자유롭게 변경할 수 있습니다.
예제 코드 분석
위 예제에서는 h2 요소와 p 요소에 각각 contenteditable 속성을 설정했습니다.
<h2 contenteditable="true">Demo Heading</h2> <p contenteditable="true">This is a demo line.</p>
속성값을 true로 지정하면 해당 요소는 웹 페이지 자체에서 바로 편집이 가능해집니다. 이처럼 contenteditable 속성을 활용하면 별도의 에디터 라이브러리 없이도 간단한 인라인 편집 기능을 구현할 수 있어, 메모 앱이나 실시간 콘텐츠 수정 UI를 만들 때 유용하게 활용됩니다.