# JS30

gygy

이전 프로젝트 \[JS30] - 11) Custom Video Player 에서 한번 비디오에 대해 다룬적이 있었던데다 간단한 프로젝트여서 어렵지는 않았다.다만 offsetY의 높이를 원하는 재생속도로 어떻게 변환할지가 고민이 되어 해당 부분은 강의를 참고했다.0.4x

gygy

[JS30] - 8) Fun with HATML5 Canvas [JS] 마우스 클릭 좌표 ( screenX, clientX, pageX, offsetX )

gygy

transform-origin: x-axis y-axis;rotate으로 회전을 시키면 가운데 축으로 돌아가게 된다. transform-origin: 100%;을 주면 아래와 같이 지정한 축을 중심으로 돌아가게 된다.setInterval로 1초마다 getSec

hyeondex

시계 만들기 transition-timing-function : 요소의 움직임 기능을 정의하는 것 cubic-bezier(n,n,n,n) 배지어 곡선 값을 만들어서 속도 설정)

hyeondex

JS Drum Kit

secho

canvas 요소를 사용해 그림판을 만듦canvas요소 사용width, height요소만 존재고정크기의 드로잉 영역을 생성하고 하나 이상의 랜더링 컨텍스트를 노출해 컨텐츠를 생성, 출력함getContext()를 이용해 그리기 함수를 사용할 수 있음

secho

array 메소드에 대해 학습some :every:find:findIndex:some, Date를 사용하여 19살이상인 성인인지 확인하는 함수를 작성\-> 적어도 하나가 성인이므로 true의 결과를 출력every를 사용하여 모두가 성인인지 확인하는 함수를 작성\-> 모

secho

검색했을 때 새로고침 없이 검색결과가 입력한 글자마다 나오도록api에서 데이터를 가져오고, 가공해서 원하는 결과로 parsing정규표현식promise, fetchapi call

secho

flexbox.iodisplay:flex에 대해 학습flex로 grid형태로 만들고 각 영역을 조정함으로써 애니메이션 추가translateY 로 애니메이션을 만듦JS로 각 패널을 클릭했을 때 toggle로 on, offclassList.toggleflex, justif

secho

array 메소드에 대해 다룸filter, map, sort, reduce 등을 이용해 주어진 문제를 해결array 메소드들에 대한 이해prototype에 map메소드가 없으면 유사배열 객체나 반복가능한 객체를 얕게 복사해 새로운 Array 객체로 만들어 순회할 수 있

secho

sass자바스크립트를 이용해서 CSS를 변경한다.sass을 사용한다 -> CSS 변수input으로 통해 선택된 value값을 px가 붙은 값으로 CSS스타일을 지정해주어야 하므로 suffix를 추가해주어야한다.RGB값은 px가 필요없으므로 data-sizing을 지정해

secho

시, 분, 초를 갖는 시계를 만들 것JS와 CSS만으로!transform, rotate degreetransform-origin ->transition 속성transition-timing-functionsetInterval현재시간을 반환할 Date 객체의 메소드들CSS

secho

keyCode는 deprecated. 대신 key를 사용함9개의 키를 눌렀을 때 각 키에서 드럼 소리를 나도록 이벤트를 작성해라연속으로 눌렀을 때 한번만 실행되지 않고 누른 숫자만큼 끊김없이 실행되도록해라키 클릭시 눌른 키가 무엇인지 확인할 수 있도록 애니메이션추가특정