창고

원본 소스 사이트(현재 접속이 안 됨 ㅠㅠ 웹 아카이브에서나 열람 가능자주 쓰는데 오랫만에 원본사이트 가서 보려고 하니 접속이 안되길래...아카이빙 합니다... 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..

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

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 아이템들을 중앙에 위치하..

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

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://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()를 사용하는거였다... 😯 정말 끝이 ..

튜토리얼 사이트 html5-canvas Tutorial => Dragging circles & rectangles around the... Learn html5-canvas - Dragging circles & rectangles around the Canvas riptutorial.com 데모페이지 :https://ohikmyeong.github.io/rip-tutorial-canvas/dragging/01_drag_circle_rectangle.html Dragging circles & rectangles around the Canvas ohikmyeong.github.io 배경이 그려진 캔버스위에 두개의 개체를 마우스 다운&드래그 할 수 있다 나중에 드래그 되는 개체의 z-index값이 더 높다 두..

결론 : 아직 기본 기능엔 멀티 상속을 지원하지 않는다. 그래서 reduce를 이용하여 특수하게 사용해야한다. 참고 링크 : https://medium.com/@thevirtuoid/extending-multiple-classes-in-javascript-2f4752574e65 Extending Multiple Classes in JavaScript For developers coming from traditional OOP languages, I have seen them dismayed, nay, horrified that you cannot do the following in… medium.com 장점 : 멀티 상속의 개념을 쓸 수 있다! 단점 : 부품이 되는 클래스들은 모두 다시 한번 함수로 감싸..

https://www.youtube.com/watch?v=w0VEOghdMpQ&t=2411s 클론코딩 API 키를 발급 받지 않아도 되는 편리한 날씨 API : https://open-meteo.com/ Free Open-Source Weather API | Open-Meteo.com $ curl "https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41¤t_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m" { "current_weather": { "time": "2022-01-01T15:00" "temperature": 2.4, "weathercode": 3, ..

1탄에서 만든거는... 말단이 흉하게 나오는 문제가 있었음. 코드펜을 보니 grid 속성과 grid-row의 span 속성을 사용하여 더 이쁘게 정렬하는걸 참고하여 다시 만듦 See the Pen Masonry Layout-grid by Oh Ikmyeong (@dpffpself) on CodePen. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Masonry Layout(final) css grid-row span 사용하기 Masonry Layout grid-row span 속성 이용해보기 I'm Footer 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 ..

See the Pen Masonry Layout by Oh Ikmyeong (@dpffpself) on CodePen. 한 2018년 쯤에 jQuery 라이브러리 없이 어떻게 하면 Masonry Layout을 구축할 수 있을까... 고민했었다. 이 블로그 해당 카테고리의 가장 초반 글도 그거랑 관련된 내용일꺼다... 그 때 당시엔 지금보다 훠어얼씬 더 자바스크립트를 못하고 (제이쿼리만 할 줄 알았음) 문제해결능력도 엄청 낮았기에 css의 column 속성으로 하드코딩 했었다. 이건 JS와 position:absolute를 이용하여 강제적으로 포지션값을 변경하는 방식이다. 장점은 애니메이션 효과가 적용됨 (transition) 단점은 짝수개의 컬럼일때 이미지 길이에 따라 한쪽만 길게 늘어지는 것 처럼 보이..

이전 버젼을 만들고 나니 원본이랑 움직임이 다르기에 수정해줌, + 이미지가 정중앙에 오도록 바꿔줌 이미지가 정중앙에 오도록 하는 방법 이미지는 width:100vmax; height:100vh; object-fit:cover; left는 left:50vw;에 translate(-50%); center는 left:50%; translate(-50%); right는 left:calc(((100vw / 3) * -2) + 50vw); 3분할로 나뉜 애들 transition을 transform에만 걸고 opacity는 걸지 않아놔야 생각한대로 움직인다. center로 움직일때는 opacity 1로 해야 빈화면이 안 보이더라고...머리로는 안 걸어도 될 것 같은데, 플래그 걸어놨음에도 불구하고 마구 움직이다보면 ..

https://codepen.io/theseventh/pen/LYVqMYb Yet another slider ... codepen.io 저 분의 코드펜을 보고 내 식대로 바닐라 자바스크립트로 짜보았음. 처음엔 background로 접근했다가 사이즈별 대응이 잘 안되어서 좀 무겁더라도 ㅎ..코드는 간단해지는 쪽으로 변경함. 이미지 객체의 사이즈를 100vw 100vh로 한 다음 object-fit:cover로 해주면 된다. 그리고 position:absolute;에 left값을 -3, -6 으로 바꿔주면 된다. 맨 처음에서 이전 버튼을 누를시에는 매끄럽진 않음..근데 귀찮다 그냥... 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 ..