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..

요즘엔 반응형 웹사이트가 기본이기 때문에 해상도 크기별로 스크립트를 다르게 적용할때가 있습니다. 이때 사용할 수 있는 코드를 알아보겠습니다. 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는 윈도우 창을 줄일 때마다 스크립트가 실행됩니다.

안녕하세요. 오늘은 외부 영역 클릭시 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 공식 사이트에서 제공하는 제이쿼리 항상 최신 버전을 불러오는 소스입니다.

무료 차트(chart) 플러그인 웹을 제작하다 보면, 차트가 필요한 경우가 종종 있습니다. 간단한 막대그래프같은 경우에는 html, css로 그려내도 되지만, 보통은 chart의 플러그인을 사용하여 구현합니다. 그럼 무료로 사용가능한 차트 플러그인에 대해 알아보겠습니다. 1. chart.js (www.chartjs.org/) 차트플러그인 중에서 유일하게 사용해본 chart.js 입니다. 차트플러그인 중에서 꽤 유명한 편이라 국내에서도, 해외에서도 예제들을 많이 찾아볼 수 있습니다. 간단한 차트를 표현하기에는 좋지만, 커스텀하기가 불편해서 정말 간단한 차트만 그리기 좋은 차트입니다. 2.C3.js (c3js.org/) c3는 생성할 때 각 요소에 일부 클래스를 제공하여, 사용자 정의 스타일을 적용할 수 있..

jQuery 요소의 표시와 숨김 jQuery의 show(), hide(), toggle() 함수를 사용해, 선택한 요소를 숨기고, 보여줍니다. 간단하게 이야기하면 요소의 상태값을 display:block, display:none 처리해주는 효과입니다. .show() 선택한 요소를 보여줍니다. 정의 .show()는 선택한 요소를 보여줍니다. .show("시간")은 선택한 요소를 해당하는 시간동안 보여줍니다. 시간은 초 단위로 설정합니다. (숫자로 표현) 시간은 문자(slow, fast)로도 표현 할 수 있습니다. 문법 $("선택자").show(); $("선택자").show("시간"); $("선택자").show("시간", 함수); 예제 $(".btn1").on("click", function(e){ $("...

display 여부에 따라 show, hide jquery를 통해 display block, none에 따라 보여질지 숨길지 여부를 결정하는 방법입니다. 방법 1 if ($("div").css("display") == "none") { $("div").show(); //display :none 일떄 } else { $("div").hide(); //display :block 일떄 } 방법 2 if ($('div').is(':visible') == false) { alert('안보이는 상태 '); } else { alert('보이는 상태 '); } 방법 3 (자바스크립트) var div = document.getElementById('div'); if (div.style.display === 'none')..