Scikit Web

Bootstrap 과 슬라이더(보통 이미지슬라이드 기능에 사용함) Carousel 이라는 말하는 기능 입니다. 많은 라이브러리들이 있지만 Slick 이라는 라이브러리를 사용하여 만든 예제 입니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io html5 이기 때문에 css js 를 선언하는 순서가 대단히 중요합니다. HTML 삽입 미리보기할..

요즘은 모니터 해상도 및 크기가 너무 커지면서 홈페이지 디자인을 고려할 사항이 더 많아 졌습니다. 네이버의 경우에도 모니터 화면이 아무리 가로로 크게 늘어나도 모니터 중간에 일정 사이즈를 고정 시켜서 유지하고 있습니다. Bootstrap 을 이용하여 네이버 처럼 화면 중간 고정 화면을 만드는 예제입니다. non-reponse css의 경우 bootstrap3.4 에 최적화된 버전만 있는 듯 합니다. HTML 삽입 미리보기할 수 없는 소스

웹 디자인을 하다 보면 PC 에서 접속 하더라도 모바일 사이즈에 최적화 되어서 보여지게 만들어야 하는 경우가 있습니다. 모바일 화면이 다 다름에도 아무 문제 없이 보이게 할려면 이미 잘 만들어져 있어서 아무 문제가 없는 library를 사용하는 것이 좋습니다. 웹 디자인 또는 웹 개발을 한다면 Bootstrap 이라는 라이브러리의 사용은 필수 입니다. 거의 모든 반응형 UI가 되는 웹 서비스(유/무료)들의 경우에도 해당 라이브러리를 사용 하지 않는 경우는 거의 없습니다. 모바일 사이즈 최적화는 viewport 라는 메타 정보가 반드시 들어가야 합니다. 이번 예제 에서 중요한 부분은 가운데로 정렬시키는 class 입니다. HTML 삽입 미리보기할 수 없는 소스

html5 의 element(div, label 등)에 애니메이션 효과를 넣어주는 유용한 라이브러리 입니다. https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style 무료 라이브러리 이며 사용법도 상당히 간단합니다. 아래 예제와 같이 라이브러리를 추가합니다. 사용가능한 기능들은 라이브러리 홈페이지..

jQuery QR Code를 생성하는 라이브러리를 이용하여 QR Code를 생성하는 예제 입니다. 라이브러리가 오래 되긴 했지만... QR Code도 표준 이라서 그런가 지금도 문제없이 동작하고 있습니다. https://larsjung.de/jquery-qrcode/ jQuery.qrcode · generate QR codes dynamically · larsjung.de generate QR codes dynamically larsjung.de 아래 생성하는 예제에서 중요한 부분은 라이브러리 사이트에서 .zip 파일을 다운로드 받으신 후 html file에 import 시켜줘야 됩니다. 라이브러리를 사용할때 중요한 부분은 text 입니다. 해당 부분이 QR Code를 생성하는 주소정보 및 기타 정보를 ..