창고

원본 소스 사이트(현재 접속이 안 됨 ㅠㅠ 웹 아카이브에서나 열람 가능자주 쓰는데 오랫만에 원본사이트 가서 보려고 하니 접속이 안되길래...아카이빙 합니다... HTML123456789101112131415161718192021222324252627282930313233343536373839404142434445464748form id="frm"> fieldset> legend>체크박스의 경우/legend> label> input type="checkbox" name="chk" value="chk1" checked/> span>값1/span> /label> la..

이즈소프트 대표 홈페이지 | 20년 이상 업력 광학 솔루션 전문 기업㈜이즈소프트는 광학 솔루션 전문 기업으로, 첨단 기술을 바탕으로 정밀측정, 공간정보, 광학계측, 자동차안전, 자동화 시스템 솔루션을 제공합니다.is-soft.co.kr카피할 예제 : https://is-soft.co.kr/구현한 샘플 :CODE PENSee the Pen issoft 페이지 카피 by Oh Ikmyeong (@dpffpself) on CodePen.HTML12345678910111213141516171819202122232425!DOCTYPE html>html lang="ko"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-wi..

https://www.hyundaicard.com/cpu/ug/CPUUG4001_01.hc 현대카드여기를 눌러 링크를 확인하세요.www.hyundaicard.com스크롤에 따라 화면 가운데 모바일 이미지가 fixed 되어있고,특정 구간에 돌입하면 모바일 이미지 뒤쪽으로 다른 이미지들이 오른쪽으로 펼쳐졌다가특정 구간을 지나면 모바일 이미지 뒤쪽의 다른 이미지들이 다시 왼쪽으로 겹쳐지는 현상 See the Pen scroll fixed moving by Oh Ikmyeong (@dpffpself) on CodePen.HTML123456789101112131415161718192021222324252627!DOCTYPE html>html lang="en">head> meta charset="UTF-8"..

Digital Fatigue 홈페이지 See the Pen digitalfatigue copy by Oh Ikmyeong (@dpffpself) on CodePen.HTML1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374!DOCTYPE html>html lang="ko"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Digital Fatigue/tit..

유튜브 쇼츠 : https://youtube.com/shorts/CghGn-glw28?si=4LfGyNdcicBsYOwESee the Pen CSS+JS Loading requestanimationframe by Oh Ikmyeong (@dpffpself) on CodePen.HTML1234567891011121314151617181920!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>CSS LOADING DOT/title>    link rel="stylesheet" href="./style.css..

https://www.youtube.com/watch?v=dIEViv_i7Xs데모See the Pen 고객의 소리 by Oh Ikmyeong (@dpffpself) on CodePen. HTML123456789101112131415161718192021222324252627282930313233343536!DOCTYPE html>html lang="en"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>마디아 고객의 소리/title>    link rel="stylesheet" href="./style/main.css">    script src="..

box-shadow와 background-color, border-radius를 잘 조합하여 눈속임 효과를 낼 수 있다.HTML123456789101112131415161718192021222324252627282930313233343536!DOCTYPE html>html lang="ko"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>border radius Inverted/title>    link rel="stylesheet" href="./style.css">/head> body>    a href="https://codepen.io/kris..

챗지피티가 정말 좋아졌다... 불과 2년전까지만 해도 머리털 쥐뜯었는데... 기본으로 짜준 코드를 바탕으로 다듬어봄 DemoSee the Pen Trello by Oh Ikmyeong (@dpffpself) on CodePen.HTML123456789101112131415161718192021222324252627282930313233343536373839404142!DOCTYPE html>html lang="en"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Trello/title>    link rel="stylesheet" href="./s..

css로만 만들 수 있는 marquee slider. 마우스 hover시 잠시 애니메이션이 멈춘다(animation-play-state:paused)https://www.youtube.com/watch?v=mF9yOwlunWk다만 매번 아이템 추가하고 지우고 변경하고 할 때 총 갯수 지정 및 이런게 귀찮으니 JS로 생성 가능하게 만들어봄See the Pen Untitled by Oh Ikmyeong (@dpffpself) on CodePen. HTML12345678910111213!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale..

See the Pen imageZoom by Oh Ikmyeong (@dpffpself) on CodePen.html1234567891011121314151617181920212223242526!DOCTYPE html>html lang="ko"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Image Zoom Effect in E-commerce Website using Javascript/title>    link rel="stylesheet" href="./style.css">    script src="./main.js" type="modul..

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