👉이미지 슬리이드 JS(fade) 안녕하세요 TriplexLab 입니다 :) 오늘은 이미지 슬리이드 JS(fade)대해서 살펴보도록 하겠습니다. 이미지 페이드 효과 #banner {position: relative; width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 360px; } #banner img {width: 100%; display: block;} #banner h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; background: rgba(255,255,255,0.5); border-radiu..

안녕하세요 TriplexLab 입니다. 오늘은 jQuery + Ajax 관해서 살펴보도록 하겠습니다. FE개발들 사이에서 역사로 남고 있는 jQuery + Ajax 기술을 왜 글을 작성하냐고요?? 역사로 남게 될거니깐!! 정리하는 차원으로 이 글을 작성 합니다. 몇 십년을 웹시장에서 주름잡았던 jQuery + Ajax 기술 간단하게 요약해 봅니다. 👉jQuery + Ajax Ajax는 서버로에게 비동기 요청을 보낼수 있는 방식중에 하나 입니다. 종류는 크게 4가지가 있습니다. GET, POST, PUT, DELETE가 있는데, Ajax는 이러한 방식으로 API를 요청할 수 있도록 도와주는 라이브러리이다. GET : 데이터 요청 POST : 데이터 추가 PUT : 데이터 수정 DELETE : 데이터 삭제 ..

이벤트 기획전 페이지 안녕하세요 TriplexLab 입니다. 오늘은 이벤트 기획전 페에지에 관해서 살펴보도록 하겠습니다. 참고로 이번에 다룰 내용에는 예전에 올려놓은 이야기들과 조금 종복된 내용이 있습니다. 자세한 내용은 아래 링크를 확인 해주시면 됩니다. 스크롤 방향 감지하기 안녕하세요 TriplexLab입니다 :) 오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; clear: bo.. triplexlab.tistory.com jquery 이벤트 연결하기(event binding) 안녕하세요 TriplexLab 입니다 :..

jQuery rateYo 별점 안녕하세요 TriplexLab입니다 :) 오늘은 별점 매기는 플러그인 jQuery rateYo에 대해서 간단하게 소개하겠습니다. rateYo 별점 설명 rateYo은 이것 jQuery 기반의 플러그인입니다. jQuery가 먼저 로딩한 후에 rateYo가 로딩되어야 합니다. RateYo!, A jQuery Star Rating Plugin Hacks - The Radioactive Options You need to be extra careful with these options. If not used properly, the plugin may not function as expected starSvg: String, default: Star SVG This option c..

Pagination.js 커스터마이징 안녕하세요. TriplexLab입니다. 즐거운 주말 보내고 있으신가요?ㅎ 오늘은 jQuery 플러그인중에 Pagination.js 커스텀 마이징을 간단하게 해보왔습니다. 모두 개시판 만들 때 기본적으로 pagination을 많이 쓰실 겁니다. 이것을 응용해서 more(더 보기) 기능으로 튜닝해 봤습니다. @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity:..

🎯 퍼포먼스 사이드 메뉴 html+scss 안녕하세요 TriplexLab 입니다 :) 오늘은 퍼포먼스 사이드 메뉴에 관해서 살펴보도록 하겠습니다. TRIPLEXLAB Spealers Headphones Televisions Accessories TRIPLEXLAB/CONTENTS /* css reacet */ body, h1, h2, h3, ul, li { margin: 0; padding: 0; } li { list-style-type: none; } a { color: inherit; text-decoration: none; } img { vertical-align: top; } /* css layerout */ .l__wrapper { max-width: 1200px; margin: 0 auto; ..

이미지 슬리이드 JS (좌,우) 안녕하세요 TriplexLab입니다 :) 오늘은 이미지 슬리이드 JS (좌,우)기능에 대해서 알아보도록 하겠습니다. // html 이미지가 3초에 한번씩 좌우로 전환되는 효과 Left Right // css /* reset */ * {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;} a {color: #333; text-decoration: none;} li {list-style: none;} table {border-spacing: 0;} .clearfix::before, .clearfix::after {display: block; content:''; clear:both;} #wrap {w..

안녕하세요 TriplexLab 입니다. :) 오늘은 메소드 체이닝에 관한 예제를 살펴보도록 하겠습니다. 메소드 체이닝은 jQuery를 사용하시는 분이라면 다 아실거에요. 메소드를 연속적으로 이어서 사용할수 있다는 사실요 저는 javascript에서 사용자가 정의한 메소드를 체이닝 기법으로 사용하는 방법에 대해서 정리해봤습니다. var account = { id : "", //this.id은 즉 this == account 같은 말 그 밑에 id 곳에 값을 저장 4) password : "", //this.password은 즉 this == account 같은 말 그 밑에 password 곳에 값을 저장 7) setId : function(myId){ //인자로(myId) 념겨 받은 값 2) this.id..

jquery 이벤트 와 this 그리고 화살표 함수 안녕하세요 TriplexLab 입니다. ES6에서는 function 대신 화살표 함수(=>)를 사용합니다. 영어로 Fat Arrow라고 부르는 표기법은 단순히 function을 바꾼 것으로 알고 있는 분들이 계시지만 실제론 그렇지 않습니다. //1번 $('.ele').click(function(){ console.log(this); }); //2번 $('.ele').click(()=>{ console.log(this); }); 1번은 .ele의 this = ele(자기 자신)을 가리킨다. 2번은 .ele의 this = global(window)을 가리킨다. ​그러면 어떻게 기존 jquery 코드를 화살표 함수 형태로 변경할 수 있을까요?? //1번 $(..

⚙️ jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 에 관해서 살펴 보겠습니다.(자바스크립트 cookie) 레이어 팝업 입니다. 오늘 하루동안 보지 않기 Close // js 👏 결과 확인 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 결과 퍼블리셔나, 프론트단에서 일하다보면 너무나도 흔하게 자주 쓰는 거라서 이번에 정리 한번 했습니다. 위에 코드 파일로 공유드립니다. :) 다운받아서 test해보세요~ JavaScript으로도 다시 구현 해놨습니다.(21/10/20 추가) 👇👇 🎯 popup 끝나는 날짜 설정하여 자동으로 내리기 (21/11/12 추가) 새로 추가한 기능 👇👇 func..