고급 CSS ( Transition, Transformation, Animation, Media query)

Transition 

▶ CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것

state가 없는 요소이며, 처음 생겨난 곳 즉, 원래 element에 속해야 한다.

★ State에 따라 바뀌는 property를 갖고 있으면 사용한다. ★

방법 1. 지정된 한 요소만 바꾸고 싶을 경우.

      a {
        color: wheat;
        background-color: tomato;
        transition: background-color 10s ease-in-out, color 5s ease-in-out;
      }
      a:hover {
        color: tomato;
        background-color: wheat;
      }

방법 2. 모두 요소들을 다 포함하고 싶을 경우.

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

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

https://matthewlein.com/tools/ceaser

Ceaser - CSS Easing Animation Tool - Matthew Lein

이 사이트에 가보면,  cubic-bezier(0,0,0,0)으로 원하는 거 직접 설정 가능하다.

자주 사용되는 것!

ㄴlinear - 변화 그래프가 직선
ㄴease-in - 시작과 끝이 빠름
ㄴease-out - 시작과 끝이 느림
ㄴease-in-out - 시작이 빠르고 끝이 느림
all : 변화 요소를 한번에 다룬다.
ㄴ따로 다루고 싶으면 각각 써주면 됨 단, 반점(,) 사용할 것!

---

Transform

▶ 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공

단, 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 

기본 transform: rotateY , rotateX , rotateZ , scale, skew....etc....

<img src="img/butter.jpg" />

img {
border: 10px solid black;
border-radius: 50%;
transform: rotateY(85deg);
}

그중 중요한 한가지!

transform은 보이는 화면에만 영향, 다른 box element, 이미지, siblings 에 영향을 끼치지 않는다.

img {
        border: 10px solid black;
        border-radius: 50%;
        transform: translateX(300px);
      }

<img src="img/butter.jpg" />
<span>hahshsdjflsjlf</span>

---

Animation - Transitions + Transform

Transition → CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다.

Transform → 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다.

img {
     border: 10px solid black;
     border-radius: 50%;
     transition: transform 5s ease-in-out;
     }
 img:hover {
    transform: rotateZ(90deg);
    }

그 외, transform 다양한 곳 

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform ▼

transform - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/transform-function

transform-function ▼

- CSS: Cascading Style Sheets | MDN

 

Animation 만들기

Animation ▶ 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.

● @keyframes rule은 시간의 흐름에 따라 애니메이션을 정의한다. 여러 개의 키프레임을 정의하거나 애니메이션 중에 특정 CSS 프로퍼티에 값을 지정하는 지점을 정의할 수 있다.

● @keyframes 뒤에 애니메이션을 대표하는 임의의 이름를 부여할 수 있음.

방법 1. from, to 키워드를 사용하여 애니메이션의 시작과 끝 시점을 정의

      /* @keyframes 다음 애니메이션 이름을 짓고 어디부터 어디까지 조합가능 */
      @keyframes superSexyCoinFlip {
        from {
          transform: rotateY(0);
        }
        to {
          transform: rotateY(360deg);
        }
      }
      img {
        border: 10px solid black;
        border-radius: 50%;
        animation: superSexyCoinFlip 5s ease-in-out infinite;
      }

infinite 은 무한반복 기능.

 

방법 2. 시작과 끝 키프레임 사이에 % 단위로 키프레임을 삽입할 수 있다.

ex. 1,2,3,4,5...10 혹은 0% 25% 50% 75% 100%

      @keyframes superSexyCoinFlip {
        0% {
          transform: rotateY(0);
        }
        50% {
          transform: rotateY(360deg) translateY(-100px);
        }
        100% {
          transform: rotateY(0) translateY(0px);
        }
      }
      img {
        border: 10px solid black;
        border-radius: 50%;
        width: 200px;
        animation: superSexyCoinFlip 5s ease-in-out infinite;
      }

※ 다른 property들도 애니매이션으로 만들 수 있다. 꼭 transform만 써야하는 건 아니지만, transform을 쓰는걸 권한다. 일부 property는 애니매이션이 잘 안되기 때문이다.

 

그 외. 다양한 animation 구경하기

https://animista.net/

Animista - CSS Animations on Demand

---

 

Media Query (반응형 디자인) 

▶ @media을 사용하여 미디어 별로 style을 지정하는 것을 Media Query라 한다. 디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있다.

▶ viewport 너비(width 프로퍼티)를 기준으로 한다.

@media screen and (min-width: 601px) and (max-width: 1200px) and (orientation: potrait) {
        div {
          background-color: wheat;
        }
      }

※ @media query 기능

min-width: - 최소 너비

max-width: - 최대 너비

orientation: landscape - 가로모드

orientation: potrait - 세로모드

※ @media of type 

@media screen / @media print

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

mdn https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN