eunyo의 it이야기

안녕하세요. 오늘은 풀페이지 스크롤 이벤트 소스를 공유해드리겠습니다. fullPage.js를 통해 간단하게 구현이 가능하지만, 유료 라이센스입니다. 그럼 fullPage.js를 대체할 소스를 알려드리겠습니다. [HTML] Item 1 Item 2 Item 3 Item 4 [CSS] div { position: relative; height: 100vh; width: 100%; color: #fff; display: flex; align-items: center; justify-content: center; } div:nth-child(1){background: red} div:nth-child(2){background: yellow} div:nth-child(3){background: green} div..

안녕하세요. 오늘은 버튼을 클릭했을때 div의 style이 변경되는 방법에 대해 알아보겠습니다. 그리고 jquery로 css를 하나씩 바꿀 때, 여러개 바꾸는 방법에 대해 알려드리겠습니다. style 속성 하나씩 바꿀때 $(div).css("background-color","yellow"); style 속성 여러개 바꿀때 $('div')css({"background-color":"yellow","width":"100px"}); jquery로 css를 여러개 변경할 때는 ({})안에 속성을 넣어주시면 됩니다. 다음은 버튼을 클릭할 때, div style이 바뀌는 간단한 예제입니다. html 클릭 [css] div{width: 200px;height: 200px;background: red;} [js] $(..

요즘엔 반응형 웹사이트가 기본이기 때문에 해상도 크기별로 스크립트를 다르게 적용할때가 있습니다. 이때 사용할 수 있는 코드를 알아보겠습니다. 1. window 크기가 768보다 작을 때 스크립트 실행 if($(window).width() < 768) { // window 크기가 768보다 작을때 } else { // window 크기가 768보다 클때 } 2. 창을 줄일때 실행되는 resize $(window).resize(function() { if($(window).width() < 768) { // window 크기가 768보다 작을때 } else { // window 크기가 768보다 클때 } }); resize는 윈도우 창을 줄일 때마다 스크립트가 실행됩니다.

안녕하세요. 오늘은 silider 라이브러리인 swiper 슬라이드에 대해 알아보겠습니다. 1. 공식홈페이지 https://swiperjs.com/ 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 위의 링크는 swiper 공식 사이트로 다양한 데모와 사용법을 확인할 수 있습니다. 2. swiper 사용법 [CDN] css와 js를 불러와줍니다. [HTML 기본 구조] Slide 1 Slide 2 Slide 3 위의 소스는 html 기본구조로,..

안녕하세요. 오늘은 f12를 눌렀을 때 발생하는 $ is not defined, jQuery is not defined 오류가 생길 때가 있는데요. $ is not defined, jQuery is not defined 오류가 생기는건 jQuery가 로드되지 않았기 때문입니다. jquery를 다운받아서 추가해주시던지, 아래의 cdn링크를 사용해서 추가해주시면 오류없이 정상 작동하게 됩니다.

안녕하세요. 오늘은 외부 영역 클릭시 div를 숨기는 스크립트를 알아보겠습니다. 보통은 레이어팝업을 구현할 때 많이 사용하는데요. 팝업 외의 영역을 클릭했을 때 사라지도록 많이 사용됩니다. [html] 외부영역 클릭시 이벤트 $(document).mouseup(function (e) { var movewrap = $("div"); if (movewrap.has(e.target).length === 0) { movewrap.hide(); } }); movewrap이라는 변수를 지정해주고, length가 0일때, div를 뜻하는 movewrap을 hide시키는 스크립트입니다.

jquery란? 2006년 존 레신이 출시한 자바스크립트 라이브러리입니다. 간단하게 html의 dom조작과 애니메이션, 이벤트, Ajax까지 다룰 수 있습니다. CDN이란? 라이브러리를 사용할 때 다운로드 받은 파일을 로컬에서 사용하거나, 외부 링크의 주소를 입력하면 됩니다. 이때 웹의 주소를 사용하는 것을 cdn이라고 하며, cdn을 사용하게 되면 사이트 트래픽량을 감소시킬 수 있습니다. CDN 사용방법 상단의 cdn 주소는 구글에서 제공하는 jquery 3.6.0 버전입니다. 상단의 cdn 주소는 jquery 공식 사이트에서 제공하는 제이쿼리 항상 최신 버전을 불러오는 소스입니다.

더보기버튼을 눌렀을때, 숨겨있던 list가 노출되는 소스입니다. 리스트가 전부 노출됬을때 more 버튼이 사라집니다. [HTML] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 MORE [js] $('.list > div').hide(); $(".list > div").slice(0, 5).css("display", "block"); $("#load").click(function(e){ e.preventDefault(); $(".list >div:hidden").slice(0, 5).fadeIn(200).css('display', 'block'); // 클릭시 more 갯수 지저정 if($(".list >div:hidden").length == 0){ // 컨텐츠 남아있는지 확인 $('..

홈페이지를 만들다보면 슬라이드 기능을 자주 사용하는데요. 이때 사용하기 좋은 슬라이더 라이브러리인 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 1. 설치(CDN) 홈페이지에서 다운로드받거나, cdn을 사용해주시면 됩니다. cdn 주소는 head에 넣어주시고 jquery와 함께 사용해주셔야 합니다! ..

안녕하세요. 오늘은 간단하게 스크롤을 내렸을때 애니메이션 효과를 줄 수 있는 라이브러리를 알아보겠습니다. aos.js로 쉽게 스크롤 애니메이션을 구현할 수 있습니다. aos.js는 간단한 추가만으로 구현이 가능하기 때문에 어렵지 않게 스크롤 애니메이션 구현이 가능합니다. 1. 설치 우선 aos.css와 aos.js를 불러옵니다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 위의 홈페이지에서 직업 다운로드 받아서 넣어주셔도 됩니다. 2. 코드 다음은 html, css, js 코드입니다. [html] 위의 홈페이지를 참고하면..