크롬 브라우저에서 그누보드 비밀번호 입력란이 보이지 않는 문제 해결 방법

• 목록
• 스크랩

크롬 브라우저에서 그누보드 비밀번호 입력란이 보이지 않는 문제 해결 방법

그누보드 사이트 운영 시 크롬 브라우저에서 비밀번호 입력란의 마스킹(●●●●) 문자가 공백으로 표시되는 원인과 CSS 수정 및 캐시 삭제를 통한 해결 방법을 확인합니다.

크롬 브라우저 비밀번호 입력란 공백 현상의 원인

크롬 브라우저에서 비밀번호 입력란에 문자를 입력해도 마스킹 처리(●●●●)가 보이지 않고 공백으로 나타나는 현상은, 웹사이트 전체에 적용된 특정 폰트(예: 나눔 스퀘어)와 비밀번호 입력 필드(input type='password') 간의 렌더링 충돌로 인해 발생합니다.

해당 현상은 특정 폰트 사용 시 발생하는 것으로 알려져 있으나, 모든 폰트에서 발생하는지 혹은 특정 폰트 자체의 버그인지에 대한 상세 정보는 제한적입니다.

비밀번호 입력란 폰트 문제 해결을 위한 CSS 코드 적용 방법

크롬 브라우저에서 나눔 스퀘어(Nanum Square)와 같은 특정 폰트를 웹사이트 전체에 적용했을 때 비밀번호 입력란(input type='password')의 렌더링 충돌로 마스킹 처리가 보이지 않고 공백으로 출력되는 현상이 발생할 수 있습니다. 이를 해결하려면 비밀번호 입력 필드에만 별도의 폰트 패밀리를 지정하는 CSS 코드를 적용해야 합니다.

적용할 CSS 코드

사용 중인 테마의 CSS 파일(예: /theme/테마명/css/default.css 등)에 아래 코드를 추가하여 비밀번호 입력란에 적용된 폰트를 변경합니다.

input[type="password"] {
  font-family: sans-serif !important;
}

적용 후 확인 방법

CSS 코드를 적용한 뒤에는 브라우저 캐시를 삭제하거나 강력 새로고침(Ctrl + F5)을 수행하여, 비밀번호 입력란에 문자를 입력했을 때 마스킹 처리(●●●●)가 정상적으로 나타나는지 확인합니다.

복구 및 주의사항

폰트 변경 후 의도치 않은 디자인 변화가 발생한다면, 수정했던 CSS 코드를 삭제하거나 이전 상태로 되돌린 후 다른 폰트를 적용해 보시기 바랍니다. 이 현상은 특정 폰트 사용 시 발생하는 것으로 알려져 있으나 모든 폰트에서 발생하는지 혹은 특정 폰트의 버그인지에 대한 상세 정보는 제한적입니다.

CSS 수정 후 반영 확인 방법

CSS 파일을 수정한 뒤 변경 사항이 즉시 반영되지 않을 때는 브라우저 캐시를 삭제하거나 강력 새로고침(Ctrl + F5)을 수행하여 비밀번호 입력란에 문자가 정상적으로 마스킹(●●●●) 처리되는지 확인해야 합니다.

폰트 변경 후 디자인 문제 복구 방법

비밀번호 입력란의 폰트를 변경한 뒤 의도치 않은 디자인 변화가 발생한다면 다음 절차에 따라 복구할 수 있습니다.

복구 절차

1. 수정했던 CSS 코드를 삭제하거나 이전 상태로 되돌립니다.
2. 다른 대체 폰트를 적용하여 디자인 부작용을 해결합니다.

주의사항

특정 폰트 사용 시 발생하는 현상으로 알려져 있으나, 모든 폰트에서 발생하는지 또는 특정 폰트의 버그인지에 대한 상세 정보는 제한적입니다.

함께 보면 좋은 글

• 크롬 브라우저에서 영문 자간이 불규칙하게 벌어지는 현상 해결하기
• 그누보드4 브라우저 종료 시 자동 로그아웃 설정 방법
• 그누보드 비밀글 열람 시 매번 비밀번호 입력 강제 설정

참고자료

기타 참고자료

• mercury-seed.com — 크롬 브라우저에서 비밀번호 입력란이 보이지 않는 문제 해결