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

🎯 퍼포먼스 사이드 메뉴 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; ..

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 구 버전..

UI/UX 디자인 아이디어 공유 ​Product Stock Screen by M A J E D Mobile Design, UI / Visual Design, Product Design Mohammad Majed Tapcheck Direct App Design ((Live 🤳)) dribbble.com

UI/UX 디자인 아이디어 공유 웹디자인 & UXUI 디자인 아이디어 공유 Online Store SS '18 — Product Page by Adam Zielonko for Netguru on Feb 12, 2018 Senior Product Designer — @Netguru. Over 9 years of experience in the field. hi@adamzielonko.com

익스플로러 IE만 CSS적용하기 안녕하세요 TriplexLab입니다 :) 오늘은 익스플로러 IE만 CSS 적용하기에 관해서 살펴보도록 하겠습니다. 📌 첫번째 방법 /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Enter your style code */ } /* IE6,7,9,10 */ @media screen and (min-width: 640px), screen\9 { /* Enter your style code */ } /* IE6,7 */ @media screen\9 { /* Enter your style code */ } /* IE8 */ @media \0screen { /* Ent..

Github Sourcetree 안녕하세요 TriplexLab입니다. 오늘은 Github + Sourcetree에 관해서 살펴보도록 하겠습니다. 📌 Sourcetree에 Github 계정 추가하기 1. 소스 트리 첫 화면에서 조그마한 '설정' 버튼을 클릭합니다. 2 : '계정'을 클릭 👉 2-1 : 추가 버튼 클릭 👉 2-2 : 추가 할 github name / password 작성 결과) 👉 다음과 같이 개인 계정이 추간 된 모습을 확인할 수 있습니다. 📌 Github 프로젝트 주소와 연동하기 프로젝트마다 remote github url을 설정해주어야 해요. 1. : 프로젝트를 열어서 우측 상단에 설정버튼을 클릭 👉 1-1. : 원격 탭으로 이동 👉 1-2. : 추가 버튼 클릭 2. : 계정정보 + g..

안녕하세요 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 입니다 :) 오늘은 티스토리 개인 블로그에 다크모드를 적용하는 방법에 대해서 알아 보도록 하겠습니다. // 다크 모드인 경우 @media (prefers-color-scheme: dark) { body { background-color: #1e1f21 !important; color: #fff !important; } .cover-masonry ul li a { color: #fff !important; } .cover-masonry ul li .excerpt { color: #fff !important; } } 위 코드는 css 상에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해서 다크모드 일때만 해당 코드를 실행해주는 것 입니다. 저..