창고

원본 작품 : https://x.com/ntv_rd/status/1792053852889612311 X의 日テレR&Dラボ님(@ntv_rd)LOVEが現れるまでランダムに文字列を生成し続ける作品、エキソニモさんの『Find My LOVE』。37万文字描いてやっと出会えました。シンプルだけど奥深い。面白い。 アートキャンバスとしてのWebtwitter.com무작위로 A-Z까지 알파벳중 랜덤으로 출력하여 최종적으로 LOVE라는 글자가 출력될 때 까지 시간을 계산한다.근데 이거 실제로 돌려보면 한평생 걸릴 가능성이 크기 때문에 다른 글자도 입력해서 테스트 할 수 있도록 해놓았다.코드펜 데모 See the Pen RANDOM LOVE by Oh Ikmyeong (@dpffpself) on CodePen. HTML1234567891..

window.opener 챗지피티는 정말 짱이다... 기본적인 원리는 다음과 같음. i index.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 2 Click const $btn = document.getElementById("btn"); const $result = document.getElementsByName("result")[0]; $btn.addEventListener("click",()=>{ window.open("./popup.html", "popup", "width=200,height=200"); }); function get_value(value){ $result.value = value; } Color..

https://www.youtube.com/watch?v=1tz-m88gFVA js animate 사용으로 좀 더 부드럽게 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 Document 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 @charset "utf-8"; ..

세개 다 나사형 연필 깍지이며 왼쪽부터 톰보우 30주년 기념 연필깍지 쿠팡에서 저가형으로 많이 파는 연필깍지 스테들러 연필깍지임 원래 저 30주년 연필깍지를 13년 쓰고 있었는데 연필을 한번에 여러자루를 쓰다보니 (매번 깎기 힘드니까) 동시에 연필이 짧아지면 좀 곤란했삼. 적당히 짧아진건 킵해놓고 새 연필을 쓰고...그렇게 필통에 꽂히는 수많은 연필들... 불편하다!!! 근데 그걸 13년을 참다가 그냥 연필깍지를 사기로 했다. 13년전엔 나사형 연필깍지가 흔하지 않았다 엇비스무리하게 생긴건 있었지만 돌려서 죄는 형식이 아니라 그냥 위에서 캡을 씌우듯 하는거였고 단단히 조이질 못해 끝까지 쓸 수 없었음. 하지만 저렇게 나사형으로 기계적으로 조여쥬면 여기까지 쓸 수 있음 ^^ 유치원 시절때부터 물건을 끝까지..

https://www.youtube.com/watch?v=pgo6URFz8tc 요약 : 일반 함수의 this는 "호출"시 결정 화살표 함수의 this는 "선언"시 결정. (부모 참조) 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 { const obj = { name : "🍒", sayNameClassic : function(){console.log("sayNameClassic",this.name || "undefined");}, sayName(){console.log("sayName",this.name || "undefined");}, sayNameArrow : ()=..

데모 See the Pen promise예제 by Oh Ikmyeong (@dpffpself) on CodePen. 별코딩 강의 영상 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 자바스크립트 비동기 프로그래밍 #3.5 | Promise.all + allSettled + any + race 별코딩 : 자바스크립트 비동기 프로그래밍 #3.5 | Promise.all + allSettled + any + race 콘솔창을 확인해보세요 함수들은 각각 1,2,3초가 걸립니다. Promise.all Promise.allSettled Promise.any Promise.race Colored by Color Scripter cs CSS..

https://www.youtube.com/watch?v=HIrDMR6CaHY 데모 사이트 : https://ohikmyeong.github.io/hpp-counter If Dr. Seuss Made Programming Tutorials 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 If Dr. Seuss Made Programming Tutorials If Dr. Seuss Made Programming Tutorials CASH PRIZE $ restart Colored by Color Scripter cs CSS 1 ..

HTML 12345678910111213 canvas 화살표 선 사각형 Colored by Color Scriptercs JS 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145..

보통 input[type="range"]는 핸들러가 1개 뿐이다. 근데 만일 min, max 핸들러가 2개인 input을 구현하고 싶다면? 유의사항 완전 기본의 기본. 안되는게 더 많아요! 되지 않는 항목들은 다음과 같음 현재 min, max 제한 없이 왔다갔다함. (min이 max보다 더 오른쪽으로 이동한다든가) step에 대한 snap 없음 귀찮아서 window.resize에 대한 초기화 안 해놓음 그대로 갔다 쓰면 문제가 많을거에요 ㅋㅋ 걍 원리만 이해하시고 변형하고 추가 수정해서 쓰면 됩니다. 데모 사이트 : https://Ohikmyeong.github.io/range-slider-minmax/v1 HTML html은 별거 없습니다. 그냥 css랑 js링크용 1 2 3 4 5 6 7 8 9 10..

