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

Javascript 말줄임 처리하기 안녕하세요 TriplexLab 입니다 :) 오늘은 간단하게 javascript로 말줄임 처리하는 방법에 대해서 살펴보겠습니다. ✍️ Javascript 말줄임 처리 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur Lorem ipsum d..

👨‍💻 스크롤 방향 감지하기(마우스 스크롤 위아래) 안녕하세요 TriplexLab입니다 :) 오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다. ✍️ 스크롤 방향 감지하기 코드 * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; clear: both; display: block;} .navInner {width: 100%; position: fixed; top: 0; background-color: #fff; padding: 20px; box-sizing: border-box; transition: top 0.4s ease-in-out;} .logo {float: left;}..

Pagination.js 커스터마이징2 안녕하세요. TriplexLab입니다. 오늘은 지난 시간에 이어서 Pagination.js 커스텀 마이징에 관해서 작성 해보겠습니다. 지난번에 작성한 글입니다. 참고로 보시면 좋습니다. Pagination.js 커스터마이징 안녕하세요. TriplexLab입니다. 즐거운 주말 보내고 있으신가요?ㅎ 오늘은 jQuery 플러그인중에 Pagination.js 커스텀 마이징을 간단하게 해보왔습니다. 모두 개시판 만들 때 기본적으로 pagination을 많 triplexlab.tistory.com 이번에는 Pagination.js를 가지고 Tab기능을 만들어 봤습니다. Tab 기능은 어느 홈페이지든 간에 정말 자주 사용하는 기능중에 하나 입니다. 보통 퍼블리셔라면 마크업 만들..

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

drop down menu 안녕하세요 TriplexLab 입니다 :) 오늘은 drop down menu 직접 만들어 봅시다. 드롭다운 직접 만들어보자 선택해주세요 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 다음 *{box-sizing:border-box;margin:0} body{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100vh;padding-bottom:30px;font-family:'Spoqa Han Sans Neo',sans-serif;color:#3f4150;background-color:#f4f7fa} li,ul{list-style-type:none;padding-l..

javascript cookie 사용하기 안녕하세요.TriplexLab입니다 :) 글을 작성하기 앞서 제가 쓴 글 중에서 cookie를 활용해 '레이어 팝업 오늘 하루 그만 보기' 작성한 것이 있습니다. 여기도 참고하면 좋을 것 같아요. jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다. 오늘은 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 에 관해서 살펴 보겠습니다. 레이어 팝업 입니다. 오늘 하루동안 보지 않기 Close // js 퍼블리셔나, 프론트단에 triplexlab.tistory.com 이제 본격적으로 javascript cookie 사용하는 방법에 대해서 살펴보도록 하겠습니다. 기본적으로 document 에서 cookie를 제공하는데 이를 ..

Jquery Ajax 사용방법 안녕하세요 TriplexLab 입니다 :) Jquery Ajax를 사용할려면 어느 시점에 이벤트가 발생하는지 알아볼 필요가 있습니다.‌ 그건 보통 "라이프사이클"이라고도 부릅니다. ReactJS, VueJS...등등 과 같은 라이브러리도 이런 라이프사이클들이 존재 합니다. ​jQuery 최신버전에서 사용가능한 메서드들 메서드 설명 ajaxStart 첫 번째 Ajax 요청이 시작될 시점에 호출 할 핸들러를 등록한다. (ex 로딩 이미지 보여주기 처리) ajaxStop 모든 Ajax 요청이 완료되는 시점에 호출 할 핸들러를 등록한다. (ex 로딩 이미지 감추기 처리) done 요청 성공시 호출 fail 요청 실패시 호출 always 성공 실패 상관없이 호출 jQuery 구 버전..

안녕하세요 TriplexLab 입니다. 오늘을 자바스크립트에서 모듈화 방식으로 만들기 위한 기본 지식 모듈 내보내고 가져오기에 대해서 살펴 볼까 합니다. export와 import 지시자는 다양한 방식으로 활용됩니다. 이번 챕터에서 좀 더 다양한 사용법을 배워보겠습니다. 선언부 앞에 export 붙이기 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다. 아래 내보내기는 모두 유효합니다. // 배열 내보내기 export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 상수 내보내기 export const MODULES_BECAME_STANDARD_YEAR = 2015; // 클..

이미지 슬리이드 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..

🛒 장바구니 및 회원가입시 체크박스 구현하기 안녕하세요 TriplexLab 입니다 :) 쇼핑몰을 만들다 보면 흔하게 사용하는 체크박스 구현에 대해서 정리해봤습니다. 채크박스 구현이라는것은 예를 들어서 -전체동의를 클릭하면 동시에 나머지 채크박스도 같이 활성화가 되어야 하고, - 각각의 약관동의를 채크하면 자동으로 전체동의도 활성화가 되는것을 말합니다. 전체선택 $(function(){ var listAll = $("input[type='checkbox'].agreechkAll"); //전체 클릭하는 엘리먼트에 .agreechkAll 클랙스가 추가되어야 한다. var list = $("input[type='checkbox'].chack"); //각각 클릭하는 엘리먼트에 .chack 클랙스가 추가되어야 한다..