HTML에서는 spellcheck 속성을 사용하여 간단하게 맞춤법 검사 기능을 추가할 수 있습니다. 이 속성은 입력 요소(input), <textarea> 요소, 그리고 contenteditable 속성이 적용된 편집 가능한 요소 내의 텍스트에 대해 맞춤법과 문법을 검사합니다.
spellcheck 속성 사용 시 주의사항
spellcheck 속성은 일반적인 input 요소에는 정상적으로 작동하지만, 비밀번호 입력 필드(type="password")에는 적용되지 않습니다. 이는 보안상의 이유로 비밀번호 필드의 내용은 브라우저가 검사하지 않기 때문입니다.
예제 코드
아래 코드를 실행하면 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")를 입력하면, 브라우저가 해당 단어에 빨간색 밑줄을 표시하여 오류를 알려줍니다.
spellcheck 속성 값은 다음과 같이 설정할 수 있습니다.
- true: 해당 요소에 맞춤법 검사를 활성화합니다.
- false: 해당 요소에 맞춤법 검사를 비활성화합니다.
또한 맞춤법 검사 결과는 사용 중인 브라우저와 운영체제의 언어 설정에 따라 달라질 수 있으므로, 다국어 웹사이트를 개발할 때는 lang 속성과 함께 사용하는 것이 좋습니다.