분류 전체보기 (29) 썸네일형 리스트형 Flatpickr [2] : 옵션 정리 - 날짜&시간 선택 JS 라이브러리 Flatpickr.js 소개옵션 작성 위치옵션 정리옵션 템플릿데모 화면목표Flatpickr는 다양한 옵션을 손쉽게 설정할 수 있다. 공식홈페이지에 있는 Example 옵션에 대해 공부하고 정리해보자.참고 문서더 많은 옵션은 "Config Options "를 참고# Flatpickr.js 소개 flatpickrIntroduction Introduction flatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event syst.. Flatpickr [1] - 날짜&시간 선택 JS 라이브러리 Flatpickr.js 소개 사용 방법 데모 화면 # Flatpickr.js 소개 flatpickrIntroduction Introduction flatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for anyflatpickr.js.org날짜 및 시간 선택 JS 기반 라이브러리 와는 반대로 CSS 커스텀이 가능하다JS 로 제작되어 빠르고 가벼우며, 다양한 기.. <input type="date"> - 날짜 입력 기본 HTML 요소 날짜 입력 요소옵션데모 화면목표HTML 에서 지원하는 날짜 입력 기본 요소인 를 살펴보자# 날짜 입력 요소날짜 입력을 도와주는 여러 date-picker 라이브러리(flatpickr 등)가 있지만 HTML에서 기본으로 제공하는 날짜 입력 요소가 있다.input 태그에 type 속성값에 "date"를 작성하면 된다.HTML에서 날짜를 입력받기 위한 기본 요소달력 UI, 날짜를 선택하는 편리한 방법을 제공한다달력 아이콘을 클릭해야만 달력 UI 팝업이 호출된다형식 포맷 : "YYYY-MM-DD"Safari 9 이전 브라우저는 미지원(달력 UI가 호출되지 않음)기본 달력 UI는 브라우저에서 자동으로 제공되는 기본 CSS 스타일로, CSS 커스터마이즈하는건 어렵다태그의 속성으로 날짜 시작&종료 날짜 지정, 기본값.. Slick.js [이슈] : 반응형 좌우 배치 레이아웃 관련 이슈 상황해결 방법데모 화면# 이슈 상황Slick Slider를 반응형으로 좌우 배치 할때, 레이아웃이 틀어지는 경우가 생겼다.# 해결 방법이는 Slick-slider가 속한 영역보다 너비가 커서, 옆에 있는 code 영역을 밀어내어 차지하게 되는건데,이유는 모든 요소의 CSS의 overflow 기본 값이 visible로 설정되어 있기 때문이다. {overflow: visible;} 초과하는 영역을 넘어가지 않게 설정하면 이 문제는 해결된다. 초과되는 요소에 overflow : auto, overflow : scroll, overflow : hidden ... 등을 CSS 적용하면 된다.그러면 브라우저를 리사이징해도 Slick Slider의 레이아웃이 틀어지지 않는 것을 볼 수 있다..slick-slid.. Placehold.co - 임시 이미지 온라인 서비스 Placehold.co 소개사용 방법작성 방법1. 크기 지정2. Retina 고해상도 이미지3. 배경색&텍스트색4. 확장자5. 텍스트 입력6. 폰트데모 화면목표목표 설정웹 개발에서 임시 이미지가 필요할 때, 사용할 수 있는 임시 이미지 온라인 서비스인 Placehold.co 에 대해 알아보자# Placehold.co 소개 Placehold | A simple, fast and free image placeholder service placehold.co임시 이미지를 생성할 수 있는 온라인 서비스경로와, url 파라미터로 색상, 텍스트, 크기 등을 설정하여 빠르게 사용자 정의 이미지를 사용할 수 있다# 사용 방법이미지 경로에 placehold URL 작성[HTML] [CSS].image{ backgrou.. Slick.js [3] : HTML 구조 & CSS 적용 - 슬라이드 jQuery 라이브러리 Slick.js 소개Slick.js 작성 환경Slick.js의 HTML 구조데모 화면목표Slick.js를 사용하면 자동으로 특정 HTML 구조가 생성된다. 이때 생성되는 요소의 클래스명을 활용하여 CSS 스타일을 적용할 수 있다. Slick.js 사용시 생성되는 HTML 구조를 살펴보자# Slick.js 소개 slick - the last carousel you'll ever needslick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!kenwheeler.github.io제이쿼리 기반 슬라이더(캐러셀) 라이브러리jQuery .. Slick.js [2] : 옵션 정리- 슬라이드 jQuery 라이브러리 Slick.js 소개옵션 작성 위치옵션 상세 정리Layout (레이아웃)Action (동작)Dots (인디케이터 / 네비게이션 / 페이지네이션)Arrow (화살표)Effect (효과)User Event (사용자 입력&조작)Responsive (반응형)기타옵션 템플릿 (전체)# Slick.js 소개https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever needslick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!kenwheeler.github.io제.. Slick.js [1] - 슬라이드 jQuery 라이브러리 Slick.js 소개사용 방법데모 화면# Slick.js 소개 slick - the last carousel you'll ever needslick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!kenwheeler.github.io제이쿼리 기반 슬라이더(캐러셀) 라이브러리jQuery 플러그인으로 선언 전 jQuery가 연결되어 있어야 한다터치, 스와이프, 자동 재생, 반응형 등 다양한 옵션을 사용 가능하다# 사용 방법1. Slick.js, Slick.css 연결 (CDN)slick은 js와 css 같이 연결해야 한다scroll... 이전 1 2 3 4 다음
