input 태그 빨간 밑줄 제거

도찌·2022년 3월 3일

🛠 ISSUE

목록 보기

2/4

업무 하면서 마주친 이슈들, 기억하고 기록하고 정리해보자.
※ 해결방법만 빠르게 보고 싶은 사람은 바로 🛠 ISSUE 해결 부터 확인해주세요 (_ _)

ISSUE : input 태그에 텍스트 입력 시 빨간 밑줄 노출

input 빨간 밑줄 예시

위 이슈는 디자이너의 요청으로 확인하게 되었다.
input 태그에 텍스트를 입력할 경우 자동으로 빨간 밑줄이 생기게 된다.

이 이슈를 만나지 않았다면 아마 지금까지 나는 그냥 너무 당연하니까, 밑줄에 대해 생각해보지 않았을 수도 있겠다.
우선 이 밑줄의 정체는 바로 맞춤법 검사 기능이었다.

사실 이 빨간 밑줄이 있든, 없든 나는 큰 상관은 없다고 생각했지만•••
어쨋든 밑줄이 노출되지 않았으면 좋겠다고 하셨으니 이슈를 해결할 방법을 찾아봐야지 !
~~(이게 바로 디자이너와의 생각 차이라는걸가..?! 😅😅)~~

+확실히 빨간색 밑줄이 뜨면 괜히 잘못 적은 것 같긴하다. 닉네임 적는 칸에선 굳이 맞춤법을 칼같이 지킬 필요는 없지않을까 ?
또 디자인적으로 봤을때도 밑줄이 없는게 더 깔끔••• 할•••지도•••?

input 빨간 밑줄 예시

input 태그에 spellcheck="false" 추가해주는 것으로 밑줄이 노출되지 않도록 할 수 있다.
넘나 간-단 😎😎

<div class="box">
  <label for="name">닉네임</label>
  <input type="text" id="name" name="name" placeholder="닉네임을 입력해주세요" spellcheck="false">
</div>

암 온 더 넥스트 레블 😎