[UI/UX]coding 기초 - CSS- animation, object_fit, root_selector

📌animation

---

브라우저가 로딩되는 순간 애니메이션의 하위속성과 @keyframes모듈을 이용하여 움직임을 만든다.

속성

-animation
: 하위속성들을 공백으로 구분하여 한꺼번에 선언할때 사용한다.

-animation-delay
: 애니메이션의 지연시간을 지정한다. 단위는 s를 사용

-animation-direction
: 애니메이션의 진행 방향을 설정한다.
↓ ↓ ↓
[-animation-direction 속성]

1. alternate
   : 애니메이션의 시작지점에서 끝나는 지점으로 이동했다가
   끝나는 지점에서 다시 시작지점으로 이동한다.(from->to->from)
2. normal
   : 기본값이며 시작지점에서 끝나는 지점을 이동하는 것을 반복한다.
3. reverse
   : 역방향으로 움직인다.
4. alternate-reverse
   : 역방향으로 움직였다가 정방향으로 움직인다.

- animation-iteration(반복)-count
: 애니메이션의 반복 횟수를 지정한다.
단위없이 숫자만 쓰거나 infinite(무한반복) 값을 쓸 수 있다.

- animation-name🌞
: 필수 속성으로 애니메이션의 이름이 없으면 애니메이션이 동작하지 않는다.

- animation-play-state(진행상황)
: 값 running이나 paused(멈춤)를 사용하여 애니메이션의 재생상태를 지정한다.

- animation-timing-function
: transition-timing-function과 동일한 값을 사용하여 속도 조절
(ease, ease-in, ease-out, linear, ease-in-out)

- animation-fill-mode
: backward는 기본값으로 애니메이션이 끝나면 원래의 초기 위치로 돌아온다.
forward는 애니메이션의 종료시점의 모습을 유지한다.

📌@keyframe 모듈

---

-애니메이션으로 태그에 움직임을 설정하고 @keyframes 모듈로 실제로 움직이는 동작을 실행한다.

-@keyframes 모듈은 지정된 시간안에 어떤 동작을 만들것인지를 지정한다.

-@keyframes 안에서 시간에 의해 변화되는 부분을 "선택자"로 구분한다.
선택자는 0% 또는 from이라고 쓰면 애니메이션의 시작지점(0초 지점)을 말하고
100% 또는 to라고 쓰면 애니메이션이 끝나는 지점을 말한다.

ex)
10초짜리 애니메이션에서 2초지점은 20%
중간지점은 50%
시작지점은 from
끝나는 지점은 to

[기본형]

❗ keyframes가 애니메이션보다 위에 있으면 작동안함❗

선택자{
animation : 속성1 속성2...;
}  
                  
@keyframes 애니메이션 이름{
from 또는 0% {스타일 속성: 값; }
50% { 스타일 속성 : 값; }
to 또는 100% {스타일 속성: 값; }
}

📌will-change

---

-will-change 속성은 브라우저에게 요소의 예상 변경 사항을 알려주는 속성

-이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할때 필요한 리소스를
사전에 최적화 하여 요소의 스타일 변경과 렌더링을 더 빠르고 최적화된 방식으로 처리한다.

-will-change의 속성값으로는 애니메이션(키프레임)과 transition 또는 transform으로 변화시킬 속성의 속성명을 사용한다.

[속성값]

  - auto : 변경 예정인 속성에 대한 최적화
  
  - scroll-position : 스크롤 위치에 대한 최적화
  
  - contents : 요소 내용의 변경에 대한 최적화
  
  - 🌞opacity : 투명도 변경에 대한 최적화
  
  - 🌞transform : 변형속성에 대한 최적화
  
  - 🌞perspective : 원근감 변경에 대한 최적화
  
  - left/top/right/bottom : 좌표값 변경에 대한 최적화
  
  - color/ background-color : 색상 변경에 대한 최적화
  
  - all : 모든 변경에 대한 최적화

📌object-fit

---

이미지나 비디오 같은 시각 요소는 반응형으로 크기가 바뀌면 원래 이미지나 비디오의 가로 세로 비율을 그대로 유지하기 어렵다. object-fit을 사용하면 컨텐츠(이미지나 비디오)의 가로 세로 비율을 유지하면서 해상도에 맞게 크기를 조절할 수 있다.

[속성값]

- fill : 기본값으로 컨텐츠의 원래 비율을 무시하고 요소의 전체 영역을 채운다.

 - contain : 비율을 유지하면서 요소의 전체 영역에 맞출 수 있을 만큼 확대한다.
             영역을 모두 채우지 못할 수 있다.
             
 - cover : 비율을 유지하면서 요소의 전체 영역에 맞출 수 있을 만큼 확대한다.
           영역을 채울때 컨텐츠의 일부를 자를수도 있다.
           
 - none : 컨텐츠의 원래 크기를 유지한다.
 
 - scale-down : none과 contain중 크기가 더 작아지는 값으로 설정한다.

:root선택자

---

:root선택자는 문서의 최상위 요소 즉, html태그를 말하는 것이다.
:root는 웹문서에서 사용할 스타일들을 전체적으로 선언하는 공간으로, 일종의 '스타일 가이드'로 사용한다. :root안에 사용할 변수로 선언하면 일관적인 디자인을 쉽게 유지할 수 있다.
단, 변수 이름을 지을때에는 소문자로만 지어야한다.

📌css변수

---

변수란 필요할때마다 값을 저장해놓고 사용하는 데이터 그릇을 말한다.
css에서 사용하는 변수는 일관적인 디자인을 유지하기 위해 미리 웹 문서에서 사용할 스타일에 이름을 붙여서 저장하는 역할을 한다.

[기본형]

:root{
 --변수이름 : 값;
 }

📌var(--변수이름)

변수에 저장했던 값을 표시하는 함수이다.

[기본형]

선택자{
color : var(--변수이름);
}