22/06/09/목 예제 복습, 애플 웹사이트 인터랙션 클론

220609 Today I learned!

• 인터랙티브 웹 개발 제대로 시작하기 예제 복습
• 애플 웹사이트 인터랙션 클론 강의 듣기

---

1. Fact

(1) 인터랙티브 웹 개발 제대로 시작하기 예제 복습

• 종합예제를 혼자 만들어 보면서, 학습했던 내용을 복습 (전진! 3D 스크롤)

  • 스크롤을 하면 캐릭터가 이동하는 듯한 모습을 보인다.
    • 배경의 z-index 값을 수정하여 배경이 움직이는 듯한 효과를 준다.
    • 팔과 다리의rotate 값을 수정하여, 캐릭터가 걷는 듯한 모션을 보여준다.
  • 마우스를 움직이면, 사용자가 보는 시야가 움직인다.
    • 사용자의 마우스의 위치에 따라 배경이 rotate한다.
  • 마우스를 클릭하면, 해당 x좌표에 캐릭터가 생성된다.
    • 객체 생성자 함수를 통해 캐릭터 컴포넌트를 생성한다.
    • 사용자가 클릭한 마우스의 x좌표를 컴포넌트의 스타일 속성의left값으로 주어 배치한다.
  • 방향키를 누르면 캐릭터가 이동한다.
    • 방향키를 누르면 캐릭터가 방향키에 맞는 방향으로 회전하고 움직이는 듯한 모션을 보여준다.
    • 캐릭터의 left 값을 수정하여 캐릭터를 이동시킨다.

• 정리본

(2) 애플 웹사이트 인터랙션 클론

• 섹션0 ~ 섹션1
• 기초적인 html, css 구조 생성
• 정리본

---

2. Feeling

null;

---

3. Finding

null;

---

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	pause 🤦‍♀️	잠시 중단!
JavsScript DeepDive	notStarted🌙
와자뵤! 다시 만들기	notStarted🌙