오늘의 수업 일정

화 | Day 09
✍️ #3.17. #4.0 ~ #4.4
✔️ 코드 챌린지

수업 간단 정리

States

웹 페이지의 조건에 맞춰 활성화를 가능케 하는 States

1. :active
2. :hover
3. :focus
4. :visited
5. :focus-within

Transitions

Transition : 상태변화를 애니매이션으로 만드는 것

Transition 은

• state가 없는 요소에 붙여야 한다.
• 가장 처음 태어난 곳root, element에 있어야 한다.
• 변화를 시키려면 양쪽(root와 state)에 같은 속성이 꼭 있어야한다.

a {
color: white;
background-color: wheat;
transition: all 1s ease-in-out;
}

a:hover{
color: tomato;
background-color: brown;
}

---

💡ease-in function 코드 실습

⭐ease-in-function

-브라우저에게 애니메이션이 어떻게 변화하는지를 알려준다.
1) linear: 요소를 직선으로 움직이게 만들어줌. 같은 속도로 움직임.
2) ease-in: 처음에 좀 더 빨라지면서 움직임.
3) ease-out: 끝에서 느려짐.
4) ease-in-out: 처음에 느렸다가 중간에 가속했다가 끝에 느려지면서 끝남.
5)cubic-bazier : 사용자가 직접 애니메이션을 만들어 적용

---

Transformations

Transformation : CSS사용해서 3D로 변형하는 것
transformation은 box element를 변형시키지 않는다.

📎Transformation mdn

Animations

마우스를 올렸을때가 아니고 계속 재생되는 이미지를 가지고싶다면? Animation

@keyframes name{
	from{transform:rotateX(0):
    }
    to{transform:rotateX(360deg):
    }
}


img {animation: name 5s ease-in-out infinite;}

//해당 이미지가 5초동안 회전하는걸 무한 반복하게됨

from~to 말고 %를 사용해서 애니매이션 생성 가능.
%는 정해진건 아니고 자유롭게 나눠서 사용해도 된다.

@keyframes name{
	0%{transform:rotateX(0):
    }
    50%{transform:rotateX(360deg):
    }
    100%{transform:rotateX(0):
    }
}

속성은 transform이 필수는 아니지만 권장함.
어떤 속성은 애니메이션이 잘 안먹히기도 하기때문에!

⭐Animation 코드 실습⭐

코코아 클론 챌린지 QUIZ

📎제출 과제

animation-delay 속성
animation-delay는 animation의 시작을 지연시키는 속성입니다.
5개의 막대가 동일한 애니메이션을 가지고 있지만, 시작되는 시점이 조금씩 다릅니다.
transform 속성
transform속성으로 요소에 다양한 변화를 적용할 수 있습니다.
요소를 돌리고, 늘리고, 옮길 수 있습니다.
border-radius 속성
웹페이지에 동그라미를 그릴 수 있는 방법은 한 가지만 존재하지 않습니다.
마침표나 기호를 사용할 수도 있고, canvas 태그를 이용해서 그릴 수도 있습니다.
하지만 이번엔 border-radius 속성을 이용해보세요.

15일 클론 챌린지 회고

그래도(? 어제보단 박스 구성하는 부분에서 쉬웠는데, 애니메이션 사용하는 부분이 진짜 어렵긴하네
delay속성 쓰는 부분도 그렇고, @keyframes사용해서 구현은 한거같긴한데 아직 회전하는 애니메이션은 부분 스탑을 해야하는데 그 부분은 놓친거같다 ;ㅅ; 내일 답변보고 다시 해결해봐야지 🤣