학습한 내용

1. transforms
2. transition
3. animation
4. 애니메이션 실습

<애니매이션 실습>
1. 마우스애니매이션

*rgb 값 (rgba 사용, 맨 마지막 투명도임.)
=background-color: rgba(255, 255, 255, 0.5);

*원형으로 바꿀때는?
=border-radius: 50%;

2. 애니메이션에서 사용할 수 있는 추가적인 속성!
   -> 러닝 : 최초 화면에서 움직이도록하여 사용자에게 보여준다.
   animation-play-state: running;
   최초 화면을 사용자에게 보여준다는 의미
   animation-fill-mode: backwards;
   

3. 커졌다가 작아졌다가 효과주기
   
   @keyframes outerBorder {
   0%{border-color: red; transform: scale(1);}
   25%{border-color: yellow; transform: scale(1.2);}
   50%{border-color: blue; transform: scale(1.3);}
   75%{border-color: green; transform: scale(1.2);}
   100%{border-color: pink; transform: scale(1);}

4. 박스 안에 가두기
   
   box-sizing: border-box;
   
5. 마리오 컨테이너 만들기(1:52:00~이후부터 계속 진행)
   
   

학습한 내용 중 어려웠던 점 또는 해결못한 것들

• 마리오 컨테이너 만들기 이후부터 계속 진행해야함.
• 근데 html이랑 css 파일이 갑자기 연동이 안된다.ㅜㅜ

해결방법 작성

-html, css 파일 다시 생성후, 작업 재진행

학습 소감

-어제보다 재밌다!