# JS30

13개의 포스트
post-thumbnail

[JS30] - 28) Video Speed Controller

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

2021년 11월 11일
·
0개의 댓글
·
post-thumbnail

[TIL] 2021.10.24 (JS30, 알고리즘 문제풀이, 마우스 클릭좌표, 브라우저 렌더링 과정과 순서)

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

2021년 10월 24일
·
0개의 댓글
·
post-thumbnail

[JS30] -2) JS + CSS Clock

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

2021년 10월 21일
·
0개의 댓글
·

02.JS css clock

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

2021년 10월 11일
·
0개의 댓글
·

01. JS Drum Kit

JS Drum Kit

2021년 7월 26일
·
0개의 댓글
·

JS30 Day08

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

2020년 9월 25일
·
0개의 댓글
·

JS30 Day07

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

2020년 9월 25일
·
0개의 댓글
·

JS30 Day06

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

2020년 9월 25일
·
0개의 댓글
·

JS30 Day05

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

2020년 9월 25일
·
0개의 댓글
·

JS30 Day04

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

2020년 9월 25일
·
0개의 댓글
·

JS30 Day03

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

2020년 9월 18일
·
0개의 댓글
·

JS30 Day02

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

2020년 9월 18일
·
0개의 댓글
·

JS30 Day01

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

2020년 9월 18일
·
0개의 댓글
·