창고

데모 사이트 : https://mellifluous-cucurucho-4fbe72.netlify.app/ ::훈화 말투 생성기:: mellifluous-cucurucho-4fbe72.netlify.app 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 ::훈화 말투 생성기:: 훈화 말투 생성기1.0 말줄임표(⋯) 친애하는 학생 여러분 시간은 쉼 없이 흘러 벌써 겨울방학을 맞이하고 있습니다. 띄어쓰기 기준 낱말은 두 개 이상 써주세요. 생성 복사 복사 완료! Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ..

데모 페이지 : 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..

보호되어 있는 글입니다.

유튜브 : https://www.youtube.com/watch?v=QTcIXok9wNY 미리보기(데모) : https://ohikmyeong.github.io/wds-snake-game/answer-with/ (Answer With)Snake Game ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 (Answer With)Snake Game 0 GAME OVER.. 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 ..

데모페이지 : https://ohikmyeong.github.io/wds-library/mine/ mine Houses For Sale Live Demo Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam tempore nostrum autem vel esse libero! Details Contact Seller X modal title modal content ohikmyeong.github.io WDS 강의 영상 : https://www.youtube.com/watch?v=vTsVl66q9jo IntroJS : https://introjs.com User Onboarding and Product Walkthrough Library | ..

* WDS : https://www.youtube.com/watch?v=p_6IuhmBsfc&t=1763s * CodePen : https://codepen.io/doriancami/full/jEJvaV 미리보기 : https://ohikmyeong.github.io/wds-time-turner/mine/ Time Turner Animation 0 0 0 0 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..

접속 페이지 :https://effortless-khapse-9eb044.netlify.app/ 프로스펙트 영/한글자막 프로스펙트 영화 43:40 ~ 43:43 경 에즈라가 시이를 부르는 호칭은? (띄어쓰기 없음/영어/낙타등(Camelcase)표기) ex) big elephant면 비밀번호는 BigElephant effortless-khapse-9eb044.netlify.app 걸린 시간 : 디자인 / 코딩 포함 약 이틀 힘들었던 점 : 완벽하지 않은 영자막과... 한글 자막은 영화 보면서 대사 직접 침 = 노가다 유튜우브는 제발 영화 팔 때 자막 옵션도 넣어주면 좋겠다 이거입니다

HTML,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 65 66 67 68 Can I Create Online Tutorial’s Magic CSS Indicator? home Home person Person forum Comment photo_camera Photo settings Settings const $gnb = document.getElementById('gnb'); const $indicator = docu..

https://www.youtube.com/watch?v=jfYWwQrtzzY 이전 포스팅 : https://aosceno.tistory.com/603 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 How To Build Sortable Drag & Drop With Vanilla Javascript Hello World Nice To Meet You 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 @charset "utf-8"; @import url..

CSS,JS 영상 참고 : https://www.youtube.com/watch?v=VPVu1148TU0 원본 디자인 참고 : https://uidesigndaily.com/posts/figma-reviews-day-1573 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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 ..

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

강의영상 : https://www.youtube.com/watch?v=V_G1WzPjb4o 깃허브 미리보기 : https://ohikmyeong.github.io/ot_clrProgress/ Animated Circular Progress Bar Using Html CSS Only | Dynamic SVG Progress 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 29 30 31 32 33 34 35 Animated Circular Progress Bar Using Html CSS Only | Dynamic SVG Progress Bar 80 Html Color..

바닐라 자바스크립트로 테트리스 구현하기(1) 유튜브 참고 영상 : https://www.youtube.com/watch?v=rAUn1Lom6dw 깃허브 미리보기 / 넷리파이 코드 테트리스 : 초보자를위한 JavaScript 튜토리얼 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 코드 테트리스 : 초보자를위한 JavaScript 튜토리얼 SCORE : ... START 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..

보호되어 있는 글입니다.

Web Dev Simpified : If You Want To Be An Advanced Game Developer Build This Project 본 포스팅은 위 유튜브 튜토리얼 영상을 보고 쓴 클론코딩(깃허브)입니다. 가독성을 위해서 기타 일반 함수로 작성된 부분도 클래스 안에 넣고, event 부분도 따로 파일로 빼서 클래스로 작성하였습니다. 점수 표시도 추가하였습니다. 새로 배웠던 개념 * $elem.style.setProperty('--var', value); * get, set * https://ko.javascript.info/property-accessors * private field(#) * https://ko.javascript.info/private-protected-propert..

모던 자바스크립트 튜토리얼 : 프로퍼티 getter와 setter 프로퍼티 getter와 setter ko.javascript.info 그냥 예제 따라하면서 공부한거 메모 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 /* 기본 */ const test = { firstName : "Din", lastName : "Djarin", get fullName(){ return `${this.firstName} ${this.lastName}`; }, set fullName(value){ [this.firstName, this.lastName] = value.split(' '); } }; ..

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

나무위키 ver : https://tinyurl.com/2hnmna48 고정 페이지 : https://tinyurl.com/3ky83xjx 글쓰기 페이지 : https://tinyurl.com/25zhdw2m 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 const TIME = 2000; async function init(URL) { await change_text(); await change_url(URL); }//init function change_text() { return new Promise(res => { setTimeout(() => { const $text = document.querySelector('.text'); $tex..

이름 순 정렬, 이름 순 역정렬, 랜덤(피셔에이츠셔플)정렬 https://lucky-clafoutis-ac740a.netlify.app/ 랜덤 친구들 순서 정하기 랜덤 친구 순서 정하기 v1.0 아 정해정해 순서 순서 lucky-clafoutis-ac740a.netlify.app

https://ohikmyeong.github.io/dindjarin_cacul/ Din Djarin Caculator 봅뺏님의 블로그 포스팅을 참고해주세요 그로구 애비의 인권을 위해 소수점 2번째 자리까지만 표시합니다. 엔터키를 쳐주시면 단위가 붙습니다~! ohikmyeong.github.io

보호되어 있는 글입니다.

진짜 최종의_최종의_최종.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/marquee_text GitHub - OhIkmyeong/marquee_text Contribute to OhIkmyeong/marquee_text development by creating an account on GitHub. github.com 사용방법 : HTML : marquee 시킬 텍스트들을 감싼 ul에 클래스 "marqueeText"를 지정합니다. 기본 : 수평, 왼쪽방향으로 흐름 (왼 오) .marqueeText.vertical.down : 수직. 위에서 아래로 흐름 .marqueeText.vertical : 아래에서 위로 흐름..

깃허브 : 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문법으로 리팩토링 해볼겸 기능도 추가하였습니다~! 추가된 기능 키보드 동작 (위 아래 화살표..