01. Javascript Drum Kit
키보드를 누르면 화면에 효과와 함께 소리가 나는 드럼 킷을 만드는 것
목표
1.키보드를 눌렀을 때 css 효과 추가되어 나타난다.
2.오디오를 play() 시킨다.
3.연속해서 키보드를 눌렀을 경우에도, 동작되도록 한다.
4.키보드를 눌러 나타난 효과가 사라지도록 한다.
data-* 속성
: HTML에 데이터를 저장하는 방법
ex) data-age=19 또는 data-name=“gildong” 이렇게 원하는 데이터를 저장하여 사용할 수 있다.
키보드의 keyCode
: https://keycode.info/ 각 키의 keycode를 알 수 있다.
HTML <kbd> 태그
: 키보드 입력을 정의하는 HTML 태그
HTML <audio> 태그
: 소리 컨텐츠를 포함하기 위해 사용
CSS “background-size” :
-
auto(default) | length | cover | contain | initial | inherit
-
cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소합니다. (가로 세로 비율을 유지)
CSS “flexbox”
-
엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구. 원하는 태그에 display:flex 속성을 부여하여 사용
-
flex container(부모 요소) 속성 + flex item(자식 요소) 속성
-
[flexbox 설명] : https://d2.naver.com/helloworld/8540176#ch2
CSS “vh, vw” 단위
-
너비값과 높이값이 부모 요소의 너비값과 높이값의 뷰포트에 맞게 사용할 수 있는 단위.
CSS “transition” 속성
-
애니메이션 속도를 조절하는 방법을 제공
