도로롱 도로롱 귀여운 내 바이크를 css로 굴러가게 만들었다
(얘는 진짜로 제 바이크입니다 귀엽죠!)

개인적으로는 오토바이 뒷바퀴가 앞바퀴보다 크다는 사실을 반영한 점이 상당히 뿌듯하다

🔥 오늘의 목표

• 주말은 배운것들 복습!!!

---

📝 노트필기 및 정리

1. 도형 로딩 애니메이션

span은 인라인 요소라 크기값을 줄 수 없으니 inline-block으로 변화를 줬다.
부모요소인 .container에는 position: absolute;를 줬고,
자식 요소인 span에 Relative를 줬다. (...)
그리고 애니메이션을 주기 위해 left와 top만을 이용해 위치를 시켰다.

...왜죠?

...강의를 다시 봤더니 잠깐, 일단 span이 2개가 아니라 4개인 것부터 틀렸다.
애니메이션 keyframe을 4구간으로 나눠서 주는 것을 span이 4개인 것으로 착각했다.
span을 고쳤고...
위에서부터 잘못 썼는데(ㅋㅋㅋ) position: absolute랑 relative 를 바꿔 썼죠... 고쳐줬습니다.

그리고 위치값은 span:nth-child에 쓰는 게 아니라

keyframe에 주는 것이고, calc를 준 이유는

이렇게 정확하게 .container의 border안에서 빙글빙글 돌게 하려고 줬다.

2. 더블 보더 래디우스 애니메이션

지금 문제는..
뭔가를 뱅글뱅글 움직이게 하려고 한다면 animation rotate를 줘야 하는 건 아는데,

그게 요소 자기 자신에 animation: rotate(360deg); 인지,

@keyfrmae 을 한 다음 0%와 100%에 360deg를 적용시켜야 하는지에 대한 그런 헷갈림이다~!!!
(후자가 맞다..엥? 그럼 전자는 뭐지?)

이런 문제는 이론이 제대로 정립이 안되어서인가??ㅠㅠ
앗 단순 경험 부족일수도...

일단 의문 드는 부분을 강의 내 노트에다가 써놨다.

그리고 중요한 점!!!
모든 요소는 position: absolute 속성을 가지면 인라인 블록 요소로 변한다!!!

+ 요소에다 border를 그리니 크기와 상대를 확실하게 확인할 수 있어서 좋다.
그리고 span에 맞춰 수평중앙중렬을 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);로 처리하면 되지만,
간단하게 margin-top을 적용하면 안되나? 싶어서 적용해보았다.

결과는 된다!
그런데, 가로 길이를 줄이고 싶어서 margin-top 밑에 더해서 width: 150;을 줘 보았다.

그랬더니 이렇게 완전히 자리를 이탈해 찌그러져 버렸다.
이건 mt을 주석 처리해도 동일했다. 이건 왜일까??
일단은 저쪽에서 진행이 안 돼서 width를 주석 처리하고 넘어갔다.

그렇게 해서 다시 완성한 결과물!!

---

💭 느낀점

• 오늘 한 일은 무엇인가요?
  작업일지를 써 놓으니 확실히 어떤 예제들을 어떤 것을 사용해서 만들었고, 어떤 부분을 어려워했는지 확실하게 다시 짚어보기가 좋다.
  앞으로 만들 예제들이 점점 더 난이도가 올라갈거기도 하고, 지금처럼 어떤 문제들이 있었는지 더 자세하게 써야겠다.
  게다가 완전히 100%는 아니더라도, 혼자서 만들어내지 못한다면 그건 내 실력이 아니라고 생각하기 때문에 다시한번 복습해봤는데 안했으면 큰일날 뻔 했다 ㅠㅠ 이렇게 헷갈려 할 줄은..!
  복습하면서 내가 쓸데없이 많은 html 계층 구조를 만드는구나를 깨닫기도 했다.

• 내일 할 일은 무엇인가요?