#4에서는 tansition, tansformation, animation, media query에 대한 내용을 배운다.
CSS에 이런 놀라운 기능들이 있다는 거에 적지 않게 놀랄 수 있었다.
Javascript의 기능들과 별 반 다를 것이 없었고, #4에서 배운 내용은 처음 보는 내용들이었다.
1. Transition
transition은 state(상태) -> state(상태) 변화를 애니메이션으로 만들어준다.
- state가 있는 tag에 transition을 적용하면 state가 동작할 때에는 작동하지만, state가 끝나는 시점엔 작동이 안 된다.
- tag의 root(기본 css 태그)에 적용을 시켜줘야 한다.
a {
color: red;
/* property name | duration | timing function | delay */
transition: color 1s ease-in-out;
}
a:hover {
color: orange;
}
a 위에 마우스를 올리면 1초동안 색상이 red -> orange로 변경된다.2. Transform
transform은 한 요소를 transform(변형) 시킨다.
- CSS를 통해 3D까지 할 수 있다.
- transform은 box element를 변형시키지 않는다.
- margin, padding이 적용되지 않는다.
-transition과 조합하여 더 역동적인 애니메이션을 만들 수 있다.
3D이므로 다른 layer라고 생각하면 될 것 같다.
3. Animation
transition과는 다르게 state 없이 페이지가 시작됨에 따라 애니메이션을 적용시킬 수 있다.
- 특정 상태가 아니라 페이지가 시작됨에 따라 적용할 수 있다.
- @keyframes로 나만의 변화를 만들 수 있다.
- @keyframes을 통해 부분별로 나눠서 애니메이션 적용이 가능하다.
애니메이션을 만들 자신은 없으니.. 마음에 드는 것을 찾아 써야겠다.
Animista - CSS Animations on Demand
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
animista.net
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
animate.style
4. Media query
media query는 CSS만을 이용해 사용자의 스크린 사이즈를 알 수 있다.
- 반응형 웹 디자인이 가능하다.
- 사용자의 스크린 사이즈에 따라 디자인 변경 가능하다.
- 모바일의 가로, 세로 모드에 따라 디자인 변경 가능하다.
5. 느낀 점
CSS에 이런 놀라운 기능이 있는지 전혀 몰랐다. 이런 놀라운 기능들을 빨리 사용해보고 싶고, 더 알아보고 싶다. 또한 이론으로는 배움에 한계가 있다는 것을 다시 한번 깨닫게 되었다. Media query를 사용하여 CSS만으로 반응형 웹을 만들 수 있고, transform과 transition을 조합하여 다양한 변화를 만드는 법을 배울 수 있었다.