개발 아카이브/라이브러리
[자바스크립트] Date Range Picker : 기간 날짜 라이브러리
웹 개발을 하면서 날짜를 선택하여 사용자로부터 기간을 받고 싶을 때, 여러분들은 어떻게 하나요? 기본적으로 input 태그에 type을 date로 하여 2개의 input 필드를 만들 겁니다. See the Pen basic-date by wooncloud (@lomeiskk) on CodePen. 하지만 위의 방법은 첫 날짜가 마지막 날짜보다 이후의 날짜가 될 수 없고, 여러 가지 유효성 검사를 해야 하며, 직관적이지 않고 불편한 부분이 많습니다. 물론 제이쿼리 UI에서 제공하는 Date Picker를 보면 아래와 같이 기간을 설정할 수 있는 기능이 있습니다. 하지만 제 눈엔 예뻐 보이지 않네요. 여러분은 어떤가요? 이 디자인이 예쁘다면 사용하면 되겠지만, 그렇지 않으면 CSS를 싹 바꿔야 할지도 모릅니..
[웹디자인] 로딩 오버레이 Loading.js
웹사이트를 제작하다 보면 사용자의 요청을 처리하는 동안 사람들의 조작을 잠시 막아둘 필요가 있을 때가 종종 찾아옵니다. 그럴 때 페이지마다 오버레이용 CSS를 만들어두거나 각 컨트롤러에 readonly를 걸어두는 등 복잡한 일을 하죠. 이번에 소개해드릴 loading.js는 로딩 중이라는 표시를 보여주고, 특정 공간의 사용자 조작을 막을 수 있는 플러그인입니다. 1. loading.js 웹사이트 carlosbonetti.github.io/jquery-loading/ jquery-loading Themes and default styles You must include the dist/jquery.loading.css file in your page if you want to use the default ..
[웹디자인] 심플한 Toast 메시지 - toastr
이전 포스팅에 SweetAlert2라는 Alert에 관한 포스트를 올린 적이 있습니다. 그 SweetAlert2 안에 Toast 메시지를 구현할 수 있었는데요. 아무래도 SweetAlert2 특성상 간단한 Toast메시지도 톡 튀게 애니메이션이 표현이 되곤 했습니다. "저는 심플한 toast 메시지를 쓰고 싶어요!!" 라고 하시는분들을 위해, 이번엔 작고 가벼운 플러그인을 하나 소개해 드릴까 합니다. toastr💬 codeseven.github.io/toastr/demo.html toastr examples codeseven.github.io 이름이 딱 이거는 그냥 요리보고 조리봐도 toast 플러그인이다.라고 생각할 수 있는 직관적인 이름의 플러그인입니다. 1. 설치하기 위의 링크는 데모버전을 볼 수 ..
[웹디자인] 예쁜 Alert 창을 사용하자! SweetAlert2
자바스크립트로 웹 프로그래밍을 하다 보면 자주 Alert 함수를 사용하게 됩니다. Alert는 사용자에게 알림을 주고자 할 때 사용하는데요. 자바스크립트의 alert는 아주 기본적인 브라우저 UI를 제공하고 있습니다. 하지만 우리는 이런 알림창보다 더 예쁜 알림 창을 원하죠. SweetAlert2!! sweetalert2.github.io/ SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 해당 링크로 들어가면 사이트가 워낙 관련 내용을 잘 설명해줘서 제가 뭐 자세히 설명해 드릴 것이 없지만, 기본적으로 어떤..
[웹디자인] 내 사이트에 아이콘을 쉽게 넣자. Font Awesome
웹디자인을 하면서 여러 그림과 아이콘이 필요할 때가 있습니다. 예쁜 사이트를 디자인하려면 아이콘은 필수니까요. 그리고 요즘은 심플하고 모던한 디자인을 선호하기 때문에 픽토그램을 많이 활용합니다. 하지만 웹디자인에 아이콘을 넣으려면 어떻게 해야할까요? 일반적으로 태그를 이용하여 이미지를 불러와서 사용합니다. 그렇다면 수많은 아이콘 파일들을 서버에 저장해야 하죠. 그리고 나에게 필요한 아이콘을 찾아야 한다면? 아이콘 이미지를 찾기 위해 열심히 인터넷을 모험하게 될 것입니다. 웹디자인보다 검색에 시간을 더 많이 투자하겠네요. 하지만 Font Awesome을 사용하면 빠르고 쉽게 아이콘을 찾아 사용할 수 있습니다. fontawesome.com/ Font Awesome The world’s most popular..