HTML에서는 spellcheck 속성을 사용하여 입력 필드(input)나 텍스트 영역(textarea)의 맞춤법 검사 기능을 손쉽게 제어할 수 있습니다. 이 속성의 값을 false로 설정하면 해당 요소에서 맞춤법 검사가 비활성화되며, true로 설정하면 활성화됩니다.
spellcheck 속성이란?
spellcheck는 HTML의 전역 속성(global attribute)으로, 브라우저가 제공하는 자동 맞춤법·문법 검사 기능을 켜거나 끌 때 사용합니다. 주로 다음과 같은 요소에 적용할 수 있습니다.
<input>(텍스트 계열 입력 필드)<textarea>contenteditable속성이 설정된 편집 가능한 요소
속성 값은 아래 두 가지입니다.
- spellcheck="false" : 해당 요소의 맞춤법 검사를 끕니다.
- spellcheck="true" : 해당 요소의 맞춤법 검사를 켭니다.
예제 코드
다음 예제는 이름 입력 필드에는 맞춤법 검사를 끄고(false), 자기소개 텍스트 영역에는 맞춤법 검사를 켠(true) 상태의 폼입니다.
<!DOCTYPE html> <html> <head> <title>맞춤법 검사 비활성화 예제</title> </head> <body> <h1>맞춤법 검사 비활성화 예제</h1> <form> <p>이름:</p> <input type="text" name="fname" spellcheck="false"> <p>자기소개</p> <textarea name="aboutyou" spellcheck="true"></textarea><br> <input type="submit"> </form> <h2>위 입력 필드에 일부러 틀린 철자를 입력하면 맞춤법 검사가 작동하는 것을 확인할 수 있습니다</h2> </body> </html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
입력 필드에 직접 텍스트를 입력하면, spellcheck="true"가 적용된 텍스트 영역에서는 틀린 철자에 빨간 밑줄이 표시되어 맞춤법 검사가 작동하는 것을 확인할 수 있습니다. 반면 spellcheck="false"가 적용된 이름 입력 필드에서는 아무리 틀린 철자를 입력해도 밑줄이 나타나지 않습니다.
정리
이처럼 spellcheck 속성 하나만으로 요소별로 맞춤법 검사 기능을 세밀하게 제어할 수 있습니다. 이메일 주소, 사용자명, 코드 입력란처럼 맞춤법 검사가 오히려 방해가 되는 필드에는 spellcheck="false"를 지정해 사용자 경험을 개선하는 것이 좋습니다.