[Nomad coder/코코아톡 클론코딩 4일차] Transition, Transform, Animation, Media query란 무엇인가?(#4.0 ~ #4.6)

클론코딩 4일차 (#4.0 ~ #4.6)

#4에서는 tansition, tansformation, animation, media query에 대한 내용을 배운다.

CSS에 이런 놀라운 기능들이 있다는 거에 적지 않게 놀랄 수 있었다.

Javascript의 기능들과 별 반 다를 것이 없었고, #4에서 배운 내용은 처음 보는 내용들이었다.

---

1. Transition

transition은 state(상태) -> state(상태) 변화를 애니메이션으로 만들어준다.

Transition

 

- 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(변형) 시킨다.

Transform

- CSS를 통해 3D까지 할 수 있다.

 

- transform은 box element를 변형시키지 않는다.

 

- margin, padding이 적용되지 않는다.

 

-transition과 조합하여 더 역동적인 애니메이션을 만들 수 있다.

 

 

3D이므로 다른 layer라고 생각하면 될 것 같다. 

---

3. Animation

transition과는 다르게 state 없이 페이지가 시작됨에 따라 애니메이션을 적용시킬 수 있다.

Animation

- 특정 상태가 아니라 페이지가 시작됨에 따라 적용할 수 있다.

 

- @keyframes로 나만의 변화를 만들 수 있다.

 

- @keyframes을 통해 부분별로 나눠서 애니메이션 적용이 가능하다.

 

 

 

 

애니메이션을 만들 자신은 없으니.. 마음에 드는 것을 찾아 써야겠다.

 

https://animista.net/

Animista - CSS Animations on Demand

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

---

4. Media query

media query는 CSS만을 이용해 사용자의 스크린 사이즈를 알 수 있다.

Media query

- 반응형 웹 디자인이 가능하다.

 

- 사용자의 스크린 사이즈에 따라 디자인 변경 가능하다.

 

- 모바일의 가로, 세로 모드에 따라 디자인 변경 가능하다.

 

 

---

5. 느낀 점

CSS에 이런 놀라운 기능이 있는지 전혀 몰랐다. 이런 놀라운 기능들을 빨리 사용해보고 싶고, 더 알아보고 싶다. 또한 이론으로는 배움에 한계가 있다는 것을 다시 한번 깨닫게 되었다. Media query를 사용하여 CSS만으로 반응형 웹을 만들 수 있고, transform과 transition을 조합하여 다양한 변화를 만드는 법을 배울 수 있었다.