인풋에 브라우저에서 제공되는 자동완성기능 때문에, CSS가 깨지는 경우가 있다. 이러한 경우를 방지하기 위해 autoComplete기능을 제거해 보자

<input aucoComplete="off" />
<input aucoComplete="new-password" />

일반적으로 autoComplete ="off" 속성을 주게 되면 더이상 자동완성 기능이 작동 하지 않는 것이 맞지만, 이미 동일한 name속성을 가지고 있는 input의 정보가 session에 저장되어 있는 경우, 여전히 해당 기능을 보여 줄 때가 있다.

이에 대해 mdn에서는 아래의 해결책을 내놓는다.

If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the input element. (출처: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion) 즉, input의 name속성을 다른 값으로 부여해보는 것이었다.

하지만, 내가 만든 input에는 name속성을 따로 지정해준 적이 없었고, 아래 링크에서 답을 찾을 수 있었다. (https://stackoverflow.com/questions/17719174/autocomplete-off-is-not-working-when-the-input-type-is-password-and-make-the)

위에 보이는 것처럼 <input aucoComplete="new-password" /> 을 입력하게 되면, 자동완성기능이 사라지게 된다!