advanced CSS

1. transition
   어떤 상태에서 다른 상태로의 '변화'를 애니메이션으로 만드는 방법
   state 가 없는 요소(root)에 붙어야 하며, state 가 있는 요소에 적용된다.
   transition: 변화하는부분 지속시간 ease-in-out; ,로 추가 transition 쓸 수 있다.

        a {
          color: whitesmoke;
          background-color: tomato;
          padding: 3px 5px;
          border-radius: 5px;
          transition: font-size 1s ease-in-out, color 1s ease-in-out;
        }
        a:hover {
          font-size: 10px;
          color: tomato;
          background-color: whitesmoke;
        }

** https://matthewlein.com/tools/ceaser css 애니메이션 ease-in-out 등 설명 참조

2. transformation
   한 요소를 변형시킨다. 다른 box요소, 이미지에 영향을 끼치지 않음. 페이지의 픽셀의 다른 부분에서 변형이 일어나기 때문. transition과 조합 가능하여 더 역동적인 애니메이션 변형이 가능하다.
   transform: rotateY(85deg) translateX(60px) // 요소 이동;
   margin, padding이 적용되지 않는다. 일종의 3D transformation이기 때문.
   margin, padding을 위해서 translateX, translateY를 사용하지 x.

       img {
         border-radius: 5px;
         transition: transform 2s ease-in-out;
       }
       img:hover {
         transform: rotateY(90deg) scale(0.5);
         color: green;
       }

** transform mdn !g 검색

3. 원하는 만큼 애니메이션을 재생시키고 싶을 때(마우스가 포인트 안해도)
   규칙은 @keyframes 애니메이션명 {}
   -- 애니메이션이 끝나면 요소는 이전 상태로 돌아가버림. >> 마지막에 forward를 붙여주면 마지막 속성값을 애니메이션 끝나고도 유지한다.

@keyframes super {
 from {
   transform: rotateX(0);
 }
 to {
   transform: rotateX(360deg);
 }
 img {
   border-radius: 5px;
   transition: transform 2s ease-in-out;
   animation: super 5s ease-in-out infinite;
        }

4. 0% 25% 50% 75% 100% 같이 여러 단계로 나뉘어 애니메이션을 만들 수도 있다.
   단, transform 사용 권장. 일부 property는 애니메이션 적용이 잘 안되기 때문이다.

        @keyframes super {
          0% {
            transform: rotateY(0);
          }
          50% {
            transform: rotateY(25deg);
            border-radius: 50%;
          }
          100% {
            transform: rotateY(360deg);
            opacity: 0;
          }
        }
        img {
          border: 5px solid black;
          animation: super 5s ease-in-out infinite;
        }

5. media query
   css만을 이용해서 스크린의 사이즈를 알 수 있는 방법
   @media screen and (조건) and (조건).. 조건이 true이면 디자인을 적용한다.

@media screen and (min-width: 400px) and (max-width:600px)  {     // 화면크기가 400px보다 크고 600보다 작으면 적용.
  div {
    background-color: tomato;
  } 
}

• media screen에 (orientation: landscape 혹은 portrait)를 이용하면, 세로모드인지 가로모드인지도 구별 할 수 있다.
• 브라우저에서 inspect의 device toolbar를 이용하여 핸드폰 기종 별 사이즈로 브라우저를 볼 수 있다.
• -device-width는 오직 핸드폰에만 적용된다.
  Media type
• @media screen{}
• @media print{} -- 웹페이지를 프린트 할 때 적용