[CSS] 심화 개념 정리

1. transition

 

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

1) transtion은 state가 없는 요소에 붙어야한다. 

state에 transition을 준다면 변화를 준것(예- hover라면 마우스를 갖다 댄것)을 그만할경우(마우스를 뗄경우)

원래상태로 바로 돌아간다.

2) transition 은 상태에 따라 바뀌는 요소가 있을때 사용함

상태 ex) hover, active, focus ...

 

transition: background-color 10s ease-in-out;

해석: 배경색을 10초동안 바꾼다.

 

transition: all;

state에 적은 모든 것들을 선택한 것

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

 

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

ㄴlinear - 변화 그래프가 직선

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

ㄴease-out - 시작과 끝이 느림

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

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

ㄴ따로 다루고 싶으면 각각 써주면 된다.

 

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

transition을 추가로 더 쓰고 싶으면 , 를 이용하면 됨

 

2. transformation

 

한 요소를 말 그대로 변형시킬수 있다.

transformation은 box element를 변형시키지 않는다.  즉, 옆에 sibling들에게 영향을 끼치지 않는다.

margin, padding이 적용되지 않는다. 

margin이나 padding을 주기위해서 tarnslateX, trnasLateY 를 사용하는것이 아니다

다른 요소의 box를 변형시키지 않고 원하는 요소를 이동시키기 위해서 사용하는 것이다.

a {
        color: white;
        background-color: tomato;
        text-decoration: none;
        padding: 3px 5px;
        border-radius: 5px;
        font-size: 55px;
        transition: transform 5s ease-in-out;
      }
      a:hover {
        transform: rotateX(90deg);
        }

transform: rotateX(Y)(n deg) => X(Y)축으로 n 도 회전

 

애니메이션 만들기

@keyframes 애니메이션 이름 {

from{ 

     transform : rotateY(0);

}

to { 

     transform : rotateY(60deg) ;

}

}

 

img {

animation : 애니메이션 이름 재생시간 옵션(ease-in-out)

}

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

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

 

3. media Queries

screen and (min-width(최소): n px) and (max-width(최대):n px) and (orientation : landscape(가로)혹은portrait(세로)) => 스크린 사이즈에 따라서 property 조정 가능함. orientation으로 가로 세로 감지 가능

 

 

@media screen and (max-width: 400px){ // 스크린 넓이가 400px 보다 작으면

background-color: tomato

}

 

(orientation : portrait) - 세로모드

ㄴlandscape - 가로모드

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