HTML에서 요소의 철자와 문법 검사 여부를 지정하려면 spellcheck 속성을 사용합니다. 이 속성은 <input> 요소, <textarea> 요소, 그리고 contenteditable 속성으로 편집 가능하게 만든 요소 안의 텍스트에 대해 철자와 문법을 검사합니다.
참고: spellcheck 속성은 일반 텍스트 입력 필드에는 적용되지만, 비밀번호(password) 입력 필드에는 작동하지 않습니다.
spellcheck 속성의 기본 동작
spellcheck 속성 값은 다음과 같이 설정할 수 있습니다.
- true — 해당 요소의 철자·문법 검사를 활성화합니다.
- false — 해당 요소의 철자·문법 검사를 비활성화합니다.
예제
아래 코드를 실행하면 HTML에서 맞춤법 검사기가 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html> <html> <body> Subject : <input type = "text" name = "sub" spellcheck = "true"> <p>위 입력란에 일부러 틀린 철자의 단어를 입력해 보세요.</p> <p contenteditable = "true" spellcheck = "true">This is an editable conttent, with a spelling mistake. Click to edit.</p> </body> </html>
위 예제에서 입력 필드와 편집 가능한 단락 모두 spellcheck 속성이 true로 설정되어 있습니다. 영어 문장에 일부러 포함된 오타("conttent")처럼 잘못된 철자를 입력하면 브라우저가 빨간 밑줄로 오류를 표시해 줍니다.