창고

(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 알고리즘과 재귀함수에 대한게 매우 약했다는걸 새삼...새삼 깨닫고..ㅎ 세상에 이렇게 좋은 문제와 답안을 무료로 제공해주는 사람들이 있어서 정말로 감사하다...

움직이는 모달창 구현까진 완료하였는데 드래그 하던 도중 마우스가 브라우저 밖으로 나가면 이벤트가 씹히거나 윈도우가 드래그(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..

"바닐라 JS로 크롬 앱 만들기" 강의 다 들으면 만들 수 있는 산출물 https://ohikmyeong.github.io/momentum/ To do List ohikmyeong.github.io

쩨리쩨리님의 달력 만들기 달력만들기(1) CSS는 최소화 하였습니다. class 개념을 사용하여 HTML의 DOM은 id값만 있고, 이후 모듈이 되는 js에서 해당 함수로 생성만 하면, 해당하는 DOM에 달력이 자동으로 생성됩니다. 이전다음달 보기, 오늘 날짜 표시 같은 기능을 옵션으로 on/off 할 수 있게 해보았습니다. 이런식으로요 1 2 3 4 5 6 7 8 여기다 달력을 생성할 수 있게끔... let test = new ImCalendar(); test.startDraw({ target : 'test' ,prevNext : false ,HL_today : true }) Colored by Color Scripter cs HTML : 이 영역에선 달력을 넣고 싶은 DOM에 id만 지정해줍니다 1 ..

(1) : 몇초만에 MIT에서 만든 dyCalendar로 달력 만들기 (1-2) : (1)의 튜토리얼 영상 (Youtube : Online Tutorials) 쩨리쩨리님의 달력 만들기 [JavaScript]달력 만들기, Date 객체 * Date - 날짜와 관련된 작업을 지원한다. - 객체 생성 방법 1. var object = new Date(); 2. var object = new Date(년,월,일,시,분,초,밀리초); * Date 메소드 - 중요 메소드 1. getYear() : 1970년 이후의 연.. jerryjerryjerry.tistory.com 이 포스팅은 쩨리쩨리님의 포스팅을 기반으로 작성하였습니다. 원리 파악을 위해 CSS는 최소로 하였으며, 쩨리쩨리님의 코드를 기능별로 함수로 분리하..

git hub : https://github.com/OhIkmyeong/julian GitHub - OhIkmyeong/julian: 줄리안데이 계산기 줄리안데이 계산기. Contribute to OhIkmyeong/julian development by creating an account on GitHub. github.com 접속 주소 : https://ohikmyeong.github.io/julian/ 줄리안 데이 계산기 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 줄리안 데이 계산기 줄리안 데이 계산기 윤..

우선 최고의 참고 사이트 MDN 링크 (1)Reduce : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Array.prototype.reduce() - JavaScript | MDN reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. developer.mozilla.org (2)Rest parameters : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters Rest 파라미터 - JavaScript | MDN..

참고 : https://www.w3schools.com/howto/howto_html_include.asp How To Include HTML How TO - Include HTML Learn how to include HTML snippets in HTML. The HTML Save the HTML you want to include in an .html file: content.html Google Maps Animated Buttons www.w3schools.com HTML - index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 AJAX - HOW TO INCLUDE HTML TEST Colored by Color Scripter cs HTML..

지난번에 만든 터치슬라이더는 웹에서는 터치이벤트를 제공하지 않기 때문에 반쪽짜리 슬라이더였음. 이번에는 웹에서는 mousedown + mousemove + mouseup / 터치 지원 환경에서는 touchmove, touchend시 좌우로 SNAP 되는 바닐라 자바스크립트 슬라이더를 만들어봤다. 다음은 소스코드 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 touch, grab 일시정지 0 1 2 3 4 5 ⬅ ➡ 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..

https://ohikmyeong.github.io/windrose WindRose, Pie, Bargraph 만들기 ohikmyeong.github.io HTML WindRose PieGraph BarGraph 상대값 그래프 만들기 N1 N2 N3 N4 N5 N6 N7 N8 N9 N10 N11 N12 N13 N14 N15 N16 N17 N18 N19 N20 M1 M2 M3 M4 M5 M6 M7 M8 M9 M10 M11 M12 점찍기 CSS - 공통 @charset "utf-8"; *{margin:0;padding:0;box-sizing:border-box;} html,body{ display:flex;flex-wrap:wrap; flex-direction:column; justify-content:ce..

이미지 출처 : unsplash.com HTML CSS @charset "utf-8"; *{margin:0;padding:0;box-sizing:border-box;} html,body{width:100%;min-height:100vh;} img{vertical-align:middle;} #btn{ display:block; margin:1rem auto;padding:1em 2em;} .blur_img{ position:relative; overflow:hidden; width:40vw; aspect-ratio:16/9; margin:3rem auto; background:#000; border-radius:1rem; cursor:pointer;} .blur_img::after{ content:'이미지..