부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker

부트스트랩 4.3으로 업그레이드한 날짜 선택 폼: 새로운 스타일링과 이슈 해결 방법

소개

부트스트랩은 웹 개발자들에게 많은 편의성을 제공하는데, 그중에서도 드롭다운이나 날짜 선택과 같은 기능을 쉽게 구현할 수 있는 장점이 있습니다. 그러나 부트스트랩 4.3으로 업그레이드하면서, 기존에 작성한 스타일이 흐트러지는 문제가 발생합니다. 특히, datepicker와 같은 컴포넌트의 스타일링은 이슈가 되곤 합니다. 이에 따라 해결 방법을 살펴보도록 하겠습니다.

업그레이드로 생긴 스타일 변화

부트스트랩 4.3으로 업그레이드하면서 기존의 스타일이 변경되는 현상이 나타납니다. 특히, datepicker 컴포넌트의 스타일은 최악으로 변하곤 합니다. 또한 부트스트랩 4.3에서는 글리피콘을 더 이상 지원하지 않아서, 기존의 부트스트랩 데이터 피커를 그대로 사용한다면 스타일링에 문제가 발생할 수 있습니다.

문제 해결 방법: 클래스명 변경과 이미지 캘린더 적용

이러한 문제를 해결하기 위해 클래스명을 변경하고 이미지 캘린더를 적용하는 방법을 소개하겠습니다. 아래는 HTML 마크업 예시입니다.

<li class="datePicker2">
  <span class="input-group date">
    <input type="text" class="form-control">
    <span class="input-group-append">
      <span class="input-group-text">
        <i class="datePicker-calendar"></i>
      </span>
    </span>
  </span>
</li>

여기서 변경된 점은 input-group-addon 대신 input-group-append를 사용한 것입니다. 또한 캘린더 아이콘이 뿌려지는 <i> 태그에서는 글리피콘 대신 :before 선택자를 이용해 이미지 캘린더를 적용하였습니다.

CSS 스타일링 수정

아래는 적용된 CSS 스타일링 수정 내용입니다.

.input-group-addon, .input-group-text {
  border-left: 0 none;
  padding: 4px 9px 4px 9px;
}

.input-group-addon .glyphicon-calendar:before, .input-group-text .datePicker-calendar:before {
  content: " ";
  background: url(/assets/images/buttons/btn_calendar.png) center center no-repeat;
  width: 18px;
  height: 18px;
  display: block;
  overflow: hidden;
}

여기서 주목해야 할 부분은 백그라운드 이미지를 활용한 달력 이미지를 넣어준 부분입니다. 나머지 스타일은 사이트 전반적인 스타일에 맞게 수정한 내용입니다.

마무리

부트스트랩 4.3으로 업그레이드하면서 날짜 선택 폼의 스타일링 이슈가 발생할 수 있습니다. 이를 해결하기 위해 클래스명을 변경하고 이미지 캘린더를 적용하는 방법을 소개하였습니다. 이러한 조치를 통해 기존의 스타일을 유지하면서도 업그레이드된 버전의 부트스트랩을 사용할 수 있습니다.

포스트 요약

부트스트랩 4.3으로 업그레이드하면 스타일링 이슈가 발생할 수 있습니다.
datepicker와 같은 컴포넌트의 스타일을 유지하고자 할 때 클래스명 변경과 이미지 캘린더 적용이 필요합니다.
CSS 스타일링을 적절히 수정하여 원하는 스타일을 구현할 수 있습니다.

이상으로, 부트스트랩 4.3으로 업그레이드한 날짜 선택 폼에 대한 포스팅을 마치겠습니다. 더 많은 정보와 팁을 원하신다면 언제든지 문의해주시기 바랍니다.

html5css2018

이 블로그 검색