datepicker 에서 글씨가 깨져요
본문
datepicker를 적용시키면 위 이미지처럼 년도부분이 글씨가 깨집니다.
문서 인코딩도 다 확인했고
다른 한글을 다 정상적으로 나오는데 왜 년도 다음에 나오는 글씨만 깨질까요?
이부분은 css로도 제어가 안되는거라 그냥 빼고 싶어도 못빼네요
어떻게 해야할까요?
답변 3
js 파일을 따로 불러오셨다면 해당 파일 인코딩이 utf-8로 되어 있나 한번 확인해보세요.
만약 홈페이지가 오래되서 euc-kr이면 euc-kr로 인코딩 해보시고요.
설명하신 상황을 보면 jQuery UI Datepicker 또는 유사한 datepicker 라이브러리에서 년도 선택 드롭다운에 한글이 깨지는 현상으로 보입니다. 일반적으로는 아래 원인들 중 하나일 가능성이 높습니다.
✅ 주요 원인 및 해결 방법
1. 한글 깨짐 원인 - 폰트 문제
년도 뒤에 붙는 텍스트 (예: "년") 가 Unicode로는 잘 전달되고 있지만, 적용된 폰트에서 그 글자가 없거나, 렌더링이 잘 안 되는 경우입니다.
? 대부분 datepicker에서 년도 select box의 option에는 시스템 기본 폰트가 적용되며, 이 경우 웹폰트나 CSS에서 지정한 한글 폰트가 적용되지 않습니다.
해결 방법: select
의 option
에도 한글 폰트 강제 적용
.ui-datepicker select {
font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}
.ui-datepicker select option {
font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}
이 CSS는
!important
로 강제 적용하며,option
태그에도 폰트가 반영되도록 합니다.
2. Datepicker 지역화 설정 확인 ($.datepicker.regional['ko']
)
한국어 설정이 잘못되었거나, 부분적으로만 로드되어 한글이 깨질 수 있습니다.
$.datepicker.setDefaults($.datepicker.regional["ko"]);
그리고
jquery-ui/datepicker-ko.js
파일이 정상적인 UTF-8 인코딩인지도 꼭 확인하세요.
특히 해당 파일이 BOM 없는 UTF-8이 아니면 일부 서버 환경에서 문자 깨짐이 발생할 수 있습니다.
3. 브라우저 또는 OS의 폰트 렌더링 문제
일부 환경 (특히 Windows의 구형 브라우저)에서는 select > option
에 웹폰트가 아예 적용되지 않아 문제가 발생할 수 있습니다. 이럴 경우에는 "년" 같은 텍스트 대신 숫자만 나오게 하도록 설정을 바꾸는 것도 고려해볼 수 있습니다.
// 커스텀하게 년도 포맷 지정 (예: 2025 → 그냥 숫자만)
$("#datepicker").datepicker({
changeYear: true,
yearSuffix: "", // '년' 제거
});
? 가장 추천하는 해결 조합
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
.ui-datepicker select,
.ui-datepicker option {
font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/i18n/datepicker-ko.js"></script>
<script>
$.datepicker.setDefaults($.datepicker.regional["ko"]);
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearSuffix: "년"
});
</script>
chatgpt 답변입니다.
데이트픽커 스크립트 단을 채크해보세요.
문서 인코딩 및 다른 한글은 잘 나오는걸로봐서 문제는 없어 보입니다.
$.datepicker.regional['ko'] = {
closeText: '닫기',
prevText: '이전달',
nextText: '다음달',
currentText: '오늘',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: '주',
dateFormat: 'yy-mm-dd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '년'
};
$.datepicker.setDefaults($.datepicker.regional['ko']);