HTML5 날짜 선택기란?
HTML5에서 기본 제공하는 날짜 선택기(Date Picker)는 기존의 자바스크립트 라이브러리와 매우 유사한 방식으로 작동합니다. 사용자가 입력 필드에 포커스를 맞추면 달력이 나타나고, 월과 연도를 이동하면서 원하는 날짜를 손쉽게 선택할 수 있습니다.
별도의 외부 라이브러리를 설치하지 않아도 <input type="date"> 한 줄만으로 달력 UI를 구현할 수 있어 개발 편의성이 크게 향상되었습니다.
날짜 선택기 스타일 변경하기
기본 날짜 입력 필드는 디자인이 단조로울 수 있습니다. 다행히 WebKit 기반 브라우저(Chrome, Safari 등)에서는 전용 CSS 의사 요소(pseudo-element)를 활용해 여백, 배경색, 글자색 등을 자유롭게 커스터마이징할 수 있습니다.
예를 들어, 날짜 입력 필드에 더 넓은 여백을 적용하고 색상 테마를 입히고 싶다면 아래와 같은 코드를 추가하면 됩니다.
::-webkit-datetime-edit { padding: 2em; }
::-webkit-datetime-edit-fields-wrapper { background: green; }
::-webkit-datetime-edit-text { color: blue; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: red; }
::-webkit-datetime-edit-day-field { color: orange; }
::-webkit-datetime-edit-year-field { color: red; }주요 의사 요소 설명
- ::-webkit-datetime-edit — 날짜 편집 영역 전체의 패딩 등 기본 스타일을 지정합니다.
- ::-webkit-datetime-edit-fields-wrapper — 연·월·일 필드를 감싸는 래퍼(wrapper)의 배경색을 설정합니다.
- ::-webkit-datetime-edit-text — 날짜 구분 기호(슬래시, 하이픈 등)의 색상과 간격을 조절합니다.
- ::-webkit-datetime-edit-month-field — '월' 부분의 글자색을 지정합니다.
- ::-webkit-datetime-edit-day-field — '일' 부분의 글자색을 지정합니다.
- ::-webkit-datetime-edit-year-field — '연도' 부분의 글자색을 지정합니다.
적용 예시
<input type="date">
위 코드를 스타일시트에 추가한 후 <input type="date"> 요소를 페이지에 배치하면, 초록색 배경 위에 빨간색 월, 주황색 일, 빨간색 연도가 표시되는 개성 있는 날짜 선택기를 확인할 수 있습니다.
참고 사항
이러한 -webkit- 접두사 의사 요소는 WebKit 및 Blink 엔진 기반 브라우저에서만 동작하며, Firefox 등 일부 브라우저에서는 지원되지 않을 수 있습니다. 따라서 실제 프로젝트에서는 주요 브라우저 호환성을 반드시 테스트하고, 필요에 따라 폴백(fallback) 스타일을 함께 준비하는 것이 좋습니다.