[노마드코더]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 { } }
사용하기
- 무한으로 반복되게 하려면 뒤에 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{}