https://d3js.org/d3.v5.min.js C3.js는 D3.js에 의존한다. c3-0.7.20 기준, d3의 v5.min.js 파일을 필요로 하는데 현재 d3 페이지 가보면 버젼이 7까지 올랐음. 7로 연결해도 되지 않나? 하지만 호환성 문제인지 오류 때문에 안 됨. v5는 어디서 구하는데? 해서 찾아보니 역시... 과거 블로그 글들이 구원해주시리라... 저와 같은 문제를 겪었을 분들을 위해 빠른 검색 결과 나오시라고 링크 올립니다.

https://www.youtube.com/watch?v=iLmBy-HKIAw 데모 : https://ohikmyeong.github.io/kp-infinite-scroll/ Infinite Scorll ohikmyeong.github.io CSS 키워드 mask width : max-content transform:translateX(calc(-50% - (var(--gap) / 2))); JS 키워드 $elem.cloneNode(true); 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 Infinite Scorll Create an infinite horiz..

보호되어 있는 글입니다.

결국 sns를 다시 시작하고 뭔가 일이 엄청 정신없었나... 플래너도 일기도 제대로 안썼어서 기억에 남는게 없음 sns는 커플봇(욘인이 아니라고하니 피어봇이 맞겠지만)구경하는 재미에 행복...제발 오래오래 해주세요,,,너무 감사해요.... 혈당이 사실상 당뇨인지라 연휴 이틀전부터 운동을 시작했는데 거창한건 아니고 걍 만보걷기) 평생 하루에 2000보도 안걷던 몸뚱아리가 갑자기 만보 걸으니까 몸속 어디 혈관이 충혈돠서 터졌었나봐유... 첫 이틀간 ㄹㅇ 선홍색 혈변을 눠서 정말 놀랐음 ㅠ ㅅㅂ 피를 싼다는게... 아무래도 치질수술만 2번 했다보니 불안하긴 했는데 3일차부턴 멀쩡해져서 ...담에 또 난다면 걍 그땐 지체않고 병원에 가기로 참...20대 초중반까지만 해도 정상체중에 저혈압에 피 맑았는데 이젠 고..

https://www.youtube.com/watch?v=ikbwJy84f2Y 영상과 코드가 다릅니다. 아이템의 갯수가 변화할시 일일히 CSS 수정 안 하고 걍 JS가 알아서 계산해서 CSS 대입하도록 했음. See the Pen 3d carousel by Oh Ikmyeong (@dpffpself) on CodePen. 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 3d Gallery 3D Image Gallery in CSS & Javascript 1 2 3 4 5 6 7 8 9 10 PREV NEXT Colored by Color Scripter cs CSS 아이템들을 중앙에 위치하..

JS의 .animate() 속성을 이용해서 클릭&드래그로 좌우로 이동하는 DOM을 만들건데, 1. 자식요소들을 감싸고 있는 부모만 움직임 2. 자식요소엔 클릭이벤트만 적용 (클릭시 크기가 줄어들었다/원래크기로 돌아옴) 3. 부모가 움직이고 난 후에도 자식 위에 마우스 커서가 있을때 원래는 클릭이벤트로 간주되지만, 이를 원치않음. 따라서 부모가 움직였다면 마우스 커서가 자식 위에 있더라도 클릭이벤트를 처리하지 않음. 4. 부모를 움직일때도 일정 거리 이상 마우스 커서를 움직이지 않으면, 부모도 움직이지 않게 할 것임. (이렇게 하지 않으면 아주 조그만 움직임에도 부모는 움찔거리며 계속 움직임) See the Pen Untitled by Oh Ikmyeong (@dpffpself) on CodePen. HT..

https://www.youtube.com/watch?v=_PPWWRV6gbA https://webdevsimplified.com/markdown-cheat-sheet.html Markdown Cheat Sheet Free Markdown Cheat Sheet webdevsimplified.com 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 ..

7월의 기억이 없어 플래너를 펼쳐보니 중순쯤에 듣던강의를 끝마치고 나머지 뒤 1주는 디아4하다가 몸살나서 막주차월요일에 연차쓰고 바비 보고왔음 가볍게 코미디 보러가야지 하구 봤는데 첫 장면부터 질질 울고 마지막..what was i made for 나올땐 진짜 눈물 찔찔이 하며 나왓음...정말 훌륭하고 재밌는 영화였습니다... 그리고 나중에 알았는데 빌리아일리쉬 노래였어...진짜 감성 조진다.. 막귀라서 극장에서 처음 들었을땐 어떻게 이렇게 아름답고 아픈 목소리가...했는데 하 ㅠ 그리고 오타쿠적으로 너무 기쁜 일이 생겼음 드디어 같은 고정컾을 파는 분이 생겼다,,,,,ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ..

보통 웹사이트에서 배너가 끝없이 반복되며 한쪽으로 흐르는 효과를 재현해보자. 방법을 크게 2가지로 써봤는데, 1. js의 신규 내장 API인 $elem.animate(keyframes,options)를 사용하여 쉽고 효과적으로 재현하기 2. Promise와 setTimeout을 사용하여 원시적으로 재현하기 슬프게도 2번이 보기가 더 안 좋다..! 미세하지만 툭 끊기는 느낌이 나기 때문. 화면을 다시 그리고 이벤트 루프가 돌고...화면을 다시 페인팅하고 어쩌고...이런것 때문에 js는 생각대로 마음처럼 움직여주지 않는다. 어찌하였건 똑똑한 개발자들이 animate를 만들어주었으니 더 부드러운 효과가 재현 가능한거다...! css에서 animation이 종료되었을시 이벤트를 추가하고 싶다면 animation..

https://www.youtube.com/watch?v=bAwEj_mSzOs 원본 영상에선 라이브러리를 쓰고있는데, 이걸 바닐라 자바스크립트로 구현해보았음... 데모 : https://ohikmyeong.github.io/hpp-tile-anime hpp-tile-anime [Hyperplexed]Mind-Blowing Anime.js Staggered Grid Effect ohikmyeong.github.io index.html엔 그냥 #wrap인 DOM 하나만 있음. 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 @charset "..

https://www.youtube.com/watch?v=DeHRDNRQhNg 데모 : https://ohikmyeong.github.io/hpp-wand-reveal/ hpp-wand-reveal [Hyperplexed]Wand reveal gallery (opacity, blur) ohikmyeong.github.io 깃허브 : https://github.com/OhIkmyeong/hpp-wand-reveal 마우스의 좌표값에 따라 마술봉이 움직이며, 갤러리의 사진들이 마술봉이 지나간 자리에선 opacity가 1, blur가 0이 되며, 지나가기전엔 opacity가 0, blur가 n값이 된다. 마술봉이 지나가고 나면 보이지 않았고 흐리했던 사진들이 스르륵 보여지는 재밌는 효과... js의 anima..

급한 프로젝트를 다 쳐내고 농떙이를 치며 지내고있다...three.js 강의를 미적미적 들으며... 지금도 듣다가 농땡이 치고있음 내 뇌는 지옥물결이라는 콩밭에 있기에... 디아블로4에 정신이 빨아먹혀서 하루가 어케가는지도 모르겠다... 역시 존나 재밌는 게임에 대한 욕망은 체력을 이기는듯... 오버워치는 퇴근하고 하기 힘들어서 주말에만 하곤 했는데 지금은 퇴근하고 저녁밥먹고 우마무스메 육성 1회 마치고 즉시 디아블로 디아블로 라이크 게임도 안 해보고 뭐... 발만 담가본 게임은 검은사막이랑 15년전 마비노기가 전부인데 처음에는 정말 별로 할 생각이 안 들었다... 하지만 릴리트가 릴리트가 너무 아름다움 릴리트의 아름다움에 반해 시네마틱만 하루에 2-3번씩 보고 그렇게 디아블로1~3 스토리 정리 영상을 ..

[Hyperplexed]Award Winning Animation With Only 20 Lines Of CSS? 데모 : https://ohikmyeong.github.io/hpp-drag-slider Award Winning Animation With Only 20 Lines Of CSS? ohikmyeong.github.io 드래그로 부드럽게 이동하는 이미지 슬라이더다. 특징은 드래그 안의 이미지가 드래그 동작에 맞춰 다른 속도로 움직여서 그 효과가 더 좋게 보인다. 핵심개념은 css의 object-position과 js에서 animate()를 사용한다. 다른 개체에도 적용시킬 수 있도록 클래스화 시켰고, html에 data-* 대신, 클래스를 이용하는 만큼 constructor안에 상황을 저장하도..

