TriplexLab
-
👏 css 꿀팁 웹서비스 5가지 안녕하세요 TriplexLab 입니다. 오늘은 css 작업할때 유용하게 사용되는 꿀팁 3가지를 정리해보겠습니다. 프로젝트 할 때는 이런 도구를 잘 활용하는 면 이득을 보는 것 같네요ㅎㅎ 하지만 개인 공부를 하는 차원에서는 이런 도구를 활용하면 오히려 독이 될 수 있습니다. (개인 공부할 때는 바닥부터 만들어 보는 것이 기억에 오래 남습니다 👍👍) 📌 CSS Grid Generator CSS 그리드를 간편하게 만들 수 있도록 도와주는 온라인 서비스입니다. 그리드 행과 열, 사이 여백 등을 설정하면 HTML 코드와 CSS 코드를 생성해줍니다. CSS Grid Generator cssgrid-generator.netlify.app 행과 열 개수가 많은 그리드를 만들 때 깔끔한 ..
css 꿀팁 웹서비스 5가지👏 css 꿀팁 웹서비스 5가지 안녕하세요 TriplexLab 입니다. 오늘은 css 작업할때 유용하게 사용되는 꿀팁 3가지를 정리해보겠습니다. 프로젝트 할 때는 이런 도구를 잘 활용하는 면 이득을 보는 것 같네요ㅎㅎ 하지만 개인 공부를 하는 차원에서는 이런 도구를 활용하면 오히려 독이 될 수 있습니다. (개인 공부할 때는 바닥부터 만들어 보는 것이 기억에 오래 남습니다 👍👍) 📌 CSS Grid Generator CSS 그리드를 간편하게 만들 수 있도록 도와주는 온라인 서비스입니다. 그리드 행과 열, 사이 여백 등을 설정하면 HTML 코드와 CSS 코드를 생성해줍니다. CSS Grid Generator cssgrid-generator.netlify.app 행과 열 개수가 많은 그리드를 만들 때 깔끔한 ..
2021.07.31 -
😸 TypeScript 설치및 환경설정 안녕하세요 TriplexLab 입니다. 오늘은 TypeScript 설치관한 이야기를 해보도록 하겠습니다. 😀 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식 사이트에 들어가서 보면 다음과 같은 2가지 버전을 선택하여 다운로드 할수 있습니다. 왼쪽에 있는 LTS는 'Long Term Support'의 줄임말로 'Node.js 커뮤니티에 의해 장기간 지원받을 수 있는 버전'이라는 뜻입니다. LTS 버전이 되면, 그 뒤로 30개월 동안은 해당 버전에서 발견되는 각종 버그 등에 대한 패치(수정)를 Node.js 커뮤니티로부터 보장받을 수 있습니다. LT..
TypeScript 설치및 환경설정😸 TypeScript 설치및 환경설정 안녕하세요 TriplexLab 입니다. 오늘은 TypeScript 설치관한 이야기를 해보도록 하겠습니다. 😀 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식 사이트에 들어가서 보면 다음과 같은 2가지 버전을 선택하여 다운로드 할수 있습니다. 왼쪽에 있는 LTS는 'Long Term Support'의 줄임말로 'Node.js 커뮤니티에 의해 장기간 지원받을 수 있는 버전'이라는 뜻입니다. LTS 버전이 되면, 그 뒤로 30개월 동안은 해당 버전에서 발견되는 각종 버그 등에 대한 패치(수정)를 Node.js 커뮤니티로부터 보장받을 수 있습니다. LT..
2021.07.27 -
😏 CSS 선택자 :nth-child 안녕하세요 TriplexLab 입니다. 오늘은 CSS 선택자 :nth-child 대해서 정리해볼게요 📌 다섯 번째 요소 만 선택하기 li:nth-child(5) { color: green; } 📌 6번째 부터 요소 선택 li:nth-child(n+6) { color: green; } 📌 처음 부터 다섯 가지만 선택하십시오. li:nth-child(-n+5) { color: green; } 📌 매 넷째 선택, 처음 시작 li:nth-child(4n-7) { /* or 4n+1 */ color: green; } 📌 홀수 또는 짝수 만 선택 li:nth-child(odd) { color: green; } li:nth-child(even) { color: green; } 📌..
CSS 선택자 :nth-child😏 CSS 선택자 :nth-child 안녕하세요 TriplexLab 입니다. 오늘은 CSS 선택자 :nth-child 대해서 정리해볼게요 📌 다섯 번째 요소 만 선택하기 li:nth-child(5) { color: green; } 📌 6번째 부터 요소 선택 li:nth-child(n+6) { color: green; } 📌 처음 부터 다섯 가지만 선택하십시오. li:nth-child(-n+5) { color: green; } 📌 매 넷째 선택, 처음 시작 li:nth-child(4n-7) { /* or 4n+1 */ color: green; } 📌 홀수 또는 짝수 만 선택 li:nth-child(odd) { color: green; } li:nth-child(even) { color: green; } 📌..
2021.07.22 -
🍵 brew로 git 설치하기 안녕하세요 TriplexLab 입니다. 오늘은 brew로 git 설치하는 방법에관해서 설펴보도록 하겠습니다. Homebrew 설치가 안된분들은 지난 글을 보고 오시면 됩니다. 🏡 Homebrew와 Cask, 설치및 기본 사용법 Homebrew와 Cask, 설치 및 기본 사용법 안녕하세요 TriplexLab입니다. 먼저 항상 저의 블로그를 찾아주시는 분들에게 감사의 인사를 드립니다🙇🏼♂️ 오늘은 Homebrew 이라는 괜찮은 '패키지 관리 triplexlab.tistory.com brew로 설치 하셨다고 보고 바로 git 설치를 해보겠습니다. 1) brew로 git을 설치하려면 brew install git이라고 쓰고 실행하면 됩니다. 2) 조금 기다리면 아래와 같은 화면..
brew로 git 설치하기🍵 brew로 git 설치하기 안녕하세요 TriplexLab 입니다. 오늘은 brew로 git 설치하는 방법에관해서 설펴보도록 하겠습니다. Homebrew 설치가 안된분들은 지난 글을 보고 오시면 됩니다. 🏡 Homebrew와 Cask, 설치및 기본 사용법 Homebrew와 Cask, 설치 및 기본 사용법 안녕하세요 TriplexLab입니다. 먼저 항상 저의 블로그를 찾아주시는 분들에게 감사의 인사를 드립니다🙇🏼♂️ 오늘은 Homebrew 이라는 괜찮은 '패키지 관리 triplexlab.tistory.com brew로 설치 하셨다고 보고 바로 git 설치를 해보겠습니다. 1) brew로 git을 설치하려면 brew install git이라고 쓰고 실행하면 됩니다. 2) 조금 기다리면 아래와 같은 화면..
2021.07.13 -
🥘 점심 메뉴를 내 맘대로 정렬하기 안녕하세요 TriplexLab입니다. 오늘은 2가지에 관해서 살펴보도록 하겠습니다. 1) 오늘은 점심 메뉴의 data를 내 맘대로 정렬해서 조회하기 (배열의 요소를 유용하게 활용하는 방법) 2) fetch함수를 사용해서 서버와 비동기 통신 하기 new Promise객체와 fetch함수를 같이 사용되는 경우는 흔하지 않습니다. 그래서 이번에 정리했습니다 :) Promisify 검색하면 관한 정보를 찾을수 있습니다. 자바스크립트 코드를 보시면 아시겠지만, 정렬하는 규칙? 대로 함수 별로 묶어놨습니다.(data정렬 규칙) 서버와 비동기 통신 같은 경우에는 Promise 객체는 항상 결과를 줄 수 있는 공급자(Provider)이고, 그것의 then 메소드는 그 결과를 소비하는..
점심 메뉴를 내맘대로 정렬하기🥘 점심 메뉴를 내 맘대로 정렬하기 안녕하세요 TriplexLab입니다. 오늘은 2가지에 관해서 살펴보도록 하겠습니다. 1) 오늘은 점심 메뉴의 data를 내 맘대로 정렬해서 조회하기 (배열의 요소를 유용하게 활용하는 방법) 2) fetch함수를 사용해서 서버와 비동기 통신 하기 new Promise객체와 fetch함수를 같이 사용되는 경우는 흔하지 않습니다. 그래서 이번에 정리했습니다 :) Promisify 검색하면 관한 정보를 찾을수 있습니다. 자바스크립트 코드를 보시면 아시겠지만, 정렬하는 규칙? 대로 함수 별로 묶어놨습니다.(data정렬 규칙) 서버와 비동기 통신 같은 경우에는 Promise 객체는 항상 결과를 줄 수 있는 공급자(Provider)이고, 그것의 then 메소드는 그 결과를 소비하는..
2021.06.23 -
⏰ 사용자 시간 지정(예약 기능) 안녕하세요 TriplexLab 입니다. 오늘은 사용자 시간 지정 기능에 관해서 살펴보도록 하겠습니다 :) 이게 무슨 기능인지 감이 안오시는 분들을 위해서 캡처 사진 공유합니다. 위와 같이 사용자가 직접 원하는 시간을 설정할수 있는 기능 입니다. 위에 캡처본은 비록 라이트모드, 다크모드를 변경하는 것만 할수 있지만 코딩을 다루는 저희로써는 이것을 활용해서 할수 있는 것이 많습니다 :) ✨ 사용자 시간 지정(예약 기능) 활용 예시 적절한 예시는 아니지만 비슷한 응용 예시는 다른 링크를 참고해주세요 👇👇 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레..
사용자 시간 지정(예약 기능)⏰ 사용자 시간 지정(예약 기능) 안녕하세요 TriplexLab 입니다. 오늘은 사용자 시간 지정 기능에 관해서 살펴보도록 하겠습니다 :) 이게 무슨 기능인지 감이 안오시는 분들을 위해서 캡처 사진 공유합니다. 위와 같이 사용자가 직접 원하는 시간을 설정할수 있는 기능 입니다. 위에 캡처본은 비록 라이트모드, 다크모드를 변경하는 것만 할수 있지만 코딩을 다루는 저희로써는 이것을 활용해서 할수 있는 것이 많습니다 :) ✨ 사용자 시간 지정(예약 기능) 활용 예시 적절한 예시는 아니지만 비슷한 응용 예시는 다른 링크를 참고해주세요 👇👇 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레..
2021.06.05 -
👩💻 자바스크립트 fetch, then, catch [Promise] 응용하고 안녕하세요 TriplexLab입니다. 오늘은 지난 시간에 했던 fetch함수 관해서 응용해보도록 하겠습니다 :) 하단에 지난시간에 다루었던 fetch함수 관한 글 링크 남겨 보겠습니다. 관심 있는 분들은 보세요~ 🙋♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기 자바스크립트 fetch, then, catch [Promise] 이해하기 안녕하세요 TriplexLab입니다. 오늘은 Promise관해서 살펴보도록 하겠습니다. fetch함수의 동작 흐름 해석하기 fetch함수는 Promise객체를 리턴합니다. 나중. triplexlab.tistory.com 위에에 작성한 코드는 렌덤으로 메뉴를 선택하..
자바스크립트 fetch, then, catch [Promise] 응용하고👩💻 자바스크립트 fetch, then, catch [Promise] 응용하고 안녕하세요 TriplexLab입니다. 오늘은 지난 시간에 했던 fetch함수 관해서 응용해보도록 하겠습니다 :) 하단에 지난시간에 다루었던 fetch함수 관한 글 링크 남겨 보겠습니다. 관심 있는 분들은 보세요~ 🙋♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기 자바스크립트 fetch, then, catch [Promise] 이해하기 안녕하세요 TriplexLab입니다. 오늘은 Promise관해서 살펴보도록 하겠습니다. fetch함수의 동작 흐름 해석하기 fetch함수는 Promise객체를 리턴합니다. 나중. triplexlab.tistory.com 위에에 작성한 코드는 렌덤으로 메뉴를 선택하..
2021.06.03 -
[ScrollMagic] 스크롤매직 라이브러리 안녕하세요 TriplexLab 입니다. 오늘은 스크롤매직 라이브러리 관해서 간단한 인터렉션을 만들어 봤습니다. 바로 스크롤에 반응하는 애니메에션 동작 입니다. #start { height: 100vh; } .content { width: 170px; position: absolute; top: 50%; left: 10%; transform: translate(-50%, -50%); } .content img {width: 100%;} .info { height: 100vh; background-color:cornflowerblue; } .footer { height: 100vh; background-color:yellowgreen; } (function(){..
[ScrollMagic] 스크롤매직 라이브러리[ScrollMagic] 스크롤매직 라이브러리 안녕하세요 TriplexLab 입니다. 오늘은 스크롤매직 라이브러리 관해서 간단한 인터렉션을 만들어 봤습니다. 바로 스크롤에 반응하는 애니메에션 동작 입니다. #start { height: 100vh; } .content { width: 170px; position: absolute; top: 50%; left: 10%; transform: translate(-50%, -50%); } .content img {width: 100%;} .info { height: 100vh; background-color:cornflowerblue; } .footer { height: 100vh; background-color:yellowgreen; } (function(){..
2021.05.31 -
이벤트 위임 (Event Delegation) 안녕하세요 TriplexLab입니다 :) 오늘은 이벤트 위임에 관해서 살펴보도록 하겠습니다. ✍️ 이벤트 위임 코드 다음 코드는 이벤트를 핸들러를 등록하고, 클래스를 토글 하는 코드입니다. 근데 아래 코드는 한 가지 문제가 있습니다. //이벤트 위임 (Event Delegation) (function() { const list = document.querySelector('#list'); for (let item of list.children) { item.addEventListener('click', function(e) { e.target.classList.toggle('done'); }); } })(); 다음과 같이 엘리먼트를 새로 추가하게 되면 이벤트..
이벤트 위임(Event Delegation)이벤트 위임 (Event Delegation) 안녕하세요 TriplexLab입니다 :) 오늘은 이벤트 위임에 관해서 살펴보도록 하겠습니다. ✍️ 이벤트 위임 코드 다음 코드는 이벤트를 핸들러를 등록하고, 클래스를 토글 하는 코드입니다. 근데 아래 코드는 한 가지 문제가 있습니다. //이벤트 위임 (Event Delegation) (function() { const list = document.querySelector('#list'); for (let item of list.children) { item.addEventListener('click', function(e) { e.target.classList.toggle('done'); }); } })(); 다음과 같이 엘리먼트를 새로 추가하게 되면 이벤트..
2021.05.20 -
Javascript의 prototype 정리 안녕하세요 TriplexLab입니다. 오늘은 Javascript의 prototype 관해서 살펴보도록 하겠습니다. 🎯 OOP 계념 Javascript가 2015부터 class문법이 추가되면서 class문법 관해서 많은 공부를 하다가, 계념이 어느 정도 잡폈을때즘 Javascript의 prototype라는 문법도 있다라는 사실을 뒤늦게 알게 되었습니다. (햔 3년전즘인가 Javascript는 prototype 기반의 언어다 라고 들은 기억이 있긴 하는데... 그땐 필요성은 못 느끼고, 이해하기 힘들어서 그냥 넘어간 것 같네요...) 그래서 최근에 class(객체)기반의 패러다임이 이해가 어느 정도 되니깐, 저절로 prototype 쪽도 이해가 되는 것 같습니다...
Javascript의 prototype 정리Javascript의 prototype 정리 안녕하세요 TriplexLab입니다. 오늘은 Javascript의 prototype 관해서 살펴보도록 하겠습니다. 🎯 OOP 계념 Javascript가 2015부터 class문법이 추가되면서 class문법 관해서 많은 공부를 하다가, 계념이 어느 정도 잡폈을때즘 Javascript의 prototype라는 문법도 있다라는 사실을 뒤늦게 알게 되었습니다. (햔 3년전즘인가 Javascript는 prototype 기반의 언어다 라고 들은 기억이 있긴 하는데... 그땐 필요성은 못 느끼고, 이해하기 힘들어서 그냥 넘어간 것 같네요...) 그래서 최근에 class(객체)기반의 패러다임이 이해가 어느 정도 되니깐, 저절로 prototype 쪽도 이해가 되는 것 같습니다...
2021.05.18 -
Javascript Typing Animation 안녕하세요 TriplexLab 입니다. Typing Animation 오늘은 Javascript Typing Animation에 관해서 살펴보도록 하겠습니다. 프론트개발자분들이 응근히 자주 사용하는 Typing Animation 코드를 소개합니다. Typing Animation 코드 @keyframes cursor { to { border-color: transparent; } } .txt { display: table-cell; vertical-align: middle; border-right: 0.05em solid #F81857; animation: cursor 0.5s ease infinite; } const content = 'javascript..
Javascript Typing AnimationJavascript Typing Animation 안녕하세요 TriplexLab 입니다. Typing Animation 오늘은 Javascript Typing Animation에 관해서 살펴보도록 하겠습니다. 프론트개발자분들이 응근히 자주 사용하는 Typing Animation 코드를 소개합니다. Typing Animation 코드 @keyframes cursor { to { border-color: transparent; } } .txt { display: table-cell; vertical-align: middle; border-right: 0.05em solid #F81857; animation: cursor 0.5s ease infinite; } const content = 'javascript..
2021.05.17 -
이벤트 기획전 페이지 안녕하세요 TriplexLab 입니다. 오늘은 이벤트 기획전 페에지에 관해서 살펴보도록 하겠습니다. 참고로 이번에 다룰 내용에는 예전에 올려놓은 이야기들과 조금 종복된 내용이 있습니다. 자세한 내용은 아래 링크를 확인 해주시면 됩니다. 스크롤 방향 감지하기 안녕하세요 TriplexLab입니다 :) 오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; clear: bo.. triplexlab.tistory.com jquery 이벤트 연결하기(event binding) 안녕하세요 TriplexLab 입니다 :..
이벤트 기획전 페이지이벤트 기획전 페이지 안녕하세요 TriplexLab 입니다. 오늘은 이벤트 기획전 페에지에 관해서 살펴보도록 하겠습니다. 참고로 이번에 다룰 내용에는 예전에 올려놓은 이야기들과 조금 종복된 내용이 있습니다. 자세한 내용은 아래 링크를 확인 해주시면 됩니다. 스크롤 방향 감지하기 안녕하세요 TriplexLab입니다 :) 오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; clear: bo.. triplexlab.tistory.com jquery 이벤트 연결하기(event binding) 안녕하세요 TriplexLab 입니다 :..
2021.05.16