창고

보호되어 있는 글입니다.

코드펜 Jon Kanter 님의 Handy Tally Counter 예제를 보고 원리를 내 방식대로 재구현해보았다. 차이점은 원본은 열마다 0~9까지 DOM이 존재하고, 이걸 9번 위로 올리는 방식이면, 나는 그냥 열마다 now, prev 2개의 DOM만 존재하고, setTimeout과 animationend를 이용하여 내용을 갈아치울거다. 그리고 col의 갯수가 몇개나 늘어나든 상관없이 짜볼거다 (0~999도 되고 0~99999도 되고) 데모 페이지 : https://ohikmyeong.github.io/code-pen-copy/Hand-Tally-Counter/mine/ Handy Tally Counter-Copy 0 1 0 1 0 1 0 1 ohikmyeong.github.io See the Pen..

비슷한 내용을 자주 올리지만 다시 짤 때마다 원리를 이해한 상태에서 더 간결해지고 있으므로... 드래그나 리사이즈를 할 때마다 해당 모달의 z-index가 가장 상위로 올라온듯하게 보이도록 수정도 하였다. HTML + CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 Draggable *{margin:0;padding:0;box-sizing:border-box;} body{min-height:..

영상에 보인대로 따라하면 backface 부분이 안 보이는 오류가 있어서 수정해 봄 CSS로 3d를 해야 할 때 항상 참고하는 사이트 : https://3dtransforms.desandro.com/cube Cube · Intro to CSS 3D transforms Cube Cards are a good start for working with 3D transforms, but they only show off 3D in transition. To show off 3D at rest, we’ll have to create true 3D objects: prisms. We’ll start with a cube. The markup for the cube is similar to the card. This..

쩨리쩨리님의 달력 만들기 : https://jerryjerryjerry.tistory.com/26 왼쪽 To Do List 부분 카피한 디자인 : https://dribbble.com/shots/20082214-Contact-page-Untitled-UI 미리보기 : https://ohikmyeong.github.io/cdtd-2022/ 달력만들기-2022 할 일을 등록해보세요! ohikmyeong.github.io 깃허브 주소 : https://github.com/OhIkmyeong/cdtd-2022 GitHub - OhIkmyeong/cdtd-2022: 달력+To do list 달력+To do list. Contribute to OhIkmyeong/cdtd-2022 development by crea..

https://answers.microsoft.com/en-us/msoffice/forum/all/png-lost-transparency-when-a-powerpoint-file-is/ca30823b-f21c-4697-af6e-a1513bbff97d 리디렉션 중 login.microsoftonline.com powerpoint png transparent background black error/issue

네이버 모두가 지식인20니다. 홈페이지의 캐러셀 슬라이더가 인상깊어서 구현해보았음. 깃허브 : https://github.com/OhIkmyeong/carousel-v1/tree/main/mine-2-3d-reverse GitHub - OhIkmyeong/carousel-v1: 캐러셀 슬라이더 캐러셀 슬라이더. Contribute to OhIkmyeong/carousel-v1 development by creating an account on GitHub. github.com 데모 : https://ohikmyeong.github.io/carousel-v1/mine-2-3d-reverse/ 모두지식인20니다 참고 ohikmyeong.github.io 참고 : https://3dtransforms.desa..

animationend 이벤트 리스너를 이용하여 아주 간단하게 만들 수 있다. 여기서 타이밍 조정은 CSS에서 가능하다는게 가장 큰 장점이다. 깃허브 : https://github.com/OhIkmyeong/time-slider 데모 : https://ohikmyeong.github.io/time-slider/ HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 타임슬라이더 TimeSlider v1.0 1 2 3 4 5 6 참고 : 노비타 홈페이지 www.novita.co.kr Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17..

깃허브 주소 : https://github.com/OhIkmyeong/infinite-slider GitHub - OhIkmyeong/infinite-slider: 무한 슬라이더 무한 슬라이더. Contribute to OhIkmyeong/infinite-slider development by creating an account on GitHub. github.com 이전,다음 버튼 페이저 마우스다운,마우스업 이벤트로 드래그시 이동 터치스타트, 터치엔드 이벤트로 터치시 이동 자동재생은 아직 구현 안 함 요즘 ott앱이나 많은 웹페이지 메인 슬라이드들은 신기하게 무한슬라이더 느낌을 제공하는데 (가장 마지막페이지 / 처음페이지의 구분이 느껴지지 않음) 대체 어떻게 만든걸까..생각하다가 약간 어설프지만 구현해..

데모 사이트 : https://mellifluous-cucurucho-4fbe72.netlify.app/ ::훈화 말투 생성기:: mellifluous-cucurucho-4fbe72.netlify.app HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ::훈화 말투 생성기:: 훈화 말투 생성기1.0 말줄임표(⋯) 친애하는 학생 여러분 시간은 쉼 없이 흘러 벌써 겨울방학을 맞이하고 있습니다. 띄어쓰기 기준 낱말은 두 개 이상 써주세요. 생성 복사 복사 완료! Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ..

데모 페이지 : https://ohikmyeong.github.io/resize_dom/ vanilla JS : Resizable ohikmyeong.github.io 깃 허브 : https://github.com/OhIkmyeong/resize_dom GitHub - OhIkmyeong/resize_dom: RESIZE DOM : DOM을 마우스다운+마우스무브 (드래그)로 Resize 가능하도록 RESIZE DOM : DOM을 마우스다운+마우스무브 (드래그)로 Resize 가능하도록. Contribute to OhIkmyeong/resize_dom development by creating an account on GitHub. github.com HTML 1 2 3 4 5 6 7 8 9 10 11 1..

보호되어 있는 글입니다.

유튜브 : https://www.youtube.com/watch?v=QTcIXok9wNY 미리보기(데모) : https://ohikmyeong.github.io/wds-snake-game/answer-with/ (Answer With)Snake Game ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 (Answer With)Snake Game 0 GAME OVER.. Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 ..

데모페이지 : https://ohikmyeong.github.io/wds-library/mine/ mine Houses For Sale Live Demo Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam tempore nostrum autem vel esse libero! Details Contact Seller X modal title modal content ohikmyeong.github.io WDS 강의 영상 : https://www.youtube.com/watch?v=vTsVl66q9jo IntroJS : https://introjs.com User Onboarding and Product Walkthrough Library | ..

* WDS : https://www.youtube.com/watch?v=p_6IuhmBsfc&t=1763s * CodePen : https://codepen.io/doriancami/full/jEJvaV 미리보기 : https://ohikmyeong.github.io/wds-time-turner/mine/ Time Turner Animation 0 0 0 0 ohikmyeong.github.io "카운트 다운"인데 애니메이션 구현하는데 집중하다 보니 그냥 시계로 만들어 버렸다 -__- HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43..

접속 페이지 :https://effortless-khapse-9eb044.netlify.app/ 프로스펙트 영/한글자막 프로스펙트 영화 43:40 ~ 43:43 경 에즈라가 시이를 부르는 호칭은? (띄어쓰기 없음/영어/낙타등(Camelcase)표기) ex) big elephant면 비밀번호는 BigElephant effortless-khapse-9eb044.netlify.app 걸린 시간 : 디자인 / 코딩 포함 약 이틀 힘들었던 점 : 완벽하지 않은 영자막과... 한글 자막은 영화 보면서 대사 직접 침 = 노가다 유튜우브는 제발 영화 팔 때 자막 옵션도 넣어주면 좋겠다 이거입니다

HTML,JS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 Can I Create Online Tutorial’s Magic CSS Indicator? home Home person Person forum Comment photo_camera Photo settings Settings const $gnb = document.getElementById('gnb'); const $indicator = docu..

https://www.youtube.com/watch?v=jfYWwQrtzzY 이전 포스팅 : https://aosceno.tistory.com/603 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 How To Build Sortable Drag & Drop With Vanilla Javascript Hello World Nice To Meet You Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 @charset "utf-8"; @import url..

CSS,JS 영상 참고 : https://www.youtube.com/watch?v=VPVu1148TU0 원본 디자인 참고 : https://uidesigndaily.com/posts/figma-reviews-day-1573 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 ..

깃허브 GitHub - OhIkmyeong/cliptext: clipText-intersectionObserver clipText-intersectionObserver. Contribute to OhIkmyeong/cliptext development by creating an account on GitHub. github.com HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 텍스트 테스트 ClipText version 1.0 Hello World Nice to Meet you! clipText 안의 p태그 안의 글자를 span 태그로 자동 분리..

gitHub GitHub - OhIkmyeong/tableBuilder2: table Builder 2.0 (테이블 생성기) table Builder 2.0 (테이블 생성기). Contribute to OhIkmyeong/tableBuilder2 development by creating an account on GitHub. github.com HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Table Builder v2.0 Table Builder v2.0 Colored by Color Scripter cs main.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ..

https://ohikmyeong.github.io/tableBuilder/ table builder ohikmyeong.github.io 데이터 형식 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 { "data" : [ {"th-1" : "th-1"}, {"th-1" : "th-1"}, {"th-2" : "th-2"}, {"th-1-1" : "th-1-1"}, {"th-1-2" : "th-1-2"}, {"th-2-1" : "th-2-1"}, {"th-1-1" : "(1-1)value"}, {"th-1-2" : "(1-2)value"}, {"th-2-1" : "(2-1)value"}, {"th-1-1" : "(1-1)value"}, ..

강의영상 : https://www.youtube.com/watch?v=V_G1WzPjb4o 깃허브 미리보기 : https://ohikmyeong.github.io/ot_clrProgress/ Animated Circular Progress Bar Using Html CSS Only | Dynamic SVG Progress Bar ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 Animated Circular Progress Bar Using Html CSS Only | Dynamic SVG Progress Bar 80 Html Color..

바닐라 자바스크립트로 테트리스 구현하기(1) 유튜브 참고 영상 : https://www.youtube.com/watch?v=rAUn1Lom6dw 깃허브 미리보기 / 넷리파이 코드 테트리스 : 초보자를위한 JavaScript 튜토리얼 ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 코드 테트리스 : 초보자를위한 JavaScript 튜토리얼 SCORE : ... START Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34..

보호되어 있는 글입니다.

Web Dev Simpified : If You Want To Be An Advanced Game Developer Build This Project 본 포스팅은 위 유튜브 튜토리얼 영상을 보고 쓴 클론코딩(깃허브)입니다. 가독성을 위해서 기타 일반 함수로 작성된 부분도 클래스 안에 넣고, event 부분도 따로 파일로 빼서 클래스로 작성하였습니다. 점수 표시도 추가하였습니다. 새로 배웠던 개념 * $elem.style.setProperty('--var', value); * get, set * https://ko.javascript.info/property-accessors * private field(#) * https://ko.javascript.info/private-protected-propert..

모던 자바스크립트 튜토리얼 : 프로퍼티 getter와 setter 프로퍼티 getter와 setter ko.javascript.info 그냥 예제 따라하면서 공부한거 메모 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 /* 기본 */ const test = { firstName : "Din", lastName : "Djarin", get fullName(){ return `${this.firstName} ${this.lastName}`; }, set fullName(value){ [this.firstName, this.lastName] = value.split(' '); } }; ..

HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 24hours modal 쿠키 제거 모달 보기 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias, perspiciatis! 24시간동안 보지 않기 닫기 Colored by Color Scripter cs JS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 const..

나무위키 ver : https://tinyurl.com/2hnmna48 고정 페이지 : https://tinyurl.com/3ky83xjx 글쓰기 페이지 : https://tinyurl.com/25zhdw2m 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 const TIME = 2000; async function init(URL) { await change_text(); await change_url(URL); }//init function change_text() { return new Promise(res => { setTimeout(() => { const $text = document.querySelector('.text'); $tex..

이름 순 정렬, 이름 순 역정렬, 랜덤(피셔에이츠셔플)정렬 https://lucky-clafoutis-ac740a.netlify.app/ 랜덤 친구들 순서 정하기 랜덤 친구 순서 정하기 v1.0 아 정해정해 순서 순서 lucky-clafoutis-ac740a.netlify.app