Filter 와 Sort 기능을 갖춘 반응형 레이아웃 js 플러그인 – isotope.js 개요반응형 홈페이지를 만들기 위한 js 플러그인과 css 프레임워크에는 몇가지가 있습니다.css 프레임워크중에서는 대표적으로 bootstrap 이 있고, js 로는 지금 소개해드리는 isotope 가 많이 쓰이고 있는데 이 isotope 는한마디로목록형태의 레이아웃을 화면 크기에 상관없이 일정한 형태로 표시하기 위한 플러그인이라고 볼 수 있습니다.간단히 사용법을 살펴보겠습니다.Isotope위의 홈페이지에 보면 어떤 효과들을 지원하는지 알 수 있습니다.참고로 밑의 예제에 사용할 레이아웃은 item (목록 형태 안의 각각의 요소, 이하 item) 의 안에 이미지가 들어가있는 형태라(핀터레스트 혹은 갤러리를 생각하시면 됩니다.)imagesloaded 라는 js 플러그인을 추가로 로드해야 합니다. (이 플러그인.. WEB/jQuery 8년 전
prefixfree.js prefixfree란 css에서 브라우저마다 적용시켜줄때 css앞에 써주던-wiz- , -webkit- , -ms-등의 접두사에서 해방시켜줄때 사용한다 반복된 코드를 줄일수있고 css적용의 번거로움이 줄어드는거같다. ex).css{-webkit-dove:1000ms;-ms-dove:1000ms;-wiz-dove:1000ms;} prefixfree를 사용하게 되면 위 코드가 한줄로 사용할 수 있게된다 .css{dove:1000ms;} 스타일시트 아래에 prefixfree를 적용시켜줘야한다 * prefixfree 다운로드 링크https://github.com/LeaVerou/prefixfree * CDNhttps://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/pre.. WEB/jQuery 8년 전
[미디어쿼리 크로스브라우징] respond.js Respond.js 소개IE 6~8 버전에서 미디어쿼리를 해석할 수 있도록 만들어주는 자바스크립트 라이브러리이다. 어떤 용도로 사용해도 제한이 없는 MIT 또는 BSD 라이선스를 가지고 있기 때문에 소스 코드에 포함된 라이선스 명시 조항만 지우지 않으면 github에서 언제든 내려받아 사용할 수 있다. REPO https://github.com/scottjehl/Respond/DEMO 데모보기Respond.js 사용법IE8 이하 버전에서만 사용하도록 조건부 주석문을 사용한다. 시작과 동시에 로딩이 되도록 에 위치시키고 respond.js는 웹서버 환경에서 테스트 해야 작동한다.아래는 CDN을 사용했으나 직접 다운로드 받은 파일을 링크해도 된다.HTML CDN/X-Domain SetupRespond.js는.. WEB/Mobile 8년 전
bxSlider 플러그인 자주쓰는 슬라이더 플러그인 bxslider.com 접속 후 다운로드 받고 위 예제를 보면서 쉽게 수정가능하다. 여러 옵션 변경도 가능한데 Options에 들어가면 확인 할 수 있다. bxSlider TIP bxSlider.css 직접 수정하지 말고 style.css 또는 사용중인 css에서 수정해준다! 또한 보이지 않는 class(ex. bx_wrapper)를 수정하려면 ul.bxslider의 부모 div 생성해 덮어서 수정하면 된다. 17-02-06 추가* 마크업ul-li말고 다른 마크업, 예를 들어 div-p를 사용해도됨. *bxslider 스크립트$(document).ready(function(){$('.slideclassname').bxSlider();// 클래스 임의지정가능}); * 옵션1. 슬.. WEB/jQuery 8년 전
