[노마드코더]Advanced CSS

# Transitions

 

- transition : 어떤 상태에서 다른 상태로의 변화를 보여주는 애니메이션

 

- 규칙 1 : transtion은 state가 없는 요소에 붙어야하며, 처음 생긴곳(root) 에 있어야한다.

 

state에 transition을 준다면 변화를 주는 것을 그만할 경우, 원래 상태로 바로 돌아간다.

 

- 규칙 2 :  transtion 에 변화를 준것들은 state에 들어있는것들이 기준이 되어 바뀌는것.

바뀌는 것들에 한정하여 transition 이 일어날 수 있다

 

transition: all 5s ease-in-out;

 

---

# Transitions part Two

 

- transition은 상태(hover, active, focus, focus-within)에 따라 바뀐 요소가 있을 때 사용한다.

 

- ease-in function : 브라우저에게 변화하는 방법을 알려주는 역할

• linear - 시작부터 끝까지 일정한 속도
• ease-in - 시작과 끝이 빠름
• ease-out - 시작과 끝이 느림
• ease-in-out - 시작이 빠르고 끝이 느림

- all : 변화 요소를 한번에 다룬다.

 

- transition을 특정한 요소에 다른 속도로 주고 싶으면 (,)를 통해 따로 따로 transition을 줄 수 있다.

 

-transition은 root에 들어가야 변화하고 돌아오는 과정을 거친다. 즉, state에 transition을 넣으면 변화를하지만 커서를 내리는 순간 변화는 과정없이 바로 원상태로 상태가 변한다.

-cubic-bezier(0, 0, 0, 0); 으로 직접 설정할수도 있다.

 

---

# Transformations 

 

- transformation은 한 요소를 transform(변형)시킬 수 있다.

- border-radius에 50%를 준다면 원이 된다.

- translate은 transformation을 적용 시키긴 하지만, 다른 형제(sibling)을 변화시키진 않는다.

•  transformation은 box element를 변형시키지 않는다.
•  margin, padding이 적용되지 않는다. 일종의 3D transformation이기 때문이다.
•  margin, padding을 위해서 translateX, translateY를 사용하지 않는다. 

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

- CSS 3D는 GPU로 돌아가므로, 3D 작업을 할 수 있다.

---

# Animations Part One

 

애니메이션 만들기

@keyframes 애니메이션 이름 { from{ } to { } }

사용하기

img { animation : 애니메이션 이름 재생시간 옵션 }

- 무한으로 반복되게 하려면 뒤에 infinite를 붙여준다.

 

---

# Animations part Two

 

- from to 말고, 1,2,3,4,5...10 혹은 0% 25% 50% 75% 100% 같이 여러 단계로 나뉘어 애니매이션을 만들 수 있다.

- 다른 property들도 애니매이션으로 만들 수 있다. 꼭 transform만 써야하는 건 아니지만, transform을 쓰는걸 권한다. 일부 property는 애니매이션이 잘 안되기 때문이다.

---

# Media Queries

 

- Media query는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다.(웹사이트를 보고 있는 사용자의 스크린 사이즈)

- @media screen and (max-width: 00px) {} 을 이용하여 몇 픽셀부터는 달라보이도록 만들 수 있다. 이를 통해 스크린의 사이즈를 알 수 있다.

- min 사이즈와 max사이즈를 조절하여 단계별로 만들면, 스크린 사이즈의 범위를 알 수 있다.

- 브라우저에서 inspect의 device toolbar를 이용하여 핸드폰 기종 별 사이즈로 브라우저를 볼 수 있다.

- media screen에 (orientation: landscape)를 이용하면, 세로모드인지 가로모드인지도 구별 할 수 있다.

 

---

Media Queries 주요기능

- min-device-width
- max-device-width
- orientation: landscape
- orientation: portrait
- aspect-ration - 레티나디스플레이 감지가능
- display-mode
- inverted-colors
- lightlevel
- prefers-contrast
- resolution
- monochrome

Media type

- @media screen{}
- @media print{}