반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

짧은코딩

ADVANCED CSS 본문

노마드 코더/코코아톡 클론코딩

ADVANCED CSS

5_hyun 2022. 6. 21. 02:38
반응형

Transition

Transition은 어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 방법이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a {
        color: white;
        background-color: tomato;
        text-decoration: none;
        padding: 3px 5px;
        border-radius: 5px;
        font-size: 55px;
        transition: all 1s ease-in-out;
      }
      a:hover {
        border-radius: 15px;
        color: tomato;
        background-color: wheat;
      }
    </style>
  </head>
  <body>
    <a href="#">Go home</a>
  </body>
</html>

transition는 state가 없는 곳에 써야한다. 그리고 여러 가지 속성을 넣을 수 있지만 그냥 a와 a:hover에서 다르게 설정한 color, background-color, border-radius만 서서히 움직일 수 있도록 해준다. 그리고 몇 초 동안 변할 것인지 시간을 써줄 수 있다.

 

transition: all 5s ease-in-out;

혹은 all로 쓰면 a와 a:hover과 다른 요소를 모두 변하게 해줄 수 있다.

 

-ease-in function

브라우저에게 애니메이션이 어떻게 변할지 말해주는 것이다.

 

https://matthewlein.com/tools/ceaser

 

Ceaser - CSS Easing Animation Tool - Matthew Lein

Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them

matthewlein.com

이 사이트에 가면 애니메이션의 종류 테스트가 가능하다.

 

cubic-bezier는 자신만의 커브를 만들 수 있다. 그래서 저 사이트에서 맘에 드는 것을 찾으면

transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);

이렇게 뒤에 붙여넣어주면 된다.

 

=> transition을 바꿀 때 여러 개이면 보통은 all로 써주고 바꿀 요소가 1개면 그냥 이름을 써주는 것이 더 명확하다. 각 요소의 시간을 다르게 설정하고 싶으면 여러 개로 써주면된다. 그리고 대부분 ease-in, ease-out, ease-in-out을 사용한다. 

 

Transformations

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        border: 10px solid black;
        border-radius: 50%;
        transform: rotateY(85deg);
      }
    </style>
  </head>
  <body>
    <img
      src="https://yt3.ggpht.com/ytc/AKedOLTUh5DI9RQkZcNRxzVqXMfyO2jB99F1k49ttgFbrA=s900-c-k-c0x00ffffff-no-rj"
    />
  </body>
</html>

border-radius: 50%을 하면 원이 된다. 그리고 transform은 원하는데로 회전 시킬 수 있다.

transform: totateY(85deg)의 결과이다.

 

transform: rotateY(85deg) rotateX(20deg) rotateZ(10deg);

이런식으로 x, y, z 축을 움직이면서 사용 가능하다.

 

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

 

transform - CSS: Cascading Style Sheets | MDN

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.

developer.mozilla.org

많은 속성들이 있으니 이 사이트를 참고하자.

 

transform 속성은 다른 형제(sibling)를 변화시키지 않는다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        border: 10px solid black;
        border-radius: 50%;
        transform: translateX(200px);
      }
    </style>
  </head>
  <body>
    <img
      src="https://yt3.ggpht.com/ytc/AKedOLTUh5DI9RQkZcNRxzVqXMfyO2jB99F1k49ttgFbrA=s900-c-k-c0x00ffffff-no-rj"
    />
    <span>hahahahhahahah</span>
  </body>
</html>

이렇게 span 태그의 위치는 변하지 않는다. 즉 transformation은 box element를 변형시키지 않는다. 일종의 3D transformation이라서 margin, padding이 적용되지 않는다. 왜냐하면 픽셀의 다른 부분에서 움직였기 때문이다. 

 

-Transition + Transformations

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        border: 10px solid black;
        border-radius: 50%;
        transition: transform 5s ease-in-out;
      }
      img:hover {
        transform: rotateZ(90deg);
      }
    </style>
  </head>
  <body>
    <img
      src="https://yt3.ggpht.com/ytc/AKedOLTUh5DI9RQkZcNRxzVqXMfyO2jB99F1k49ttgFbrA=s900-c-k-c0x00ffffff-no-rj"
    />
  </body>
</html>

이런식으로 합쳐서 사용이 가능하다. 이 코드는 사진이 90도로 돌아가도록 만든 것이다.

 

Animations

Animations은 마우스를 올리지 않아도 움직이는 것이다.

 

 @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;

img에 이렇게 @keyframes에서 from, to를 사용해 범위를 설정하고 animation을 img 속성에 넣으면 애니메이션을 활용할 수 있다. infinite를 쓰면 무제한으로 애니메이션이 움직인다.

 

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

translateX는 사진을 이동시켜준다. 그리고 0%, 50%, 100%로 나눠서 표현할 수 있다. 이 외에도 25, 75% 등 여러 숫자를 쓸 수 있다.

애니메이션을 작성할 때 대부분 transform을 추천한다. border-radius 같은 속성도 되긴한다. 하지만 몇몇 안되는 속성이 있긴 하다. 

 

50% {
          transform: rotateX(180deg) translateX(100px);
          opacity: 0;
        }

opacity를 사용하면 중간에 사라지게 할 수도 있다. opacity는 자주 사용한다.

 

https://animista.net/

 

Animista - CSS Animations on Demand

Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.

animista.net

이 사이트에 가면 애니메이션에 다양한 속성을 알 수 있다.

 

Media Queries

https://shortcoding.tistory.com/125?category=1007601 

 

CSS-반응형 웹

반응형 웹 1. 뷰포트(Viewport) 뷰포트는 사용자에게 보여지는 웹페이지 영역을 말한다. meta 태그에 뷰포트를 설정한다. -width=device-width: 너비를 기기의 스크린 너비로 설정한다. 즉 콘텐츠가 보여지

shortcoding.tistory.com

이전에 썼던 글을 참고하면 좋을 것이다.

팁

검사에서 왼쪽 위 두번째를 누르면 모바일 화면처럼 나오게 해준다. 그리고 위쪽 가운데 Dimensions를 누르면 핸드폰 종류도 선택 가능하다. 또 위쪽 오른쪽 버튼을 누르면 회전도 가능하다.

 

-가로, 세로 모드

@media screen and (min-width: 601px) and (orientation: landscape) {
      }

orientation: landscape를 사용하면 가로 모드일 때도 구해줄 수 있다.

세로 모드는 orientation: porttait를 사용하면 된다.

 

-min-device-width, max-device-width

이 2개는 핸드폰에서만 적용이 된다. 브라우저는 모른다.

반응형
저작자표시

'노마드 코더 > 코코아톡 클론코딩' 카테고리의 다른 글

Form의 속성  (1) 2022.06.28
클론 코딩 시작 and login 페이지  (0) 2022.06.24
GIT and GITHUB  (0) 2022.06.23
CSS  (0) 2022.06.12
HTML  (0) 2022.05.31
'노마드 코더/코코아톡 클론코딩' Related Articles more
Comments