반응형

WEB 3

[jQuery] 날짜 선택을 좀 더 쉽게 Datepicker

웹 화면에서 날짜 선택을 위한 캘린더를 구현하는 것은 매우 번거로운 일입니다. 때문에 API를 쓰는 경우가 많은데요, jQuery UI에서는 보통 이런 기능을 기본으로 제공하기 때문에 script에 jquery를 import 했다면, 그냥 datepicker의 대상만 지정해주면 쉽게 사용할 수 있습니다. 기본 사용법 Date: 기본적으로 $("대상").datepicker();를 사용해주면, 대상 Element를 클릭 시에 바로 아래 날짜 선택이 가능한 Calendar가 호출됩니다. 이 캘린더를 커스터마이즈 하고 싶은 경우엔 옵션을 추가해줄 수 있는데, datepicker({옵션명1:옵션값1, 옵션명2:옵션값2})와 같은 형태로 추가 가능합니다. 해당 옵션은 아래의 사이트에서 세부적으로 확인 가능합니다. ..

개발 창고/Web 2020.07.26

[jQuery] Lazy Load 사용하기

보통 웹페이지를 한번 띄우면 페이지 내의 모든 콘텐츠를 가져오기 때문에 화면의 로드가 길어지는 경우가 많습니다. 때문에 실제로 사용자가 보고 싶은 화면이 아닌 경우에도 (단순히 해당 페이지에 보이는 메뉴를 클릭해서 다른 페이지를 가고 싶은 경우나 스크롤을 내리지 않고 현재 화면에서의 콘텐츠를 클릭하고 싶을 때) 페이지를 기다리게 되고, 또 서버 측면에서는 사용자가 보지 않는 콘텐츠까지 전송해야 하므로 트래픽적으로도 문제가 되는 경우가 많습니다. 특히나 웹보다 저용량으로 제공되어야 하는 모바일에서는 특히나 고려해야 할 대상입니다. 그중에서도 가장 많은 비중을 차지하는게 이미지인데, 이 이미지의 트래픽량을 줄여줄 방안 중 하나가 LazyLoad입니다. 이는 이미지가 현재 화면에 노출되어야 하는 경우에만 서버..

개발 창고/Web 2020.07.23
반응형