창고

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

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

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

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

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

See the Pen Like Slick Slider by Oh Ikmyeong (@dpffpself) on CodePen. 데모 및 코드 소스 코드펜에서 확인하기 : https://codepen.io/dpffpself/pen/dyjJbqo Like Slick Slider ... codepen.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 slick slider vanilla js Like Slick Slider (1)Hello World button Item(2) ....(3) 4 Thank you Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 1..

비슷한 내용을 자주 올리지만 다시 짤 때마다 원리를 이해한 상태에서 더 간결해지고 있으므로... 드래그나 리사이즈를 할 때마다 해당 모달의 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:..

쩨리쩨리님의 달력 만들기 : 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..

네이버 모두가 지식인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://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..

깃허브 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"}, ..

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

진짜 최종의_최종의_최종.psd 같지만 하여간... 깃허브 : https://github.com/OhIkmyeong/move_modal GitHub - OhIkmyeong/move_modal: 모달창 움직이기 sample 모달창 움직이기 sample . Contribute to OhIkmyeong/move_modal development by creating an account on GitHub. github.com 여기서 modal 폴더에 들어가시면 소스 있습니다. 얻어갈 수 있는것 : fetch()를 이용한 비동기로 html을 include하기 class 문법으로 drag 가능한 modal 만들기 mousedown시 mousemove 이벤트 달기 mouseup시 mousemove 이벤트 지워주기 모달..

HTML sorting할 열의 thead의 th에 data-sort 를 달아준다. 숫자라면 value는 "num" 일반 문자라면 "str" 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 let's sort table Sort Table thead의 th를 눌러보세양 id First Name Last Name Age 004 Moira O'Deorain 48 005 Siebren De..

해결 방법 : 우선 클릭한 th의 cellIndex를 알아오고 해당 tbody의 cellIndex에 해당하는 셀 안의 값끼리 비교하여 tr을 insertBefore를 사용하여 옮겨줄것이다. 여기선 name,age로 해버렸지만 좀 더 범용성 있게 한다면 str과 num으로 하는게 맞다 ^^ 근데 포스팅 수정하기 귗낳음 ㅋ 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..

깃허브 : https://github.com/OhIkmyeong/promise_finally GitHub - OhIkmyeong/promise_finally: promise의 finally를 이용한 로딩화면 promise의 finally를 이용한 로딩화면 . Contribute to OhIkmyeong/promise_finally development by creating an account on GitHub. github.com promise의 then,catch,finally를 이용하여 로딩화면 제거 구현 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..

1.0인 이유는 아직 터치를 구현 안해서... 깃허브 https://github.com/OhIkmyeong/custom_slider GitHub - OhIkmyeong/custom_slider: 짭 swiper(기능 한참 못미침 ㅎㅎ ㅠ) 짭 swiper(기능 한참 못미침 ㅎㅎ ㅠ). Contribute to OhIkmyeong/custom_slider development by creating an account on GitHub. github.com 디즈니플러스나 농협라이블리 같은 메인페이지의 슬라이더들 보면 무한으로 좌우 스크롤링 됨 현재 화면에 포커스 된 애들은 scale이 1.0 나머지는 그보단 작음 (n-1) n (n+1) 3개의 엘리먼트가 한 화면에 보임. 현재까지 구현한거 이전/다음버튼으로..

1탄이었던 이전 포스팅 주소 : https://aosceno.tistory.com/492 커스텀 셀렉트 박스 만들기 - HTML DOM에는 select만 작성하고 vaniila JS로 알아서 DIV 생성 HTML CSS 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.. aosceno.tistory.com 감사한 덧글을 보고 class문법으로 리팩토링 해볼겸 기능도 추가하였습니다~! 추가된 기능 키보드 동작 (위 아래 화살표..

개선 사항 : 좀 더 단순화한 data object +/- 음수 양수 변환 추가 연산자로 이용한 연속계산과, = 버튼을 이용한 반복계산 오류 안 나게 개선 eval이 아닌 switch문으로 변경 See the Pen Caculator v1.2 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 33 34 35 36 37 38 39 40 41 42 43 44 45 계산기-myAnswer 0 0 7 8 9 4 5 6 1 2 3 +/- 0 . = C ÷ × - + Colored by Color Scripter cs CSS 1 2..

See the Pen Caculator 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 33 34 35 36 37 계산기-myAnswer 0 0 7 8 9 4 5 6 1 2 3 0 . = C ÷ × - + 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 5..

미리보기 : https://ohikmyeong.github.io/progress_bar/ Progressive 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 Progressive Bar Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem 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 @charset "utf-8"; *{margin:0;padding:0;box-sizi..

(3)에서는 진정한 depth 개념의 아코디언으로 구현은 하였지만, depth1의 sub이 아이템이 0개이면 다음번에 추가가 안되는 맹점이 있어서 강제로 JS에서 만일 옮기고 난 뒤 아이템이 0개라면 그 드래그를 취소하도록 짰다. 이번에는 아이템이 0개라도 다시 추가 가능하도록 했다. 간단한 CSS 트릭... ++ 드래그시 발생하는 고스트 이미지도 지우고 커스텀으로 바꿨다. 3만 5천번 강조해도 모자란 Codepen@Tino Thamjarat님의 원본 코드 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 ..

진정한 아코디언 형식으로 이제 쌉가능하지만, ... 다만!! 리스트가 비게 되면 더이상 추가가 되지 않기 때문에 ㅠ.ㅠ 만일 내가 옮기려는 아이템이 그 해당 sub에서 단 1개뿐이었다면 이동후 다시 취소 시킨다. 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 test_3 이렇게 하면.. 리스트가 비었을때 ㅎ.. 더이상 안 들어가... A.나는 드래그 하면 안되양~~~ 001 002 003 B.나는 드래그 하면 안되양~~~ 가가가 나나나나나나나 다ㅏㅏㅏㅏㅏㅏㅏ A.나는 드래그 하면 안되양~~~ 001 002 003 Colored by Colo..

이전 게시글 링크 : https://aosceno.tistory.com/600 은혜로운 원본 Code pen 링크 : https://codepen.io/vtno/pen/MXmpoy 맘같아선 대분류인 d1 안에 d2를 넣고 싶지만 그렇게 하면 내 머리가 폭발하는 관계로 (ㅋㅋ ㅠ ) depth는 같고 그냥 아코디언으로 눈속임 한 버젼 HTM: 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 test_2 나는 드래그 하면 안되양!!! 001 hello 001 hello 002 hello 003 나는 드래그 하면 안되양!!! 002 world 004 world 005 world 006 나는 드래그 하면 안되양!!! 00..

원본 코드 : https://codepen.io/vtno/pen/MXmpoy Sortable List Vanilla JS ... codepen.io 원본코드 전부 그대로인 상태에서 수정한것들은 맨 마지막 / 처음으로 드래그 할 때 에러 뿜는것만 수정 module 형식으로 분리 만 했습니다. ㅠ.ㅠ 원 코드 작성자에게 엄청난 감사를 보내며... 원래 jQuery ui에서 Sortable을 제공하는데 이걸 vanilla js로 어떻게 구현하나... 혼자 앓다가 검색 해보니 역시 세상은 넓고 능력자는 많다. 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 27 28 29 30 31 32 33 34 35 36 37 3..