jQuery 썸네일형 리스트형 [jQuery] slick slider 커스텀 내비게이션 & 페이징 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 slick slider는 손쉽게 슬라이더를 사용할 수 있게 해주는 플러그인으로, 여러 방향으로 응용이 가능하다. 기본적으로 제공하는 페이징과 내비게이션 말고, 커스텀 디자인을 적용할 수 있다. See the Pen slick slide with custom nav and paging by KYR.. 더보기 [javascript] 웹페이지 잘리지 않게 PDF 파일로 만들기 먼저 준비물 bluebird는 익스플로러에서 작동하게 하려면 꼭 필요하다. jspdf는 pdf 생성해주는 라이브러리, html2canvas는 html 페이지를 이미지로 만들어주는 라이브러리이다. 주의사항 html2canvas는 html페이지와 같은 도메인에 올라가 있는 이미지만 불러올 수 있는 것 같다. 외부 cdn 이미지를 이용하면 출력되지 않는다. (https://stackoverflow.com/questions/31509227/html2canvas-not-rendering-cdn-images) pixabay에 있는 이미지 주소로 이미지를 넣고 실행하니까 전혀 나오지 않아서 찾아보니 이런 내용이 있다. 그래서 따로 호스팅을 파서 같이 올리니 실행이 됨. 데모 http://gyl13.dothome.co.. 더보기 [javascript] 웹페이지에 쓰인 class 확인하기 웹사이트를 관리할 때, 내가 만든 사이트가 아니고 오래되었을 경우 클래스가 뒤죽박죽인 경우가 많이 있다. 그래서 정리를 하고자 하는데 페이지를 일일이 들어가서 크롬 개발자 도구를 켜고 ctrl+F를 눌러서 찾기가 참 귀찮아서.. 1) 페이지에 진입하면 쓰인 클래스 리스트가 나열되어 있는 팝업이 뜸 2) 페이지에 진입하면 찾는 클래스가 alert창으로 뜸 두 가지로 만들어 보았다. 1) 쓰인 클래스 리스트가 나열되어 있는 팝업 2) 찾는 클래스가 뜨는 alert창 여기서는 페이지에 진입하자마자 뜨게 하기가 그래서 버튼에 함수를 걸어놨는데, 실제로 사용할 때는 버튼을 없애고 /* class 확인 */ $(function(){ chkClass(); //클래스 확인 searchClass("big"); //클래스.. 더보기 [유용한 기능] 크롬 DevTools Override 홈페이지 이미지를 교체해야 하는 일이 있는데 포토샵으로 시안을 만들기에는 오버레이도 깔려있고 글자들이 얹어진 게 많아 어려움이 있었다. 서버에 전송하지 않고 로컬에 있는 이미지를 임시로 사이트에 덮어씌울 수 없을까? 하던 중 해외 사이트를 뒤지다가 발견한 기능! 크롬 개발자도구의 Override라는 기능이다. F12를 누르고 "Sources"로 들어가면 탭에 Overrides라는 부분이 있다. 클릭해보자. 그리고 "Select folder for overrides"를 눌러 아무 폴더나 선택한다. (오버라이드를 위한 폴더를 만들어서 지정하는 게 좋긴 하다.) 어차피 오버라이드 하면 안에 웹 경로대로 폴더가 만들어진다. 그럼 상단에 이런 문구가 뜰 텐데, 허용을 누른다. 반드시 "Enable Local Ov.. 더보기 [jQuery] 헤더, 푸터 고정/오버레이 클릭 시 사라지는 모달 헤더 및 푸터는 고정이며 그 안의 컨텐츠만 스크롤이 생기는 모달이다. onclick="modalControl('o', '#modal1', '600')" //modalControl(타입 - 여는버튼은 o 닫는버튼은 c, 모달id, 모달 가로 사이즈) 의 방식으로 사용할 수 있다. 모달을 중앙에 정렬하기 위해 여러 가지 방법을 사용해 보았지만 부모 요소에 display:table을 걸고 display:table-cell로 지정하는 방법이 가장 깔끔한 것 같다. 단계가 좀 깊어지긴 하지만 다른 방법들의 단점이 너무 치명적이다. top:50%;left:50%;transform(-50%,-50%)의 방법이 간단해 보이지만 위치가 퍼센트로 계산되기 때문에 크롬에서는 border/ie에서는 글자 등이 흐리게 보이는 .. 더보기 [jQuery] 무한슬라이드 만들기 슬라이드는 흔히 사용하는 플러그인이 가장 간단하지만, 제이쿼리 실력을 늘려보려면 실제로 만들어 보는 것이 좋다. 방식은 여러 가지가 있으니 곰곰히 생각해 보고 자신이 더 좋다고 생각하는 방식으로 제작하면 된다. 여기서는 prependTo 와 appendTo를 이용하고 css의 opacity 속성을 이용하여 fadeIn fadeOut 효과를 냈다. 슬라이드들을 position absolute로 한 곳에 몰아두고 opacity를 0으로 하여 보이지 않게 처리한다. 처음 로드시 첫 슬라이드의 opacity를 1로 animate한다. 그리고 이전, 이후 버튼을 클릭하면 해당 슬라이드의 opacity를 0으로 animate한 후 나타나게 할 슬라이드의 opacity를 1로 animate한다. setInterval.. 더보기 [jQuery] 스크롤시 색상이 변하는 헤더 스크롤시 특정 구간에 들어갔을 때 색상이 변하는 헤더입니다. 헤더 색상을 제이쿼리 animate로 변경할 수도 있지만, css로 해결하는 편이 성능 면에서 훨씬 유리합니다. 헤더 색상이 변했으면 하는 부분에 "page-start" 클래스를 추가한 후 그 부분에 스크롤이 갈 때 헤더에 "down" 클래스를 추가하게 합니다. down 클래스는 transition을 이용해서 자연스럽게 색상이 변할 수 있도록 합니다. transition을 이용하는 것이기 때문에 꼭 background-color가 아니더라도 opacity, width, height 등을 이용하여 다양하게 변형시킬 수 있습니다. (opacity:0 -> 1 로 해서 헤더가 나타나게 한다든지, height:100px -> 50px 로 해서 헤더 높.. 더보기 이전 1 다음
