web sprit

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 스와이퍼 IE 지원 버전은 v4.5.1이다. 현 시점에선 IE는 이제 사라진 상황에선 최신 버전으로 사용하면 되겠다. 다음과 같은 메인 화면을 확인할 수 있습니다. Get Started 클릭! Download assets 부분을 클릭! 막상 누르면 앵커가 헤더에 가려서 안보이는데 좀만 올리면 다음과 같은 화면을 확인할 수 있습니다. 링크로 들어가 줍니다. 다음과 같은 사이트로 이동하는데 Flie..

퍼센트 구하기 포함값 / 전체값 * 100 ex) 어떠한 전체의 가로길이가 300 이고 그 안에 포함되는 값이 50일 경우 이것에 대한 50은 300 안에서 몇 퍼센트 일까요? 50 / 300 * 100 = 16.6666666....... % 값 구하기 포함 퍼센트 / 100%(전체 퍼센트) * 전체값 ex) 전체값은 300 이고 포함된 퍼센트는 20%라고 할때 20%의 값은 얼마일까요? 20 / 100 * 300 = 60 참고 javascript - 스크롤을 기반으로 이미지를 페이딩하는 수식이 필요합니다 현재 다음 공식을 사용하고 있습니다 : var scrollTop = $(this).scrollTop(); $('.item').css({opacity: 100 / scrollTop}); 그러나 내 웹 사..

$("[선택자], [선택자], [선택자]").EventMethod(); 어떠한 선택자들이 같은 이벤트의 함수를 실행한다고 한다면 위와 같이 선택자를 여러개 묶어 같이 실행할 수 있습니다. 예를 들어 클래스명이 다른 슬라이드가 있는데 이것을 같은 슬라이드 플러그인 이벤트로 묶고 싶다거나 datepicker 와 같이 달력 기능이 있는 부분을 한번에 묶고 싶다면 사용할 수 있겠습니다. 아래 예시를 보면 어떻게 작성하는지 더 쉽게 이해하실 수 있을 것 같네요. 예를 들어 클릭 이벤트를 여러개의 선택자로 묶고 싶다면 아래와 같이 작성하면 되겠습니다. $(".box01, .box02, #box01, #box02, div, p").click(function(){ //....... }) 선택자로는 클래스명, 아이디명,..

$(selector).on(event, childSelector, data, function, map); 제이쿼리의 on 메서드 활용의 기본형은 다음과 같습니다. $(selector).on(event, function(){ // ..... }); // selector : 이벤트를 적용할 태그나 아이디, 클래스를 선택 // event : 제이쿼리 이벤트 (ex - click, mouseenter, mouseleave 등.) 이벤트를 여러게 연결 하려면 다음과 같이 작성하면 됩니다. $(selector).on({ click: function() { // ..... }, mouseenter: function() { // ..... }, mouseleave: function() { // ..... } }); 위..

jQuery를 사용할때 어떠한 객체의 크기값을 가져오기 위해 아래와 같은 방법을 사용한다. $('.box').width(); // box 클래스의 가로크기 값을 가져온다 $('.box').height(); // box 클래스의 세로크기 값을 가져온다 하지만 위에서의 값을 가져오는 방법의 문제점은 객체에 padding값이나 border값이 있다면 그것을 제외한 순수 가로,세로값을 가져오기 때문에 실제의 크기값을 가져오지는 못한다. 예를 들어 border:1px padding:10px width:100px height:100px .box{ width:100px; height:100px; border:1px solid #000; padding:10px;} 위와 같이 box 클래스를 가진 객체의 실제 width..

오늘은 ESC(Escape)를 눌렀을때 이벤트를 발행시키기 위해ESC를 눌럿을 때 감지하는 Script를 만들어 봅시다. ESC를 감지하기 위해서는브라우저에서 제공되는KeyCode 또는 which속성을 사용해야 합니다.현재 최신 브라우저에서는 KeyCode 보다는 which 속성을 지원하고 있습니다.그래도 구 브라우저를 위해서 KeyCode도 사옹해 보도록 하죠. 저는 ESC감지를 어디에 사용하려 하냐~레이어 팝업이 떳을때 ESC 버튼을 누르면 닫히게 작업하려 합니다.아래 코드를 보시죠 1234567$(document).keydown(function(e){ var code = e.keyCode || e.which; if (code == 27) { $('.레이어팝업 클래스').hide(); }});cs해석..

스크립트로 pc와 mobile를 구분하여 어떤 환경이냐에 따라 다르게 적용하기위해 검색 중 Navigator을 사용하여 접속환경을 구분할 수 있었다. 다음과 같은 조건문을 적용하여 환경을 구분한다.1234567891011121314151617function device_check() { // 디바이스 종류 설정 var pc_device = "win16|win32|win64|mac|macintel"; // 접속한 디바이스 환경 var this_device = navigator.platform; if ( this_device ) { if ( pc_device.indexOf(navigator.platform.toLowerCase())

함수안의 함수를 호출하기 위해선몇가지의 방법이 있습니다. 1. 내부함수를 Object로 반환.12345678910111213141516171819202122232425262728function outF(){ console.log('상단 콘솔'); function inF() { console.log('in Function'); } function inF2() { console.log('in2 Function'); } console.log('하단 콘솔'); return { inF_Obj : inF, // inF 함수를 inF 객채에 담는다. in2_Obj : inF2 }} var moduleOut = outF();moduleOut.inF_Obj();moduleOut.in2_Obj(); /*//////////..

참고 : https://opentutorials.org/module/904/6851http://api.jquery.com/category/ajax/

제이쿼리의 animate 메서드로 접혓다 펼쳐지는 토글 형식의 animation 을 만들려면 height 의 값을 알고 그것에 대한 값을 animate 메서드에 전달 해줘야 작동할 수 있습니다. 기존의 toggle 메서드를 이용하여 toggle 메뉴를 만들 수 있지만 ,toggle 메서드는 style 값으로 width 값까지 제어하는 현상이 일어나면서 이상하게 접혓다 펼쳐짐을 확인하였습니다. 그래서 알아본 결과 animate 메서드로 height 를 이용하기로 하였는데 height 값으로 auto를 주면 접혓다 펼처지나 animation 효과는 나타나지 않습니다. 효과를 나타내려면 height 값을 auto로 주지말고 초기값을 전달해 줘야 합니다. (0px 이면 0px이라는 것을 전달.) 다음과 같은 트..