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