키보드를 누르면 오디오의 키 번호와 키보드의 키 번호를 인식해서 일치하면 오디오에 있는 효과음을 들려주고, 누르는 순간 키의 사이즈를 크게 만들고 노란색 테두리가 생기도록 만든다. (transition이 끝나는 지점을 선택하여, 그 때 노란색 테두리가 생기는 스타일을 제거하는 것이 시간을 측정해서 하는 것보다 ❗ 성능 ❗이 훨씬 좋다.)
class를 모아둔 것, 배열의 형태로 저장되어있다. 그래서 forEach 이용해서 각자 꺼낼 수 있다. 또한, 이벤트리스너와 연결시키면 원하는 이벤트를 만들어낼 수 있어서 유용하다.
toggle
기능을 켰다가 꺼줄 수 있다.
(대표적인 기능) 메뉴을 열었다가 닫을 수 있다.
add
class를 추가시켜준다.
add와 remove를 같이 쓰는 경우가 많다.
remove
class를 제거시켜준다.
add와 remove를 같이 쓰는 경우가 많다.
조건을 boolean을 이용하면 편리하다. true인 경우 돌아가니 구구절절 적지 않아도 된다.
(일반적인 함수 작동 원리) 함수 호출한 것을 발견한다. -> 함수로 가서 중괄호 안에 있는 명령문을 실행한다. -> 끝나면 끝낸다.
데이터를 저장하지 않지만, return을 이용하면 데이터를 변수에 저장하여 변수를 재사용할 수 있다.
전자 키보드를 만들어보고 싶다! 같은 원리로~!
아날로그 시계를 만들 것이다. 시, 분, 초의 각도를 생각해서 바늘이 움직일 수 있도록 조정해준다.
간단한 변형하는 경우에 이용한다.
시간에 따라서 변형하는 경우에 이용한다.
작동원리는 비슷하다. 잘 기억해두기~!
비슷한 두 가지를 만들어보니, 기억에 훨씬 잘 남는다.
구글링을 통해서 남의 코드 많이 보기...!
(생각)
1. 이미지 영역, 텍스트 영역을 따로 만든 뒤에 이미지 영역 위에 텍스트 영역을 얹는다.
2. 텍스트 영역과 이미지 영역 사이즈와 위치를 맞춘 뒤에 평소에는 "opacity=0" 으로 만들어서 투명하게 만든다.
3. 마우스 올리는 경우에는 보이도록 "opacity=1" 으로 만든다.
(🤚 참고할 점)
❗ F12 개발자 도구 ❗를 잘 이용하자~! 내가 얼마나 이 부분을 옮기고, 설정하는지는 개발자 도구에서 조정해보면서 한다면 금방 깔끔하게 만들어낼 수 있다. 이용하지 않고 하려면 오래 걸리지만, 영역을 보면서 하면 금방 이해도 되고, 복잡하게 코드를 짜지 않고도 결과가 충분히 잘 나온다.