[HTML|CSS] Input type이 password일 때 입력한 password가 보이지 않는 이슈

아래 password 부분을 입력했으나 실제 화면에선 보이지 않음

이번 포스팅에서는 Input type이 password일 때 입력한 password가 보이지 않는 이슈에 대해서 짧게 다루어 보겠습니다.

(본 글은 이전에 업로드 되었던 내용을 좀 더 보기좋게 다듬어 재 업로드 한 글입니다.)

원인

이 현상이 일어나는 환경에서 나눔스퀘어 폰트를 사용하고 있다면, 폰트가 문제의 원인일 수 있습니다.

혹은 나눔스퀘어가 아니더라도 아래에서 서술한 이유와 같은 이유일 수 있습니다.

이런 현상이 발생하는 이유

HTML에서는 input type을 password로 지정하면 입력한 내용은 위와 같이 나름 암호화 되어서 보여집니다.

그런데 문제는 나눔스퀘어에선 위의 기호(●)가 없어 제대로 표기되지 않는 것 입니다.

해결 방법

해결 방법은 단순합니다. 바로 input type이 password 일때만 다른 폰트를 사용하도록 지정 해 주면 됩니다.

Input type이 password 일 경우만 font 변경하기

input[type=password] {
    font-family: "나눔스퀘어가 아닐때 쓸 글꼴";
}

하지만 위와 같이 코드를 변경하게 되면, input의 placeholder에도 나눔 스퀘어 글꼴이 적용되지 않아 원치 않는 결과물이 나오게 됩니다.

placeholder에서는 나눔 스퀘어를 적용하도록 하기

input[type=password] {
    font-family: "나눔스퀘어 아닐때 쓸 글꼴";

    &::placeholder {
        font-family: "NanumSquare";
    }
}

위와 같이 CSS를 수정하게 되면, Input type이 password 일 경우 placeholder를 제외한 내용들이 나눔스퀘어 폰트가 아닌 폰트로 적용되어 보이게 됩니다.

결과

다음과 같이 표현된다면 성공적으로 적용이 완료된 것입니다!