개발기록

Key Sequence Detection (KONAMI CODE) KONAMI CODE 란, 코나미의 비디오 게임들에서 나타나는 치트 코드의 일종으로, 일종의 속임수로 사용하는 방법이다. 사용법은 주로 특정한 조작을 하거나 특정한 문단을 입력해 사용된다.(라고 위키백과에 나와있다.) 숨겨진 암호를 키보드로 작성하면 숨겨진 무언가 나오는 그런..암호작성 코드이다. 1. .splice를 이용한 정해진 숫자갯수 배열에 넣기 2..includes를 이용하여 숨겨진 코드 포함한 문자열 확인하기 3. cornify.com이라는 사이트에서 사용하는 cornify.js 사용해보기 코드 알게된 문법 .splice() .splice([처음 삭제할 요소],[몇개삭제할건지 숫자 적기]) 처음 삭제할 요소에 음수(-)를 작성하..

Custom HTML5 Video Player 비디오 플레이어 만들기 1.재생버튼 누르면 비디오 시작/중지 하기 2.게이지값 설정하면 소리/재생속도 조절하기 3.10초전과 20초 후 클릭시 해당 시간으로 가기 4.10초 전과 20초 후 클릭하거나, 재생, 마우스 클릭 및 마우스 무브시 progress바 움직이기 코드 ► « 10s 25s » html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0; display: flex; background: #7A419B; min-height: 100vh; background: linear-gradient(135deg, #7c159..

Hold Shift to Check Multiple Checkboxes 체크박스 만들기 특이점 : 처음 체크박스 체크 하고 shift를 누르고 체크하면 그 사이 체크박스가 체크된다. 1.변수에 this 넣고, 그 안에 처음 클릭한 객체를 기억시킨다 2.체크박스 중복체크시 설정 다르게 하기위해, 처음클릭 true 두번째 클릭 false로 설정하기 코드 This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything in between should also be set to checked Try to do it without any libraries Just regular JavaScript Good L..

14 Must Know Dev Tools Tricks console의 메서드를 배운다. 1.console의 메서드들 배우기 2.data를 콘솔에서 확인하기 코드 ×BREAK×DOWN× 알게된 문법 console.log(%s,%c) %s : 문자열 출력 %c : 콘솔에 css스타일 적용 가능 console.dir() 객체의 태그를 보고싶으면, console.log를 사용하고, 객체의 메서드를 알고싶으면 console.dir을 사용한다. console.groupCollapsed() , console.groupEnd() 배열을 어떤 기준으로 묶을 때 처음 프로퍼티를 기준으로 그루핑후 마지막으로 groupEnd를 작성하면 그루핑한 내용이 똑같이 복사됨 console.count() 똑같은걸 count하면 하나씩 ..

Fun with HTML5 Canvas 마우스를 누르면서 이동하면 그라데이션으로 획이 그려진다. 1. canvas 사용법 알아보기 2. canvas 관련 메서드 .lineJoin / .lineCap / .getContext 등 알아보기 3.초기 true값 false변경 작성 방법 코드 알게 된 문법 canvas를 사용할 때 쓰는 메서드들 .getContext var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); canvas를 사용할때 기본 메서드 .getContext() 메서드를 호출해야 그리기 함수 사용이 가능하다 .lineJoin() / .lineCap() .lineJoin() : canvas 선 꺾이는..

Array Cardio Day 2 찾기 메서드로 배열의 프로퍼티에 접근한다. 1. .some()과 .every()의 차이점과, .find()와 .findIndex()의 차이점 확인 2..slice()활용과 this의 바인딩 코드 Psst: have a look at the JavaScript Console 💁 알게된 문법 .some() arr.some(callback[, thisArg]) 배열에서 값이 맞는지 검토하기 위해 사용하는 메서드 thisArg->조건작성 조건이 하나라도 참이면 true 거짓이면 false를 반환한다. .every() .some()메서드와 같이 배열에서 값이 맞는지 검토하기 위해 사용한다. .some()메서드와 다른 점은 조건이 모두 참이이어야 true 거짓이면 false를 반환..