Transition / Transformation / Media query

📌 Transition

---

💡 어떤 상태에서 다른 상태로 가는 변화를 애니메이션 하는 것. transition속성은 state가 없는 요소에 붙어야 한다. transition에서 변화를 준 것들은 state에 들어있는 것들이 기준이 되어 바뀐다. 다시 한번, transition은 root에 있어야 한다. state에 있으면 안된다!

📌 Transformation / Animation

---

transformation은 한 요소를 transform(변형)시킬 수 있다. transformation은 다른 box element, 이미지에 영향을 끼치지 않는다. 마진, 패딩이 적용되지 않는다. 일종의 3D transformation이기 때문. 다른 요소의 박스를 변형시키지 않고 원하는 요소를 이동시키기 위해서 사용하는 것.

@keyframe 이름 {
from{효과}
to{효과}
}
img{animation:이름, 시간, 옵션(무한반복:인피니트)};

from-to말고 %등 여러 단계로 나눠서 애니메이션을 만들 수 있음. transform을 사용하는 것을 권장한다. 
한바퀴를 돌리려면 0%와 100%값이 같아야 한다.

📌 Media query

---

css만을 이용해서 스크린의 사이즈를 알 수 있는 방법. 브라우저에게 '스크린 사이즈가 이정도 크기라면 css를 보여줘!'

@media screen and (max-width:400px) {css}`
-> 스크린이 400px 보다 작으면 괄호안의 css화면이 출력된다.

@media screen and(min-width:650px) and (max-width: 750px) {css}`
-> 화면이 650px ~ 750px 사이에 있을 때만 적용 됨.