보호되어 있는 글입니다.

[Hyperplexed]The Ultimate Hacker Effect That Anyone Can Do 데모 : https://ohikmyeong.github.io/hpp-hacker-effect The Ultimate Hacker Effect That Anyone Can Do ohikmyeong.github.io 글자위에 마우스 커서를 올렸을 때(mouseover) 해당 텍스트의 글자가 랜덤한 글자로 마구 바뀌다가 시간에 따라 첫글자부터 원래대로 돌아오는 효과. https://kprverse.com/ 의 메뉴 효과에서 따왔다고 한다... 여기서 그냥 (1) 개체별로 해당효과를 지정할 수 있게 클래스로 만들었고, (2) 마우스를 여러번 올렸을 때 setInterval이 중복으로 발생하지 않도록 플래그를..

데모 : https://ohikmyeong.github.io/frontend-mini-challenges/toast-popup/ toast-popup 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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 toast-popup left right top bottom success error warning info Duration(1.5 ~ 10s) Show Toast! 1 ✕ 2 ✕ 3 ✕ 10000 ✕ Colo..

데모 : https://ohikmyeong.github.io/frontend-mini-challenges/light-dark-mode/ light-dark-mode 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 light-dark-mode Dark Mode The Entire Page Color Theme is Controlled Using CSS and JavaScript Contained Dark Mode The Container Color Scheme is Controlled By Only CSS Colored by Color Scripter c..

https://www.youtube.com/watch?v=CZIJKkwc8l8 (The Mouse Trailer With Smart Features - Hyperplexed) 데모 : https://ohikmyeong.github.io/hpp-mouse-trailer Document ohikmyeong.github.io 우아하게 마우스 커서를 따라다니는 개체 (단순히 style에서 transform을 지정한게 아닌, animate 사용), 그리고 커서가 상호작용하는 개체에 따라 크기와 안의 내용이 바뀌는 인터랙티브한 마우스 커서.... 개인적으론 외국 사이트에서 이렇게 마우스 커서 따라다니는 애들이 재밌게 움직여서 대체 어떻게 구현하는걸까...했는데 animate()를 사용하는거였다... 😯 정말 끝이 ..

보호되어 있는 글입니다.

아하학 일 너무 재밌다 (진심임) 4월달에 기본 골격을 잘 짜놔서 이제 새로운거 들어오면 복붙과 약간의 수정만 하면 됨^^) d 언제나 항상 처음이 빡센법이쥬 하지만 그 처음을 치밀하게 잘 짜서 도구화해놓으면??? 일이 빨라진다....! 근데도 아직 한...50메뉴 넘게 남아서 올해 중순쯤 끝나야 끝나지 않을까란 생각... 스타워치 드디어 나왔다... 모이라 위키드 스킨은 언제 풀리냐... 오늘 같이 상점에 나올 줄 알았는데ㅠ 코믹스에서도 안 나오고 트레일러에도 안 나오고 좀 섭섭 퇴근하고 ... 공부할 수 있으면 좋겠다 ---- 원래 탄산을 안 좋아해서 그나마 먹는게 환타 오렌지맛이랑 웰치스 포도맛, 밀키스 정도였다. 그것도 한 3년에 한 번 땡길까 말까하면 사먹고... 최근에 닥터 페퍼를 자주 먹게 ..

RIP Tutorial : 파이차트 그리기, 파이조각(Wedge) 그리기 원리, 캔버스 원형 그라디언트 파이 그래프를 그릴 때 보통은 시작 각도가 0도라서 시계 12시 방향이 아닌 3시 방향부터 그리기 시작한다. 이는 상황에 따라 다르겠지만 보통 긍정적(비율이 크기를 기대) /부정적(비율이 작기를 기대) 2개의 항목이 있는 파이 그래프에서는 아무래도 12시 방향부터 부정적 비율이 그려져야 가독성이 좋을것 같다는 생각을 했음. 기본 RIP 튜토리얼 사이트에 나온것에서 시작 각도만 조정해주면 된다. 여기서 필요한 개념이 라디안(radian)과 각도(degree) 사이의 변환인데, 캔버스에서 arc를 이용하기 위해선 각도를 라디안으로 변형해줄 필요가 있다. (각도는 0도부터 360까지, 라디안은 0부터 약 6..