UI/UX 디자인 아이디어 공유 Med Pro App by Cadabra Studio Med Pro App The application was developed to escape long queues at hospitals. It allows easily set an appointment with a particular specialist, so you can visit a required doctor nearby anytime. With the help of several filter options, you can find specialist at convi dribbble.com

크롬 개발자도구 TIP 안녕하세요 오늘은 크롬 개발자도구 TIP에 관해서 살펴보도록 하겠습니다. 👉 Devtools Screenshot(개발자 도구 스크린샷) 크롬에서 개발자 도구를 여시고 command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생겨요. 거기서 screenshot이라고 검색하면 4가지 종류의 스크린샷이 있습니다. 상황에 맞에 본인에게 필요한거 선택해서 쓰시면 됩니다. 👉 Coverage(적용 범위) 이것도 마찬가지로 크롬에서 개발자 도구를 여시고 command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생기면 coverage라고 검색하고 앤터키를 누르면 아래와 같이 창이 생깁니다. 그럼 여기서 새로고침 버튼을 클릭하면 아래와 같이 css와, js파일들을 ..

테오의 스프린트 체험 1기 안녕하세요 TriplexLab입니다. 오늘은 제가 이번에 경험한 구글 스프린트 체험에 관한 서 이야기를 해보도록 하겠습니다. 먼저 이번 1기에 관한 자세한 배경 이야기를 알고 싶은 분들은 아래 링크를 참고해주세요!!👇👇 테오의 구글 스프린트(체험) 1기 💨 구글 스프린트 해보실래요? 혹시 5일만 진행하면 해보고 싶으신분 계신가요? 원격으로? 하루 1시간? 그냥 구글 스프린트 5일만 돌려보는거에요 잘 되든 말든... velog.io 🙋‍♂️나의 현 상황 및 목적을 이야기 하자면 이번 스프린트에서 얻고자 했던 것 - 새로운 사람들과 개발에 관한 커뮤니케이션을 해보고, 프런트 개발의 역할 중 데이터 바인딩에 관해서 익숙해지는 것 기술 스택 - html, css, JavaScript ..

