2021. 11. 17. 01:10ㆍNomadCoders/코코아 클론 챌린지
# 학습 전 나의 상태
오늘의 두 번째 시간이다.
나눠서 올리는 이유는 이번에 할 css가 약간 심화편인 것 같아서 나누게 되었다.
이 시간 이후 과제를 제출해한다. 이런 것들이 재밌다 어떤 과제일지 마지막에 과제 결과를 올려야지
# 오늘의 학습 내용
Transitions
- 어떤 상태에서 다른 상태로 가는 변화를 애니메이션화 하는 것
- hover 같은 state 요소가 아닌 처음 것에 있어야 한다.
- transition 은 state 에 따라 바뀌는 property를 가지고 있으면 사용된다.
- transition: (어떤 것을 변화시킬 것인지) (얼마동안 별할 것인지(시간)) ease-in-out
- 예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Home - My first website.</title> <style> a { color: white; background-color:blue; text-decoration: none; padding: 3px 5px; border: 1px solid #fff; border-radius: 5px; font-size: 55px; /* transition: background-color 2s ease-in-out, color 1s ease-in-out, border 2s ease-in-out; */ /* 전체를 한 번에 transition 할 때 */ transition: all 2s ease-in-out; } a:hover { color: blue; background-color: white; border: 1px solid darkblue; } </style> </head> <body> <a href="#">Go Home</a> </body> </html>
- ease-in-out
- ease-in function 이다.
- 브라우저에게 애니메이션이 어떻게 변하는지 말해준다.
- https://matthewlein.com/tools/ceaser
- 예제
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
Transformation
- 한 요소를 변형 시킨다.
- box Element, image는 변형시키지 않는다.
- margin, padding이 적용되지 않는다.
- 3D transformation이기 때문
- 다른 요소의 box를 변형시지키 않고 원하는 요소를 이동시키기 위해서 사용
- https://developer.mozilla.org/ko/docs/Web/CSS/transform
transform - CSS: Cascading Style Sheets | MDN
CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
developer.mozilla.org
애니메이션 적용하기
@keyframes 애니메이션이름 {}
@keyframes coinFlip {
form {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
img {
border: 5px solid blue;
border-radius: 50%;
animation: coinFlip 5s ease-in-out infinite;
}
translate() 되돌아가게 하는것
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
@keyframes coinFlip {
0% {
transform: rotateY(0);
}
25% {
transform: scale(2);
border: 5px solid #fff;
}
50% {
transform: rotateY(180deg) translateY(100px);
border: 5px solid red;
border-radius: 0%;
}
75%{
transform: scale(2);
border: 5px solid #fff;
}
100% {
transform: rotateY(0) translateY(0);
border: 5px solid blue;
border-radius: 50%;
}
}
img {
border: 5px solid blue;
border-radius: 50%;
animation: coinFlip 5s ease-in-out infinite;
}
과제
# 학습을 마치며
이번 과제는 생각보다 어려웠다... 겨우겨우.. 슬랙에서 사람들한거 보고 힌트를 얻어 완료했는데 생각보다 어려웠다. ㅠㅠ
css가 이렇게 어려울 줄은.. 진짜 공부 잘해둬야겠다... 챌린지 과제 덕분에 진짜 공부하는거 같아서 좋다.
'NomadCoders > 코코아 클론 챌린지' 카테고리의 다른 글
| 코코아 클론(HTML/CSS) 챌린지 회고 (0) | 2021.12.01 |
|---|---|
| 2021. 11. 17. (수) 코코아 클론 - CSS_06 (0) | 2021.11.18 |
| 2021. 11. 16. (화) 코코아 클론 - CSS_04 (0) | 2021.11.17 |
| 2021. 11. 15. (월) 코코아 클론 - CSS_03 (0) | 2021.11.15 |
| 2021. 11. 13. (토) 코코아 클론 - CSS_02 (0) | 2021.11.13 |