창고

개선 사항 : 좀 더 단순화한 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작업 하는데 인디자인 쓰셈? 이라고 묻는다면 미친듯한 반복작업 때문임.. 반복작업엔..

움직이는 모달창 구현까진 완료하였는데 드래그 하던 도중 마우스가 브라우저 밖으로 나가면 이벤트가 씹히거나 윈도우가 드래그(selection)된 상태여서 UX가 굉장히 불편한 현상이 발생한다. 그래서.. 이것저것 찾아보다가 window의 selection을 해제해주면 되겠다 싶었음. 그리고 전보다 훨씬 수월하게 동작한다. 소스코드 다운로드 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 smooth modal OPEN ALL MODAL SMOOTH MODAL only vanilla JS Lorem ipsum dolor sit amet consectetur adipisicing elit. Offic..

보호되어 있는 글입니다.

이번에 추가된 자바스크립트 최신 문법은 어디서 확인할 수 있나? 여기서 : https://tc39.es/ecma262/ ECMAScript® 2022 Language Specification The first and subsequent editions of ECMAScript have provided, for certain operators, implicit numeric conversions that could lose precision or truncate. These legacy implicit conversions are maintained for backward compatibility, but not provided for BigI tc39.es

깃허브 주소 : https://github.com/OhIkmyeong/tableJson GitHub - OhIkmyeong/tableJson: json으로 테이블 만들기 json으로 테이블 만들기. Contribute to OhIkmyeong/tableJson development by creating an account on GitHub. github.com 폴더 구조 : HTML 별거 없다. 버튼 누르면 wrapper에 include_wrapper.html을 불러와 넣어줄거다. 굳이 이렇게 하는 이유는 현재 하는 프로젝트가 fetch이후에 그 테이블에 값을 그려서 넣어줄거기 땜시롱..ㅡㅡ.. 그렇지 않다면 그냥 바로 json만 fetch해서 그려주고 wrapper 때려박는게 사실 더 현명하긴 합니다...

위 아래 버튼으로, 한 parent DOM의 child element들의 순서를 바꾸고 싶다 기본 jquery에는 Sortable 이라는 효과를 내되, 마우스 드래그가 아니라 좀 더 단순하게! 내가 선택한 dom을 직속 부모 기준으로 순서를 바꿀 수 있다면 어떨까? 우선 깃허브 구현 : https://ohikmyeong.github.io/customUpDown/ change list order 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 44 change list order 위로 아래로 00..

예제 구현(git page) : https://ohikmyeong.github.io/btn_micro_interaction/ Download Button Micro-interaction using CSS & Javascript ohikmyeong.github.io Online Tutorials의 동영상을 보고 내 방식대로 구현해봄. 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 Download Button Micro-interaction using CSS & Javascript Download Complete Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13..

깃허브 주소 : https://github.com/OhIkmyeong/cpCheck GitHub - OhIkmyeong/cpCheck: 커플 체크리스트 커플 체크리스트. Contribute to OhIkmyeong/cpCheck development by creating an account on GitHub. github.com 디자인 소요시간 : 약 4~5시간 퍼블리싱 소요시간 : 1차 배포 14시간, 2차 수정 2시간 JS 코드 : 총 667행 사용 언어 : vanilla JS 오타쿠를 위한 커플링 체크리스트. 이거 한 만들어 볼까 생각만한지 꽤 됐었다. 그 때는 기존에 다른분(@honndamaria)이 만드셨던 커플링 체크리스트가 더이상 서비스 되지 않길래 (접속하면 5은영 선생님 말씀만 나와서 ㅋ..

어떻게 하면 jQuery를 쓰지 않고 html을 include 할 수 있을까? 기존 jQuery로 html을 include 하는 방법을 보다가 jQuery의 .load()를 바닐라 자바스크립트로 하면 어떻게 구현할 수 있을까 궁금해졌다. 스택오버플로우의 답변을 참고하여 만들었음 이전에 포스팅했던 jQuery 없이 html include하기는 AJAX를 사용해서 하는건데..훨씬 복잡하다. 이번에는 엄청 간단하게 fetch로 할거임! HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 include html without jquery Colored by Color Scripter cs JS - main.js 1 2 3 4 import { includeHTML } from..

CSS ONLY triangle 생성기 : https://ohikmyeong.github.io/borderWidth/ CSS만으로 화살표 만들기 ohikmyeong.github.io 이미지 없이 css만으로 단순한 삼각형(화살표)을 만들 때, border-width가지고 하는게 귀찮아서 생성기를 하나 만들었다 ㅋㅋ ^^ 소스코드 있는 git : https://github.com/OhIkmyeong/borderWidth

난 git 잘 모름 공식에서 제공하는 페이지 생성 방법을 아무리 따라해도 정작 push 하려는 순간 퍼블릭키 에러 어쩌고가 나는데 재발급을 받아도 ms 오피스 어쩌고 막 걍 닫아버리니 확인이 안되어서.. 그러다 노마드코더의 바닐라자바스크립트로 그림판 만들기 강좌에서 git을 쓰는 방법이 초반에 나오는데 그대로 하니까 되더라 ㅡㅠ... 1) git에서 먼저 New repository을 만들어줌 2) Create a new repository 2-1) Repository name은 영문명으로 2-2) Description은 적거나 말거나 2-3) Public에 체크 2-4) Add a README file 체크 하건 말건 2-5) Add.gitignore에 체크하고 """Node 추가""" 2-6) Crea..

How to get YOUTUBE's title,author,thumbnail from id without API by using only vanilla javaScript 유튜브 API를 쓰면 편하겠지만... 일정 이상 지나가면 유료인데다가, 그냥 테스트나 취미용으로 만드는 페이지에서까지 api를 등록하는건 부담스럽잖아?...ㅠ (사실 지금 이 글 쓰는 시점에서 공식 유튜브 api를 써본적 없기에 ㅇㅇ 잘 모름) 그래서 api 없이 어떻게 하면 유튜브의 동영상 id만 가지고 썸네일,제목,작성자를 가져올 수 있는지 찾아보던중 https://stackoverflow.com/questions/30084140/youtube-video-title-with-api-v3-without-api-key Youtube ..

https://ko.javascript.info/mouse-drag-and-drop 드래그 앤 드롭과 마우스 이벤트 ko.javascript.info 보통 vanilla JavaScript로 dom을 드래그 시키려고 할 때 top,left 값을 수정한다. 킹치만 그렇게 하면 layout 단계까지 전부 건들기 때문에 느려질 수 있다... 그러므로 paint 단에서 전부 처리 가능한 transform값으로 dom을 드래그 시켜보자 onmousedown 이런 직접 할당 방식이 아니라, addEventListener 이벤트 핸들러 방식으로 작성할것이다. ! 재사용 ! 이 가능하도록 특정 함수 안에 dom만 넣어주면 모든것이 처리되게끔 만들어볼거다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 ..

정말 간단함. 직속자식들의 갯수만큼 animation_delay값을 줘서 class를 부여할것임 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 text_clip 01 02 03 04 05 06 07 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 @charset "utf-8"; *{margin:0;padding:0;box-sizing:border-box;} html,body{ display:flex;flex-wrap:wrap;flex-direction:co..