창고

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

제로초(조현영)님의 인프런/유튜브 무료 강의 "렛츠기릿 자바스크립트" 공부 내용입니다. [무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의 본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카 www.inflearn.com 본 강의에서 2022년 기준 12강에 해당하는 지뢰찾기를 class 문법으로 재구성했습니다. 기본 기능들은 강의 내용과 동일하며, 노란색 바탕은 추가한 기능입니다. 마우스 이벤트는 추가한 기능 때문에 addEventListener 부분이 다르니 유의해주세용 구현한 기능 form으로 행,열,지뢰의 갯수를 받아 table을 그린다. form의 s..

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://www.inflearn.com/course/레츠기릿-자바스크립트/lecture/80516 //https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes //https://ko.javascript.info/class class Test{ constructor(){ this.btn0 = document.getElementById('btn0'); this.btn1 = document.getElementById('b..

직장 상사에게 커밋 알림용 카톡메세지를 보낼때, 형식을 갖추면서 보내면 이후에 확인할 때도 편하다. SVN에 물론 자체 커밋로그가 있지만... 맨날 커밋했습니당~ 이렇게 보내기가 더 귀찮아서 만들어버렸다. 커밋 메세지 생성기 ㅎㅎ 여기서 쓰시면 됩니다 https://github.com/OhIkmyeong/bnMessageGenerator GitHub - OhIkmyeong/bnMessageGenerator: 커밋 관련 카톡 메세지 생성기 커밋 관련 카톡 메세지 생성기. Contribute to OhIkmyeong/bnMessageGenerator development by creating an account on GitHub. github.com

제로초님의 렛츠기릿 자바스크립트 강의에 Eun-Gil Cho님이 작성해주신 질문을 바탕으로 쓰여진 포스팅입니다. 재귀함수로 십진수를 이진수로 표현하기 See the Pen Untitled by Oh Ikmyeong (@dpffpself) on CodePen. 이건 그냥 이진수를 십진수로 바꾸기 See the Pen To Decimal by Oh Ikmyeong (@dpffpself) on CodePen. 얄팍한 코딩사전 - 재귀의 기초 이해 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..

개선 사항 : 좀 더 단순화한 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..

인프런에서 1분코딩님이 제공하는 무료강의 : BBC 인터랙티브 페이지 클론 코딩하기 복습 (원본 BBC 사이트 바로가기) 메모 Intersection Observer가 관찰하는 대상이 화면 높이보다 작거나 크면 잘 관찰되지만, 딱 100vh일땐 씹고 넘어가는 현상을 왕왕 봄 0_0;;자바스크립트가 똑같은 코드인데도 기본 Intersection Oberserver가 등신같이 군다면 CSS를 확인해보자... 클래스를 추가하고 제거할 때 번쩍거리는 현상을 어떻게 해결할까.. prev로 저장해서 해보기도 했지만 꼬여서 결국 그냥 css transition delay값을 조정하였다. 원본일때와 visible 모드일때 transition delay값을 다르게 조정해주면 된다. (visible모드일때 transiti..

보호되어 있는 글입니다.

미리보기 : 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..

https://github.com/CoenraadS/Bracket-Pair-Colorizer-2#readme GitHub - CoenraadS/Bracket-Pair-Colorizer-2: Bracket Colorizer Extension for VSCode Bracket Colorizer Extension for VSCode. Contribute to CoenraadS/Bracket-Pair-Colorizer-2 development by creating an account on GitHub. github.com 그 말인 즉슨,... 확장프로그램으로 너무 잘 쓰고 있던 Bracket Pair Colorizer가 더 이상 지원을 하지 않겠다는 뜻이죠잉 ㅠ.ㅠ 그간 너무 수고 많았습니다. 그러면 설치했던 ..

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

문제 및 답안 링크 문제98 A new tool for teams & individuals that blends everyday work apps into one. www.notion.so 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 /******** * 패션의 선도주자 청길이는 패션의 발전을 위해 패션쇼를 방문해 유니크한 아이템을 조사하기로 하였습니다. * 청길이는 입장하는 사람들의 패션에서 * 처음 보는 아이템 만을 기록합니다. * 이때 청길이의 기록에서..