[HTML, CSS] <input type="password"> 시 기호(*)가 보이지 않는 문제 (나눔스퀘어)

🚧 문제 상황

⚙️ 발생한 환경 및 프로그램

`next.js ^16.0.7`

 

 

🎯 문제 상황 정의

로그인에서 `<input type="password">`를 사용하여 비밀번호 UI를 개발할 때,  input 내부의 값이 안 보이는 오류가 발생했다. 

`<input type="text">`일 때는 값이 정상적으로 보였으나 type이 password일 때만 보이지 않았다.

type = password일 때

type = text일 때

 

🔥 발생한 문제 및 에러

password 값이 표시되지 않음

---

🧭 해결방안 및 과정

💼 해결하기 위한 노력 및 시행착오

1️⃣ text의 색상을 변경

→ 여전히 표시되지 않았다.

 

2️⃣ 동일한 문제가 있는지 구글링

→ 구글링을 통해 동일한 문제를 겪은 뒤 해결한 블로그를 발견하였다.

 

💡 근본 원인 파악

본 프로젝트의 font를 나눔스퀘어로 지정했었는데, 나눔스퀘어 폰트에서 기호(*)를 지원하지 않아서 생긴 문제였다.

 

 

💫 최종 해결 방법

`globals.css` (혹은 css를 전역 관리하는 파일)에 아래와 같은 CSS를 코드를 추가하면 된다.

필자는 기본적으로 `:root`에 나눔스퀘어를 미리 정의해서 사용했으므로 아래와 같이 작성하였다.

/* 비밀번호 필드 기본 폰트 강제 변경 */
input[type="password"] {
font-family: "Nanum Gothic", sans-serif !important; // 나눔고딕으로 강제 변경
}

/* 비밀번호 placeholder는 기존과 동일한 폰트 유지 */
input[type="password"]::placeholder {
font-family: var(--font-nanum-square); 	// font-family: 기존에 사용하는 글꼴
}

 

---

👾 결론

해당 문제는 처음 겪어봤던 문제였어서 원인을 파악하는 데 시간이 조금 소요되었다. 다행히 동일한 문제를 겪었던 블로그를 발견해서 이를 기반으로 적용하니 문제를 바로 해결할 수 있었다.

 

---

📚 참고자료

[html, css] <input type="password"> 입력값이 보이지 않을 때

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