HTML 썸네일형 리스트형 [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] 웹페이지에 쓰인 class 확인하기 웹사이트를 관리할 때, 내가 만든 사이트가 아니고 오래되었을 경우 클래스가 뒤죽박죽인 경우가 많이 있다. 그래서 정리를 하고자 하는데 페이지를 일일이 들어가서 크롬 개발자 도구를 켜고 ctrl+F를 눌러서 찾기가 참 귀찮아서.. 1) 페이지에 진입하면 쓰인 클래스 리스트가 나열되어 있는 팝업이 뜸 2) 페이지에 진입하면 찾는 클래스가 alert창으로 뜸 두 가지로 만들어 보았다. 1) 쓰인 클래스 리스트가 나열되어 있는 팝업 2) 찾는 클래스가 뜨는 alert창 여기서는 페이지에 진입하자마자 뜨게 하기가 그래서 버튼에 함수를 걸어놨는데, 실제로 사용할 때는 버튼을 없애고 /* class 확인 */ $(function(){ chkClass(); //클래스 확인 searchClass("big"); //클래스.. 더보기 [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 다음
