창고

원본 작품 : 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"; ..

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..

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 ..

보통 웹사이트에서 배너가 끝없이 반복되며 한쪽으로 흐르는 효과를 재현해보자. 방법을 크게 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..

[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..

정교한 이미지 작업을 하려면 120도짜리 사선그리드를 그려서 한땀 한땀 패스 따며 만들고 3D효과를 주거나 해야겠지만 그냥 아 한국사람 빨리빨리; 느낌으로 글자며 귀도리있는 도형이며 아이소메트릭 각도대로 눕혀버려야 할 때가 있다. 단순히 도형 하나, 글자 몇 개 좀 눕히자고 그 그리드를 만들거나 키자면 매우 비효율적이며 정신병이 올 수 있다. 글자는 일단 Ctrl Shift O 해서 도형으로 깨뜨려주라.(상단메뉴 문자 > 윤곽선 만들기) 그다음 도형 선택하고 우클릭>변형>회전(R) 60도로 눕혀주라 다시 우클릭 > 변형 > 기울이기 기울이기 각도(S)는 30도 기울이기 각도(A)는 -30도로 해주면 된다.

1. KopubWorld - 편집에 최적화 - 웹은 따로 eot랑 woff 만들어서 직접 해야함 2. Noto Sans KR - 구글이 제공해주는 무료 웹폰트 CDN = 엄청 편함! - Noto다 보니 한자 깨지는게 없다고 생각하면 됨 고마워요 구글 ㅎ - 다만 생으로 갖다 쓰다보면 전체적으로 묘하게 뚝딱거리는 느낌은 있음. 자간을 조정해야함. 행간도 좀 뚝딱거리는 느낌이 있음... - 현재 그냥 빠르게 걱정없이 갖다 비비기 가장 좋은 무료 웹폰트 3. Spoqa Han Sans Neo - 무료 CDN을 제공하지만, 빠른 속도를 원한다면 직접 해야함. 다만 킹갓 스포카는 서브를 지원해서 woff, eot까지 함께 제공하고 있음 - 알못이 보면 Noto Sans와 거의 비슷하지만 Noto Sans의 뚝딱거..

? 이게 무슨일인가? 왜 포토샵과 인디자인의 RGB 파일 색상이 다르게 나오는건지? 예를들어 RGB(255,0,0)의 포토샵 PNG 파일을 인디자인(문서 색상모드:RGB)에 얹고 PNG로 내보내기 했을때 왜~~~ 두 파일의 색상이 다르게 보이냐 인디자인은 왜 RGB로 작업했을때 몇개는 색상값이 일치하고 몇개는 일치 안 하냐... 어쩐지 인디자인으로 웹 작업을 하면 포토샵으로 할 때 보다 뭔가 칙칙한게 기분탓인가 했더니 사실이었던것이다. 경고 : 인디자인은 원래 출력용(CMYK)작업을 하기위한 툴이기 때문에 본인의 색상설정 세팅을 잘 기억하고 있자. 이 포스팅은 RGB를 맞추려고 하기 위해 하는짓이기 때문... 님 왜 RGB작업 하는데 인디자인 쓰셈? 이라고 묻는다면 미친듯한 반복작업 때문임.. 반복작업엔..

path 툴을 사용하여 라인워크로 작업 폭도구로 부풀리기 outline stroke하여 면으로 변경 이후 모서리 설정 추가로 귀도리 있는 사각형 그러나 위의 방법은 개고생이고 그냥 Effect > Warp > 부풀리기(inflate) 하면 됨 bulged rectangular / bulged polygon Warp > Pucker & Bloat을 쓰는 방법도 있지만 꽃모양으로 변하는 패스때문에 여간 빡치니 걍 이거 쓰자 ㅎ