정의 및 사용 방법
contenteditable 속성은
요소의 콘텐츠를 편집할 수 있는지 여부를 지정합니다.
이 속성은 true로 설정하면 요소의 콘텐츠를 편집할 수 있고 false로 설정하면 편집할 수 없습니다.
contenteditable 속성은 HTML 요소의 글로벌 속성 중 하나로, 사용자가 해당 요소 내부의 텍스트나 콘텐츠를 직접 편집할 수 있도록 해주는 속성입니다.
이 속성을 사용하면 웹 페이지에서 간단한 텍스트 편집을 가능하게 할 수 있습니다. 자바스크립트를 같이 사용하면 인라인 텍스트 편집기도 제작할 수 있습니다.
기본 예제
구문
속성 값
true |
요소의 콘텐츠를 사용자가 편집할 수 있는 상태로 만듭니다. 사용자가 클릭하거나 포커스를 받으면 텍스트를 수정할 수 있게 됩니다. |
|---|---|
"" |
빈 문자열일 경우 true 값과 동일합니다. |
false |
요소의 콘텐츠를 사용자가 편집할 수 없는 상태로 만듭니다. 즉, 요소 내부의 텍스트나 콘텐츠를 클릭하거나 수정할 수 없습니다. |
plaintext-only |
일반적인 텍스트로만 편집 가능합니다. HTML 태그나 CSS 및 자바스크립트 코드 등의 서식이 적용되지 않습니다. |
contenteditable="true" vs. contenteditable="plaintext-only"
다음 예제는 contenteditable="true"와 contenteditable="plaintext-only"의 차이를 잘 보여줍니다. 아래의 복사할 텍스트를 복사해서 복사한 텍스트를 contenteditable="true"와 contenteditable="plaintext-only"가 설정된 각각의 요소에 붙여 넣어 차이를 확인해 보세요!
contenteditable="true"는 복사한 텍스트의 서식이 유지되는 반면에 contenteditable="plaintext-only"는 복사한 텍스트의 서식이 유지되지 않습니다.
주의할 점
위 값을 보면 알 수 있듯이 contenteditable 속성은 부울 속성(boolean attribute)이 아닙니다. 열거형 타입 속성입니다.
참조하세요!
부울 속성(boolean attribute)은 속성만 마크업하면 값이 true가 되고 그렇지 않을 경우 false 값이 되는 속성을 말하며, 열거형 타입의 속성은 속성에 값을 명시적으로 지정해야 하는 속성을 의미합니다.
값이 없을 경우에는 빈 문자열("")로 간주합니다. 아래의 예제를 통해 확인할 수 있습니다.
contenteditable 속성이 적용되지 않는 요소
HTML에서 다음과 같은 전통적인 사용자가 직접 입력하는 요소들은 고유한 기능이 있어 contenteditable 속성이 적용되지 않습니다.
브라우저 호환성
| 속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
contenteditable
|
1 | 12 | 3 | 4 |
contenteditable="plaintext-only"
|
51 | 12 | 136 | 13.1 |
명세서
| 명세서 사양 | |
|---|---|
contenteditable
|
HTML Standard #attr-contenteditable |