TriplexLab
-
유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기 안녕하세요 TriplexLab 입니다. 오늘은 유튜브(Youtube) 영상 컨텐츠를 16:9비율에 마쳐 반응형으로 만드는 방법에 대해서 살려보도록 하겠습니다. 먼저 유튜브로 가셔서 퍼오고 싶은 영상를 퍼옵니다. 그리고 하단 처럼 수정합니다. ✍️ 유튜브 영상 비율 코드 padding-bottom 계산식은 height / width * 100 입니다. /* 비디오 컨텐츠를 16:9비율에 마쳐 반응형으로 만들기 */ .video {position: relative; margin: 0 auto; max-width: 900px; width: 100%;} .video > div{ width: 100%; padding-bottom: 56.25%;} /* p..
유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기 안녕하세요 TriplexLab 입니다. 오늘은 유튜브(Youtube) 영상 컨텐츠를 16:9비율에 마쳐 반응형으로 만드는 방법에 대해서 살려보도록 하겠습니다. 먼저 유튜브로 가셔서 퍼오고 싶은 영상를 퍼옵니다. 그리고 하단 처럼 수정합니다. ✍️ 유튜브 영상 비율 코드 padding-bottom 계산식은 height / width * 100 입니다. /* 비디오 컨텐츠를 16:9비율에 마쳐 반응형으로 만들기 */ .video {position: relative; margin: 0 auto; max-width: 900px; width: 100%;} .video > div{ width: 100%; padding-bottom: 56.25%;} /* p..
2021.05.15 -
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..
jQuery rateYo 별점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..
2021.05.11 -
카카오 링크 api 사용하기 안녕하세요 TriplexLab입니다 :) 오늘은 JavaScript로 카카오 메세지 보내는 모습을 보여 드리겠습니다. 카카오 개발자 사이트에서 템플릿을 설정 카카오 개발자 사이트에서 템플릿을 설정할수도 있습니다. 카카오링크 > 메시지 템플릿라는 영역에서 '메시지 템플릿 빌더 바로가기' 버튼을 클릭하면 됩니다. 왼쪽 상단에 '+템플릿 만들기' 버튼을 클릭하시면 FEED버전, LIST버전, COMMERCE버전을 선택할수 있습니다. 또 이미지, 프로필, 제목/설명, 소셜...등등 다양하게 정보를 입력할수도 있습니다. 코드로 템플릿을 설정 저는 참고로 하단에 공식문서 예제를 참고 하였습니다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. ..
카카오 링크 api 사용하기카카오 링크 api 사용하기 안녕하세요 TriplexLab입니다 :) 오늘은 JavaScript로 카카오 메세지 보내는 모습을 보여 드리겠습니다. 카카오 개발자 사이트에서 템플릿을 설정 카카오 개발자 사이트에서 템플릿을 설정할수도 있습니다. 카카오링크 > 메시지 템플릿라는 영역에서 '메시지 템플릿 빌더 바로가기' 버튼을 클릭하면 됩니다. 왼쪽 상단에 '+템플릿 만들기' 버튼을 클릭하시면 FEED버전, LIST버전, COMMERCE버전을 선택할수 있습니다. 또 이미지, 프로필, 제목/설명, 소셜...등등 다양하게 정보를 입력할수도 있습니다. 코드로 템플릿을 설정 저는 참고로 하단에 공식문서 예제를 참고 하였습니다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. ..
2021.04.25 -
👨💻카카오톡 로그인 API 사용하기 안녕하세요 TriplexLab입니다 :) 오늘은 JavaScript로 카카오 로그인하는 모습을 보여 드리겠습니다. 🎯카카오톡 로그인 API 실행 결과 카카오톡 로그인 API 실행 결과 먼저 하단에 카카오 개발자 사이트를 방문하셔서 로그인을 해줍니다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 로그인 후 > 내 애플리케이션 탭을 클릭합니다. 그리고 애플리케이션 추가하기 버튼을 클릭합니다. 그럼 다음과 같은 팝업이 나옵니다. 만들고자 하는 앱 이름을 작성해 줍니다. 그럼 다음과 같은 페이지로 이동합니다. 요..
카카오톡 로그인 API 사용하기👨💻카카오톡 로그인 API 사용하기 안녕하세요 TriplexLab입니다 :) 오늘은 JavaScript로 카카오 로그인하는 모습을 보여 드리겠습니다. 🎯카카오톡 로그인 API 실행 결과 카카오톡 로그인 API 실행 결과 먼저 하단에 카카오 개발자 사이트를 방문하셔서 로그인을 해줍니다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 로그인 후 > 내 애플리케이션 탭을 클릭합니다. 그리고 애플리케이션 추가하기 버튼을 클릭합니다. 그럼 다음과 같은 팝업이 나옵니다. 만들고자 하는 앱 이름을 작성해 줍니다. 그럼 다음과 같은 페이지로 이동합니다. 요..
2021.04.22 -
👨💻 스크롤 방향 감지하기(마우스 스크롤 위아래) 안녕하세요 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;}..
스크롤 방향 감지하기👨💻 스크롤 방향 감지하기(마우스 스크롤 위아래) 안녕하세요 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;}..
2021.04.03 -
👍이미지 슬라이드 (Carousel) 안녕하세요 TriplexLab입니다. 오늘은 HTML + CSS3 만 가지고 이미지 슬라이드를 만들어 보겠습니다. 이번에 구현하는 이미지 슬라이드는 IE 버전은 지원되지 않습니다. 참고하세요 1 2 3 * { box-sizing: border-box; } .slider { width: 600px; text-align: center; border-radius: 10px; overflow: hidden; } .slides { display: flex; overflow-x: auto; /* overflow: hidden; */ scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling..
이미지 슬라이드 (Carousel)👍이미지 슬라이드 (Carousel) 안녕하세요 TriplexLab입니다. 오늘은 HTML + CSS3 만 가지고 이미지 슬라이드를 만들어 보겠습니다. 이번에 구현하는 이미지 슬라이드는 IE 버전은 지원되지 않습니다. 참고하세요 1 2 3 * { box-sizing: border-box; } .slider { width: 600px; text-align: center; border-radius: 10px; overflow: hidden; } .slides { display: flex; overflow-x: auto; /* overflow: hidden; */ scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling..
2021.03.20 -
lodash 라이브러리 정리 안녕하세요 TriplexLab입니다 :) 오늘은 lodash 라이브러리에 대해서 정리해보겠습니다.(lodash 사용법) lodash 같은 경우에는 FE개발자들이 정말 자주 하는 작업들을 쉽고, 단순하게 작업을 도와주는 역할을 합니다. 예를 들어서 JSON형태의 데이터들을 받아서 화면에 뿌려주는데, 그냥 뿌려주는 것이 아니라, 필요한 데이터만 필터링한다던가, 혹은 다른 연산을 하고, 뿌려준다던가 작업 등등을 할때 유요한 라이브러리입니다. 이 라이브러리를 몰랐을 때는 제가 필요한 함수(기능)를 직접 만들어서 사용했는데... 이제 그럴 필요가 없어졌네요ㅠ 제가 만든 거보다 그 이상으로 많은 함수들을 재공해 주니깐요ㅎㅎ Array _.findIndex (function() { con..
lodash 라이브러리 정리lodash 라이브러리 정리 안녕하세요 TriplexLab입니다 :) 오늘은 lodash 라이브러리에 대해서 정리해보겠습니다.(lodash 사용법) lodash 같은 경우에는 FE개발자들이 정말 자주 하는 작업들을 쉽고, 단순하게 작업을 도와주는 역할을 합니다. 예를 들어서 JSON형태의 데이터들을 받아서 화면에 뿌려주는데, 그냥 뿌려주는 것이 아니라, 필요한 데이터만 필터링한다던가, 혹은 다른 연산을 하고, 뿌려준다던가 작업 등등을 할때 유요한 라이브러리입니다. 이 라이브러리를 몰랐을 때는 제가 필요한 함수(기능)를 직접 만들어서 사용했는데... 이제 그럴 필요가 없어졌네요ㅠ 제가 만든 거보다 그 이상으로 많은 함수들을 재공해 주니깐요ㅎㅎ Array _.findIndex (function() { con..
2021.03.17 -
Pagination.js 커스터마이징2 안녕하세요. TriplexLab입니다. 오늘은 지난 시간에 이어서 Pagination.js 커스텀 마이징에 관해서 작성 해보겠습니다. 지난번에 작성한 글입니다. 참고로 보시면 좋습니다. Pagination.js 커스터마이징 안녕하세요. TriplexLab입니다. 즐거운 주말 보내고 있으신가요?ㅎ 오늘은 jQuery 플러그인중에 Pagination.js 커스텀 마이징을 간단하게 해보왔습니다. 모두 개시판 만들 때 기본적으로 pagination을 많 triplexlab.tistory.com 이번에는 Pagination.js를 가지고 Tab기능을 만들어 봤습니다. Tab 기능은 어느 홈페이지든 간에 정말 자주 사용하는 기능중에 하나 입니다. 보통 퍼블리셔라면 마크업 만들..
Pagination.js 커스터마이징2Pagination.js 커스터마이징2 안녕하세요. TriplexLab입니다. 오늘은 지난 시간에 이어서 Pagination.js 커스텀 마이징에 관해서 작성 해보겠습니다. 지난번에 작성한 글입니다. 참고로 보시면 좋습니다. Pagination.js 커스터마이징 안녕하세요. TriplexLab입니다. 즐거운 주말 보내고 있으신가요?ㅎ 오늘은 jQuery 플러그인중에 Pagination.js 커스텀 마이징을 간단하게 해보왔습니다. 모두 개시판 만들 때 기본적으로 pagination을 많 triplexlab.tistory.com 이번에는 Pagination.js를 가지고 Tab기능을 만들어 봤습니다. Tab 기능은 어느 홈페이지든 간에 정말 자주 사용하는 기능중에 하나 입니다. 보통 퍼블리셔라면 마크업 만들..
2021.03.16 -
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:..
Pagination.js 커스터마이징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:..
2021.03.13 -
npm 패키지 배포하기 안녕하세요 TriplexLab 입니다 :) 오늘은 자신이 직접 개발한 자바스크립트 패키지를 npm에 배포하는 방법에 대해서 알아보겠습니다. npm 로그인 npm 계정을 만드셨다면 터미널에서 npm login 커맨드를 입력하고 npm 사이트에서 계정을 만들 때 입력했던 개인 정보들을 입력합니다. $ npm login (...) Logged in as daleseo on https://registry.npmjs.org/. 제대로 로그인이 되었다면 npm whoami 커맨드를 입력했을 때, 본인의 username이 출력될 것입니다. $ npm whoami triplexlab 패키지 생성 npm init -y package.json 파일은 모든 npm 패키지에 반드시 있어야 하는 파일입니..
npm 패키지 배포하기npm 패키지 배포하기 안녕하세요 TriplexLab 입니다 :) 오늘은 자신이 직접 개발한 자바스크립트 패키지를 npm에 배포하는 방법에 대해서 알아보겠습니다. npm 로그인 npm 계정을 만드셨다면 터미널에서 npm login 커맨드를 입력하고 npm 사이트에서 계정을 만들 때 입력했던 개인 정보들을 입력합니다. $ npm login (...) Logged in as daleseo on https://registry.npmjs.org/. 제대로 로그인이 되었다면 npm whoami 커맨드를 입력했을 때, 본인의 username이 출력될 것입니다. $ npm whoami triplexlab 패키지 생성 npm init -y package.json 파일은 모든 npm 패키지에 반드시 있어야 하는 파일입니..
2021.03.07 -
ECMAScript [ES6-11] 최신 문법 정리 안녕하세요 TriplexLab입니다. 오늘은 javascript ECMAScript [ES6-11] 최신 문법에 대해서 정리해보겠습니다. 👉Shorthand Property Names( 객체 초기자 ) /** * Shorthand Property Names * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer */ { const TripexLab1 = { name: 'Ellie', age: '18', }; const name = 'Ellie'; const age = '18'; // 💩옛날 옛적에 사용했던 방법 const TripexLab2 ..
ECMAScript [ES6-11] 최신 문법 정리ECMAScript [ES6-11] 최신 문법 정리 안녕하세요 TriplexLab입니다. 오늘은 javascript ECMAScript [ES6-11] 최신 문법에 대해서 정리해보겠습니다. 👉Shorthand Property Names( 객체 초기자 ) /** * Shorthand Property Names * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer */ { const TripexLab1 = { name: 'Ellie', age: '18', }; const name = 'Ellie'; const age = '18'; // 💩옛날 옛적에 사용했던 방법 const TripexLab2 ..
2021.02.19 -
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..
drop down menudrop 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..
2021.02.11