web sprit

Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 스와이퍼 IE 지원 버전은 v4.5.1이다. 현 시점에선 IE는 이제 사라진 상황에선 최신 버전으로 사용하면 되겠다. 다음과 같은 메인 화면을 확인할 수 있습니다. Get Started 클릭! Download assets 부분을 클릭! 막상 누르면 앵커가 헤더에 가려서 안보이는데 좀만 올리면 다음과 같은 화면을 확인할 수 있습니다. 링크로 들어가 줍니다. 다음과 같은 사이트로 이동하는데 Flie..

https://owlcarousel2.github.io/OwlCarousel2/ 반응형웹이나 모바일웹에서 터치 슬라이드를 적용하는데 아주 유용한 플러그인을 소개해 드리겠습니다.플러그인의 사용이 무조건 좋다고 볼 수는 없으나 직접적인 소스를 만드는 시간에 대한 할애가 너무 많기 때문에 이런 플러그인을 잘 사용하는 것도 중요하다 생각합니다. 1. 사용방법위 사이트에서 Download 버튼을 클릭해 다운 받습니다.그럼 위사이트 전체적인 설명이 들어있는 폴더를 확인할 수 있는데요.아래의 파일을 찾아 원하는 경로위치에 넣어 줘야 하는데 정확히 어디 위치에 있는지 찾기 힘드실 수 있습니다.owl.carousel.min.css 와 owl.theme.default.min.css 는 OwlCarousel2 > docs ..

http://bxslider.com/위의 사이트로 접속 후 Download 버튼을 눌러 내용을 다운 받으세요~ ^^ 1. 설치1-1. head태그에 연결123456789101112 Colored by Color Scriptercs 1-2. MarkUp12345678 Colored by Color Scriptercs 1-3. 선언12345 $(document).ready(function(){ $('.bxslider').bxSlider();}); cs 2. option위에서 설명한 선언 말고도 option을 설정하기 위한 선언방법이 있습니다. 아래를 참고해 주세요.예)1234567 $('.bxslider').bxSlider({ // 옵션 설정 mode: 'fade', captions: true}); cs 3..

1.Bootstrap 3 Datepicker 2. jQuery UI

select 폼을 꾸며주는 jQuery Selectric 플러그인 일반적으로 select는 css로 원하는 디자인을 꾸며줄 수 없습니다.플러그인을 이용하여 보다 쉽고 tab 접근성에도 유용한 플러그인을 소개하려 합니다.http://lcdsantos.github.io/jQuery-Selectric/index.html 위 URL을 들어가면 Selectric 플러그인 홈페이지가 나옵니다. 자세한 내용을 확인하려면 홈페이지를 참조하여 주시기 바랍니다.첨부파일을 첨부하며 첨부파일의 내용은 아래와 같습니다.* head태그 안에 추가 123456789 $(function(){ $('.tric_01').selectric(); });Colored by Color Scriptercs * html 추가12345678 Sel..

Fotorama 플러그인은 누구나 손쉽게 사용할 수 있는이미지 롤링 플러그인 이다.특히 모바일 롤링 대응이 아주 잘 되어있다. http://www.fotorama.io/ 위 링크로 들어가면 Fotorama의 사용 방법그리고 옵션등을 확인 할 수 있다. 사용방법은 아래와 같이 소스를 구성한다. 1234567891011 Colored by Color Scriptercs 주로 내가 사용하는 옵션이다. 그리고 아래와 같은 경우는 이미지에 링크를 걸고 싶을떄 사용할 수 있는 방법이다.적극 추천한다. 123456789101112131415161718192021222324252627 .fotorama__html{position:relative !important;} .fotorama__html div{height:1..

input에 대한 설명을 input안에 설명으로 연하게 써져있고 그 부분에 클릭을 하거나 글씨를 입력할경우 사라지는 방식으로 input에 대한 설명을 표현한 것을 본적이 있을것이다. placeholder 플러그인(ie7 ~ 8도 적용 가능) placehoder라는 속성은 원래 HTML5태그 속성으로 최근 브라우져가 아닌 낮은 브라우져에서는 적용이 안된다.위의 플러그인을 사용하면 낮은 브라우져 ie7 ~ 8도 모두 적용되어 화면에 나온다.

input의 placeholder속성은 input란에 대한 설명을 보여주기 위한 html5 속성이다.placeholder는 낮은 브라우져에 적용이 안되어 나오지 않는다.예로 익스7~9에 나오지 않는다. 이런 문제를 해결하기 위하여 placeholders.min.js 를 사용하면 된다. 사용 방법은 매우 간단하다.스크립트 태그로 placeholders.min.js 를 연결하여 그대로 사용하면 적용 된12345 /*위와 같이 작성하면 익스7~9 모두 적용된다.*/cs 결과 :