HTML 맞춤법 검사란?
HTML의 spellcheck 속성은 텍스트 입력 필드에서 사용자가 작성한 내용의 철자 오류나 문법 오류를 자동으로 검사하도록 브라우저에 지시하는 기능입니다. 이 속성은 <textarea>, <input> 태그뿐만 아니라 contenteditable 속성이 적용된 편집 가능한 요소에도 사용할 수 있습니다.
검사가 활성화되면 오류가 있는 단어 아래에 빨간색 물결선이 표시되어, 사용자가 실시간으로 오타를 인지하고 수정할 수 있도록 도와줍니다.
문법(Syntax)
spellcheck 속성의 기본 문법은 다음과 같습니다.
<태그명 spellcheck="true | false">
- true – 해당 요소에서 맞춤법 검사를 활성화합니다.
- false – 해당 요소에서 맞춤법 검사를 비활성화합니다.
예제
다음은 HTML 맞춤법 검사 기능을 textarea에 적용한 예제입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
</style>
<body>
<h1>HTML Spell Check</h1>
<textarea rows="5" cols="20" spellcheck="true" placeholder="Enter your message here"></textarea>
</body>
</html>실행 결과
위 코드를 실행하면 흰색 textarea가 화면에 나타납니다. 이제 의도적으로 철자나 문법 오류가 포함된 문장을 입력해 보세요.
오류가 있는 단어에는 빨간색 밑줄(물결선)이 자동으로 표시됩니다. 이처럼 spellcheck 속성을 활용하면 별도의 JavaScript 코드 없이도 브라우저 자체 기능만으로 간편하게 맞춤법 검사 기능을 구현할 수 있습니다.