창고

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. KopubWorld - 편집에 최적화 - 웹은 따로 eot랑 woff 만들어서 직접 해야함 2. Noto Sans KR - 구글이 제공해주는 무료 웹폰트 CDN = 엄청 편함! - Noto다 보니 한자 깨지는게 없다고 생각하면 됨 고마워요 구글 ㅎ - 다만 생으로 갖다 쓰다보면 전체적으로 묘하게 뚝딱거리는 느낌은 있음. 자간을 조정해야함. 행간도 좀 뚝딱거리는 느낌이 있음... - 현재 그냥 빠르게 걱정없이 갖다 비비기 가장 좋은 무료 웹폰트 3. Spoqa Han Sans Neo - 무료 CDN을 제공하지만, 빠른 속도를 원한다면 직접 해야함. 다만 킹갓 스포카는 서브를 지원해서 woff, eot까지 함께 제공하고 있음 - 알못이 보면 Noto Sans와 거의 비슷하지만 Noto Sans의 뚝딱거..

인프런에서 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 /******** * 패션의 선도주자 청길이는 패션의 발전을 위해 패션쇼를 방문해 유니크한 아이템을 조사하기로 하였습니다. * 청길이는 입장하는 사람들의 패션에서 * 처음 보는 아이템 만을 기록합니다. * 이때 청길이의 기록에서..

JavaScript 100제 97번 택배 배달 문제 및 답안 링크 답안에서는 남아있는 짐이 없을 때 = 더이상 상하차할 짐이 없을 때 걸린 시간 + 남은짐중에 가장 거리가 많은것(Math.max)해서 하는 방식이고 나는 이렇게 해봤다. 근데 기본 답안이 훨씬 더 좋다. 아무래도 택배상하차가 더 빨리 끝나서 early return이 되기 때문에... 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 /******* * n 명의 택배 배달원은 쌓인 택배를 배달해야 합니다. * 각 택배는 접수된 순서로 배달이 되며 택배마..

문제 링크 : https://www.notion.so/95-b86af91cf9914a84947e017dec5101bc 문제95 A new tool for teams & individuals that blends everyday work apps into one. www.notion.so 기본 답안 링크 : https://www.notion.so/63b6d5e084a64316a0999d2960c0cb98 답안 // 기본 입력부분입니다 // N, stmp, k를 입력받습니다. let N = parseInt(prompt('도장의 크기를 입력하세요.'), 10); let stmp = []; // stmp = [ // [1,1,1,2], // [2,0,0,0], // [1,1,1,1], // [0,0,0,0]];..

답변에 나온것은 2x2 외의 행렬에 취약하여, 자꾸 에러를 뿜길래.. 내가 짠 코드를 제공합니다 70번 행렬 곱하기 문제 링크 70번 행렬 곱하기 해설 링크 그리고 유용한 사이트 행렬계산기 행렬 계산기 이 계산기의 도움으로 행렬 행렬식, 계수, 행렬의 거듭 제곱, 행렬의 합과 곱셈을 구하고 역행렬을 계산할 수 있습니다. 행렬 요소를 입력하고 버튼을 클릭하십시오. matrixcalc.org 여기서 결과값 검증해가면서 해봤다 우선 해설 코드대로 하면 다음 행렬을 계산하지 못한다 1 2 3 4 5 const test_1 = [[1,2,3]]; const test_2 = [[1,1,1,1,1],[2,2,2,2,2],[3,3,3,3,3]]; solution(test_1,test_2); //에러 발생! //이상 값..

http://www.paullab.co.kr/codefestival.html About Me www.paullab.co.kr 제주코딩 베이스캠프에서 무료로 제공하는 파이썬 100제와 자바스크립트 100제 홈페이지 해당 홈페이지에서는 문제 pdf 파일 답안 notion (JS 100제 notion 바로가기) 해설강좌 (인프런-유료) (약 5만원) 코딩테스트 (인프런-유료)(약 4만원) 등을 제공하고있다. 인프런 구경하다가 발견해서 한문제씩 풀고있는데 도움이 많이 된다.. 50번 이후부터는 푸는 속도가 매우 느려지고있음 ^.ㅠa 알고리즘과 재귀함수에 대한게 매우 약했다는걸 새삼...새삼 깨닫고..ㅎ 세상에 이렇게 좋은 문제와 답안을 무료로 제공해주는 사람들이 있어서 정말로 감사하다...

? 이게 무슨일인가? 왜 포토샵과 인디자인의 RGB 파일 색상이 다르게 나오는건지? 예를들어 RGB(255,0,0)의 포토샵 PNG 파일을 인디자인(문서 색상모드:RGB)에 얹고 PNG로 내보내기 했을때 왜~~~ 두 파일의 색상이 다르게 보이냐 인디자인은 왜 RGB로 작업했을때 몇개는 색상값이 일치하고 몇개는 일치 안 하냐... 어쩐지 인디자인으로 웹 작업을 하면 포토샵으로 할 때 보다 뭔가 칙칙한게 기분탓인가 했더니 사실이었던것이다. 경고 : 인디자인은 원래 출력용(CMYK)작업을 하기위한 툴이기 때문에 본인의 색상설정 세팅을 잘 기억하고 있자. 이 포스팅은 RGB를 맞추려고 하기 위해 하는짓이기 때문... 님 왜 RGB작업 하는데 인디자인 쓰셈? 이라고 묻는다면 미친듯한 반복작업 때문임.. 반복작업엔..