TIL css 애니메이션 ,미디어쿼리

TIL 22.04.07

css
transform
transition
animation

1. transform 회전, 이동, 크기를 변화 시켜준다.
   :rotate(45deg) 입력한 값 만큼 각도를 회전한다.
   :scale(2,3) 입력한 값 만큼 비율을 변화 시켜준다. width 2배, height 3배 확대
   :skew(10deg, 20deg) x축 y축 기준으로 입력 값 만큼 각도를 회전(비틈)한다.
   :translate(100px, 200px) 좌표를 입력 값 만큼 변경한다.

2. transition 자연스럽게 변화하는 과정을 보여준다.
   -property: 속성 변화시키려는 속성 ex)width, color
   -duration: 0s 변화하는데 걸리는 시간 설정 ex) 2s 는 2초에 걸쳐 변화
   -delay 지정한 시간 이후에 변화를 시작한다. 1s는 1초후 시작
   -timing-function 효과의 속도 ex)linear은 일정하게 변화, 설정에 따라 다양한 리듬으로 변화시킨다https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
   cubic-bezier(.17,.67,.83,.67) 위의 효과 속도를 원하는 대로 조절한다.https://cubic-bezier.com/#.17,.67,.83,.67
   가상 선택자
   :hover 마우스를 올렸을 때 변화를 준다.

3. animation 위 transition의 :hover과 같은 조건 없이 바로 동작한다.
   -name 애니메이션의 이름으로 class, id처럼 생각해주면 된다.
   -duration, delay, timing-function 은 위의 transition과 같다고 보면 된다.
   -iteration-count: 6 애니메이션의 반복 횟수
   -direction: noraml 애니메이션의 시작에서 끝 으로 가는 과정
   : reverse 끝에서 시작으로 오는 과정
   : alternate: 시작에서 끝으로 가고 다시 시작으로 오는 과정
   

animation과 항상 같이 사용하는 @keyframes

@keyframes name {	animation에서 설정한 name 을 입력 class, id를 호출하는 것처럼 생각해주면 된다.
	from {width: 300px;}	  애니메이션의 시작
    to {width: 600px;}		  애니메이션의 끝
}

prefix(프리픽스) 하위 버전까지 고려 할 때 사용, 최신 버전만 신경 쓴다면 사용 안해된다.
-webkit- 크롬, 사파리
-moz- 파이어폭스
-ms- 익스플로러
-o- 오페라
css3에 새로 나온 속성들은 prefix를 달아줄 경우가 생긴다.(하위 버전에도 적용 해야 할 경우)
애니메이션에 prefix를 달아줬다면 @keyframes에도 달아줘야한다.

.div {
	anivation: rotation 1s linear 1s 6;
}
@-webkit-keyframes name {	
	from {-webkit- transform: rotate(0);}	
    to {-webkit- transform: rotate(30deg);}		
}

media 미디어쿼리 다양한 디바이스, 플렛폼에 대응하는 반응형 웹사이트를 만들기 위해 사용한다.
@media (min-width: 320px) and (max-width: 1000px) {}
320보다 크고 1000보다 작을경우 {} 안의 내용을 수행

media를 사용하기 위해서는 viewport를 반드시 넣어야한다.

meta name="viewport" content="width=device-width, initial-scale=1"

기기화면을 의미
뷰포트의 가로폭=디바이스의 가로폭
화면의 비율

추가 tip

1. margin: 0 auto; 을 하면 x축 중앙 정렬이 된다.

2. 특정 태그를 가리켰을 때 다른 태그에 영향을 주는 방법
   https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered

a img:hover { transform: scale(1.1); }

위 코드는 a태그 안의 img 태그를 hover 시 img가 transform 된다.

a:hover img{ transform: scale(1.1); }

위 코드는 a태그 hover 시 img가 transform 된다.