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

CSS 아이콘 라이브러리 fontello 사용하기 안녕하세요. TriplexLab 입니다. :) 오늘은 CSS 라이브러리 중 하나인 fontello에 대해서 알아보겠습니다. 여러 아이콘을 폰트로 제공하는 서비스입니다. 👀 fontello를 이용해서 아이콘을 웹페이지에 삽입하는 방법 1. http://fontello.com/ 페이지에 접속한다. 2. 원하는 아이콘을 선택한다. 3. 우측 상단에 Download webfont 클릭을 한다. 그럼 다운로드 받으면 압축파일을 풀고, 디렉토리(파일)을 자체를 현재 자신이 진행하고 있는 프로잭트 디렉토리(파일)에다가 붙여넣기를 한다. demo.html 파일을 보면 밑에와 같은 화면이 나올것에요. 여기서 아이콘 옆에있는 이름들을 class에 갔다가 붙이는 것이에요. ..

UI/UX 디자인 아이디어 공유 ​Ferlioni Fashion Children Clothes Home Page Animation by Zhenya & Artem Product design | Visual design | Mobile design | Web design | UX design | Interface design | Interface animations Email: hey@zhenyary.com https://dribbble.com/

반응형일 작업할때 유지할수 있는 수직 정렬 안녕하세요 TriplexLab 입니다 :) 오늘은 반응형 리스폰일때 유지할수 있는 수직 정렬에 관해서 이야기를 해볼게요. 크게 2가지로 나눌수가 있어요 1번 display: table, table-cell을 하는 방법 2번 position: absolute,와 relative로 하는 방법. 오늘은 먼저 display: table, table-cell 속성을 이용해서 수직 정렬를 해볼게요 HTML 심플하고 고저스한 디자인의 서랍입니다. 튀어나온 손잡이 없이 깔끔하게 처리하여 다양한 용도로 사용할 수 있습니다. DETAIL VIEW CSS .box_bg { height: 50vh; /*vh은 %게념과 비슷하다. 다만 %는 직개 부모 에도 %가 선언되어 있어야 한다면..

🙋‍♂️ inline-block과 float 중 어떤 것을 써야 할까? 안녕하세요 TriplexLab 입니다 :) 오늘은 가로 배치 속성에 대해서 이야기를 해볼게요 가로 배치 속성 중에서 inline-block과 float 2가지 속성이 있어요. inline-block에 대해서 이야기를 해볼게요 각각의 박스들을 inline-block 가로 정렬을 시켜보겠습니다. .grid { width: 500px; margin: 0 auto; background-color: dimgrey; text-align: center; /*inline-block의 장점은 폰트의 성질도 포함되고 있어서 text-align으로 정렬을 쉽게 할수가 있다.*/ font-size: 0; /*양 옆쪽, 밑에 4px정도 여백을 없에주는 방법..

JavaScript 타이밍 제어하기 안녕하세요 TriplexLab 입니다. JavaScript 타이밍 제어하는 메서드에 관해서 살펴보겠습니다. 🎯 JavaScript 타이밍 종류 속성 설명 setTimeout 설정 해놓은 Time 이 지나고 난후에 실행한다. clearTimeout clearTimeout는 setTimeout을 취소 시킬수 있다. setInterval 설정 해놓은 Time 동안 계속 반복한다. clearInterval clearTimeout는 setInterval을 취소 시킬수 있다. requestAnimationFrame requestAnimationFrame는 setInterval를 보안한 것이다. cancelAnimationFrame cancelAnimationFrame는 reque..

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번 $(..

css3 Boxsizing 정리 안녕하세요 TriplexLab 입니다. 오늘은 css3 속성인 Box-sizing에 관해서 알아볼게요 css를 공부하다 보면 기본적으로 box model(박스모델)이라는 5가지 속성을 배우게 될텐데 (width, heigh, padding, border, margin) 5가지를 일리리 계산해서 width, heigh값을 조절해야 하는 벙거러움이 있었다. 선배 계발자분들은 css3가 나오기 전에는 width, heigh값을 일리리 계산해줬다는 말.... 그래서 더이상 노가다 하지 말라고 W3C에서 Box-sizing이라는 것을 배포해줬네요. 먼저 코딩을 보기전에 호환성을 채크해볼까요?? 거의 완벽하게 호환이 되는것을 확인할수 있어요. Hello World! Hello Wor..

📌패럴렉스 스크롤 만들기 background-attachment: fixed; 안녕하세요 TriplexLab입니다. 오늘 해볼 것은 바로 패럴렉스 만들기입니다. 패럴렉스란 나눠진 페이지를 스크롤할 때 뒷 배경을 고정시켜 놔서 안 움직이게 하는 것입니다. 즉 스크롤을 하면 다음 페이지가 현재 페이지를 덮습니다. 라고 생각하시면 이해하시기 편합니다. 브라우저 호환성에 대해서 먼저 체크를 해보죠!! Can I use... Support tables for HTML5, CSS3, etc CSS background-attachment Method of defining how a background image is attached to a scrollable element. Values include `scroll..

css3 transition 안녕하세요 TriplexLab입니다. css3 속성중 transition은 원하는 요소에 자연스러운 1.변형을 일으키거나 2.애니메이션효과를 줄 수 있습니다. 오늘은 transition 변형에 관해서 알아보도록 하겠습니다. css3 속성은 최신 기술이기 때문에 인터넷 익스플로러 9 이하 버전은 지원하지 않습니다. Can I use... Support tables for HTML5, CSS3, etc caniuse.com 저 같은 퍼블리셔들이 혹은 프론트앤드 개발자들이 항상 최신 기술에 관해서 브라우저들의 버전들 마다 호환성을 지원해주는지 안해주는지 확인해주는 싸이트가 있습니다. 속성명 설명 transition-property: width 어떤 속성에게 변형을 적용할지 지정합니..

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

React / ES6 / Webpack 프로덕션 빌드 최적화 안녕하세요 TriplexLab 입니다. 오늘은 요즘 프론트앤드 개발에 필수인 ES6, Webpack, React 의 환경 설정에 대해서 알아보도록 하겠습니다. 많은 분들이 저에게 React, Webpack 빌드 최적화에 대해서 많이들 물어보셔서 이번 기회에 정리합니다. package.json 파일은 현재 프로젝트에서 사용하는 라이브러리(의존성 모듈)의 버전들을 관리하는 파일입니다. 한번 설정해놓으면 다른 프로젝트 할때마다 기존 package.json 파일들을 참고 하는것 같습니다. 왜냐하면 버전이 달라서 빌드할때 에러가 날 경우가 있습니다. 그럴때 참고하는것이 좋은것 같습니다. //package.json { "name": "React", "ve..