datepicker 에서 글씨가 깨져요

datepicker 에서 글씨가 깨져요

QA

datepicker 에서 글씨가 깨져요

본문

3034902428_1744348366.3052.jpg

 

datepicker를 적용시키면 위 이미지처럼 년도부분이 글씨가 깨집니다.
문서 인코딩도 다 확인했고

다른 한글을 다 정상적으로 나오는데 왜 년도 다음에 나오는 글씨만 깨질까요?

이부분은 css로도 제어가 안되는거라 그냥 빼고 싶어도 못빼네요

어떻게 해야할까요?

이 질문에 댓글 쓰기 :

답변 3

설명하신 상황을 보면 jQuery UI Datepicker 또는 유사한 datepicker 라이브러리에서 년도 선택 드롭다운에 한글이 깨지는 현상으로 보입니다. 일반적으로는 아래 원인들 중 하나일 가능성이 높습니다.


✅ 주요 원인 및 해결 방법

1. 한글 깨짐 원인 - 폰트 문제

년도 뒤에 붙는 텍스트 (예: "년") 가 Unicode로는 잘 전달되고 있지만, 적용된 폰트에서 그 글자가 없거나, 렌더링이 잘 안 되는 경우입니다.

? 대부분 datepicker에서 년도 select box의 option에는 시스템 기본 폰트가 적용되며, 이 경우 웹폰트나 CSS에서 지정한 한글 폰트가 적용되지 않습니다.

해결 방법: selectoption에도 한글 폰트 강제 적용

.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']);
답변을 작성하시기 전에 로그인 해주세요.
전체 50
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT