거북이개발자

[카카오톡 클론코딩]CSS 고급 문법 본문

Web/HTML & CSS

[카카오톡 클론코딩]CSS 고급 문법

류정식 2021. 1. 5. 18:07

1. transition

transition : CSS를 통해 애니매이션의 기능을 제공하고, 시간, 원하는 속도 등을 정할 수 있다.

<style>
      a{
        color:wheat;
        background-color: tomato;
        text-decoration: none;
        padding: 3px 5px;
        border-radius: 5px;
        font-size: 55px;
        transition:background-color 10s ease-in-out;
      } 
      a:hover{
        color:tomato;
        background-color:wheat;
      }
      
    </style>
  </head>
  <body> 
    <a href="#">Go to home</a>
  </body>

코드를 보면  transition:background-color 10s ease-in-out; 이부분을 통해서 백그라운드컬러를 10초동안 ease-in-out가속도로 애니메이션을 만든다는것이다. 

속성으로 : background-color 뿐만아니라 border-radius, all(전부) 도 가능하다.

가속도로 : ease-in-out 뿐만아니라 linear, ease-in, ease-in-out, ease-out 등등이 사용가능하다.

 

2. transfrom

transform은 해당 태그를 회전시키거나 돌리거나 위치를 옮기는 등의 행위를 하게한다. 또한 이 트랜스폼은 사용후에도 다른 태그들과 겹치지않고 독립되어서 행동한다.

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

 transform: rotateY(100deg) 이런식으로 사용가능하고 ratate말고도 여러 기능들이 있다.

 

그렇지만 이렇게 transform만 사용해서는 결과값만 보여주기 때문에 우리가 흔히 말하는 애니메이션 효과를 보긴

힘들었다.

 

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

그래서!!  transition에 transform을 사용해주면 된다!

 

 

3. 알아서 동작하는 애니메이션 만들기

지금까지는 어떠한 행위를 해서 애니메이션이 동작하게 했다. 그렇지만  그냥 알아서 동작하는 애니메이션을 만들려면

아래의 코드를 참고하자

 @keyframes supercoinflip{
from {
          transform: rotateX(0);
        }
to{
          transform: rotateX(360deg);
        }
      }
 
 
img{
        border: 5px solid black;
        border-radius: 50%;
        animation:supercoinflip 5s ease-in-out;
      }

@keyframes으로 자신이 원하는 동작을 설정할 수 있다. from에는 시작상태를 to에는 도착상태를 표현한다.

또한

 @keyframes supercoinflip{
0% {
          transform: rotateY(0);
        }
50%{
          transform: rotateY(360deg) translateX(300px);
        }
100%{
          transform: rotateY(0);
        }
      }

이런식으로 원하는 단계별로 상태를 표시할 수 도있다.

 

3. media query

웹을 이용하다보면 스크린의 크기는 다다르고 사용하는 기기에따라 스크린의 크기는 다다르다.

이러한 스크린의 크기에 따른 상태를 조정 할 수 있다.

 @media screen and (max-width: 600px){
        div{
          background-color: tomato;
        }

 

 

바로 이런식으로 @media를 설정 해주는 것이다. 여기서 max-width: 600px 최대값이 600px라는 것이다.

 

뿐만아니라 핸드폰의 가로, 세로에 따른 결과값을 다르게 할 수 도있다.

orientation : landscape는  가로모드에서

orientation : portrait는 세로모드에서 작동한다.

 

저작자표시

'Web > HTML & CSS' 카테고리의 다른 글

[카카오톡 클론코딩]카카오톡 클론코딩 로그인창  (0) 2021.01.06
[카카오톡 클론코딩]카카오톡 클론코딩 목표  (0) 2021.01.06
[카카오톡 클론코딩]CSS 기초 문법(3)  (0) 2021.01.05
[카카오톡 클론코딩]CSS 기초 문법(2)  (0) 2021.01.05
[카카오톡 클론코딩]CSS 기초 문법(1)  (0) 2021.01.04
'Web/HTML & CSS' Related Articles more
Comments