🖱자바스크립트 현재의 스크롤바 위치 가져오는 방법 안녕하세요 TriplexLab입니다. 오늘은 자바스크립트 현재의 스크롤바 위치 가져오는 방법에 관해서 살펴보도록 하겠습니다. 👉만들어볼 예제 잠깐 하단의 영상을 봐주세요 👉유튜브 영상[링크참고] 영상을 보시면 아시겠지만 브라우저 스크롤 위치에 맞게 파란 바가 같이 채워지는 모습을 확인할 수 있습니다. 이것은 생각보다 간단해요. 😃 😃 👉 소스코드 정리 (function() { const $ = (ele) => document.querySelector(ele) let maxScrollValue; const resizeHandler = () => { maxScrollValue = document.body.offsetHeight - window.innerHei..

📡 Live Sass 컴파일하기 안녕하세요 TriplexLab 입니다. 오늘은 VS code에서 Live Sass Compiler 확장 프로그램에 관해서 살펴보도록 하겠습니다. 뭐 사실 실무에서는 Node.js를 사용해 npm에 있는 node-sass을 사용하겠지만 여기서는 초 간단하게 scss를 사용하고 싶은 분들을 위해서 설명을 하도록 하겠습니다. 예를 들어서 다음과 같은 디렉토리 구조가 있다고 합시다. 다음과 같은 Live Sass Compiler 확장 프로그램을 설치 합시다. 이 확장프로그램은 폴더별 컴파일 기능을 지원해줍니다. 확장프로그램 설치 후 settings.json파일을 열고 아래와 같이 설정해주면 각각의 디렉토리 경로안에 scss 파일을 css 파일로 컴파일해준다. "liveSassCo..

블랙커피 스터디 소개 블랙커피 스터디를 소개합니다. 아래 링크를 클릭해서 확인할수 있습니다 :) 블랙커피를 소개합니다. 훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다 - A.M. 린드버그(미국의 작가, 수필가) www.makerjun.com moonbucks-menu 스탭3 회고 안녕하세요 TriplexLab 입니다. 오늘은 moonbucks-menu 스탭2을 이어서 스탭3 회고를 작성해보겠습니다. moonbucks-menu 스탭1 회고 moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌 triplexlab...

UI/UX 디자인 아이디어 공유 Estudio Mobile App UI Kit I by Anton Tkachev Estudio Mobile App UI Kit I Estudio Mobile App UI Kit Buy now Available on UI8 Good for sale Estudio Mobile App UI Kit Estudio Mobile App UI Kit by Nimasha is an educational app focused on improving the experience of learning courses online. This UI Kit contains 58 UI screens. 29 scr dribbble.com

moonbucks-menu 스탭2 중간 회고 안녕하세요 TriplexLab 입니다. 오늘은 moonbucks-menu 스탭1을 이어서 스탭2 회고를 작성해보겠습니다. moonbucks-menu 스탭1 회고 moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌 triplexlab.tistory.com moonbucks-menu 스탭1 회고 참고해주세요. 👍👍 👉 스탭 2 중간즘 에서 얻은 인사이트 1. 상태값이 중요한 이유는 사용자에게 입력 받은 정보(상태)를 저장하고, 불러와줘야 동적인 웹페이지를 만들수가 있습니다. - (EX)..

코드블럭 TEXT내용 클립보드 복사하기 안녕하세요 TriplexLab 입니다. 이번 시간에는 navigator를 이용한 코드블럭의 TEXT내용을 클립보드에 복사하는 방법에 관해서 살펴보도록 하겠습니다. 👉 코드설명 1. pre라는 시작 엘리먼트 바로 하단에 안에 button엘리먼트를 동적으로 삽입합니다.(렌더링 시점) $('.article_view pre').insertAdjacentHTML( 'afterbegin', '' ); 2. css에서 data-txt속성에 있는 텍스트를 읽옵니다. /* data-txt속성에 있는 텍스트를 읽옵니다. */ .code_btn:before{ content: attr(data-txt);} 3. 버튼을 클릭하면 navigator.clipboard.writeText() 메..

moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다 - A.M. 린드버그(미국의 작가, 수필가) www.makerjun.com 👉 스탭 1에서 얻은 인사이트 1. 중복 코드를 하나의 함수로 따로 빼서 관리한다는 것 2. 요구사항을 단계별로 세세하게 나누는 게 중요하다는 걸 알게 됐다. 3. DOM 요소를 가져올 때는 $기호를 써서 변수로 사용할 수 있는 게 좋았다.(jquery 아님) 4. 새롭게 알게 된 메서드 insertAdjacentHTML // step1 요구..

popup 끝나는 날짜 설정하여 자동으로 내리기 안녕하세요 TriplexLab 입니다. 오늘은 popup을 끝나는 날짜 설정에 관해서 이야기를 해보도록 하겠습니다. 먼저 제가 지난 포스트 중에서 아래와 같은 내용으로 팝업을 컨트롤 하는것에 관해서 이야기를 했었습니다. 아래 링크를 참고 하세요:) jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 ⚙️ jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 에 관해서 살펴 보겠습니다.(자바스크립트 cookie) 레 triplexlab.tistory.com 이번 시간에는 popup을 등록하고, 오늘 하루 그만 보기 설정까지 했다면, 좀더 나아가서 끝나..

[JavaScript] 현재시간 timestamp로 Mock Data 만들기 안녕하세요 TriplexLab 입니다. 오늘은 JavaScript로 현재시간의 Mock Data를 만들어 보겠습니다. 결과 ) 👇 0: {id: 1, userID: 'triplexlab', timestamp: '2021. 11. 10. 오후 07:26'} 1: {id: 2, userID: 'younhoso', timestamp: '2021. 11. 10. 오후 07:27'} 2: {id: 3, userID: 'triplexlab', timestamp: '2021. 11. 10. 오후 07:28'} 3: {id: 4, userID: 'younhoso', timestamp: '2021. 11. 10. 오후 07:29'} 4: {id..