고급 CSS 정리

지금까지 (1)트랜지션, (2) 트랜스포메이션, (3) 애니메이션, (4) 미디어쿼리를 배웠습니다.
(1) 트랜지션, Transition: 하나의 state에서 다른 state로 넘어갈 때 나타나는 효과,
예를 들어, hover(마우스 커서가 박스 위에 있을 때)하면 변화가 일어나게 할 수 있습니다.

(2) 트랜스포메이션, Transformation: element의 모양을 변형하게 하는 효과,
예를 들어, 뒤집거나, 비틀거나(skew), 크기를 키우거나, 줄일 수 있습니다.

그리고 트랜지션-트랜스포메이션을 합쳐서 사용해 보았습니다.
즉, 트랜지션하는 순간에, 모양새가 변형되는것(트랜스포메이션)되는 것으로, hover할 때 회전시킬 수 있습니다. 

(3) 애니메이션, anmation: @keyframes을 만들어서 from-to나 0%-50%-100%를 지정하여 변형을 만들 수 있습니다.

(4) 미디아 쿼리: media query: 브라우저 사이즈를 잡는 것으로 모바일 환경에서 특히 유용하게 쓰입니다.