CSS(Media query, Animation

📌Media query

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

​

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

​

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

​

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

​

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

 

 

 

 

📌Animation

애니메이션 만들기

@keyframes 애니메이션 이름{

from{}

to{}

}

사용

img{ animation:재생시간}

​

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

​

@keyframes supersexycoinflip {

0%{

transform: rotateY(0);

}

25%{

transform:scale(2);

}

50%{

border-radius:0px;

border-color:tomato;

transform: rotateY(360deg) translateY(100px);

}

75%{

transform: scale(5);

}

100%{

transform: rotateY(0) translateY(0px);

}

}

animation: supersexycoinflip 5s ease-in-out infinite;

​

3개이상으로 만들 수 있음

 

 

📌Transition

 

Transition은 state가 없는 요소에 붙어야한다.

rule1) state에 transition을 준다면 변화를 준것 ex) hover이라면 마우스를 갖다 댄것)을 그만할 경우(마우스를 뗄 경우) 원래 상태로 돌아간다.

​

rule2) transition을 준다면 변화를 준 것들은 state에 들어있는 것들이 기준이 되어 바뀌는 것이다.

​

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

ㄴlinear : 변화 그래프가 직선

ㄴease-in : 시작과 끝이 빠름

ㄴease-out: 시작이 빠르고 끝이 느림

ㄴease-in-out : 시작이 빠르고 끝이 느림

ㄴall : 변화 요소를 한번에 다룹니다.

​

cubic-bezier(0, 0, 0, 0); 를 이용하여 자신만의 커브를 만들 수 있습니다.

a{
color: white;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: font-size 10s ease-in-out,color 5s ease-in-out;
}
a:hover{
font-size:
color:tomato;
background-color: wheat;
            }