HTML에서 contenteditable 속성을 사용하면 특정 요소의 내용을 사용자가 직접 편집할 수 있도록 설정할 수 있습니다. 이 속성은 값으로 true(편집 가능), false(편집 불가), inherit(부모 요소로부터 상속)를 가질 수 있습니다.
예제
다음 코드를 실행하면 contenteditable 속성이 어떻게 동작하는지 확인할 수 있습니다. 첫 번째 문단을 클릭한 후 커서를 두고 텍스트를 수정해 보세요.
<!DOCTYPE html> <html> <body> <p contenteditable = "true">이 내용은 편집할 수 있습니다. 직접 수정해 보세요.</p> <p>이것은 일반 문단입니다. 편집할 수 없습니다.</p> </body> </html>
위 예제에서 contenteditable="true"가 적용된 첫 번째 문단은 브라우저에서 바로 내용을 수정할 수 있지만, 속성이 없는 두 번째 문단은 일반적인 정적 콘텐츠처럼 동작합니다. 이 속성은 별도의 JavaScript 없이 간단하게 인라인 편집 기능을 구현할 때 유용합니다.