⏺학습한 내용🕵️‍♂️

⭕ KidsGao 실습

• -initial : media query 바깥 쪽에서 작성한 code를 mobile 버전에서는 사용하지 않을 때 사용

• animation reference site

.bubble1 {
  animation-name: bubble1-keyframes;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
}
@keyframes bubble1-keyframes {
  0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  100% {transform:translate(-166px, -262px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}html::after { content: url(https://ga-beacon.appspot.com/UA-42910121-1/stylie?pixel); position: absolute; left: -999em; }

> html 부분 삭제, 영역설정과 animation-name & keyframes 이름 변경

• <button type="button" class="red"></button>
  <button type="button"></button>

  server로 보내야 되는 정보면 button대신 submit을 넣어준다.

• 실무TIP!
  id / class 생성 시 가독성 및 오탈자 방지를 위한 본인만의 규칙성을 주어 만든다.

⏺학습내용 중 어려웠던 점🤦‍♂️

🔘 image들이 한 번씩 집나가면 찾아오기,, 자꾸 일어나면 앉혀놓기,, 돌아다니면 다시 앉혀놓기,,숨어있으면 들추기,,

⏺해결방법🙋‍♂️

🔘 급급하게 따라가려고 하지말고 찬찬히 보면 잘 찾을 수 있다. 개발자 도구 검사를 통한 오류 찾기도 덕분에 실력늘어가는중

⏺학습소감🙇‍♂️

🔘 첫 실습이 끝났는데, 따라가면서 강의 수강하기 보다 수강하면서 중요내용들 정리해놓고, 그 다음 따라 코드 짜보고, 다 된 상태에서 하나하나 뜯어보면서 훑어보는게 가장 효율이 좋은 것 같다. 역시 지금은 position 에 대한 이해와 응용력을 키우는 부분이 가장 시급한 것 같다.