CSS_변수로 색상 관리하기, 애니메이션 효과 넣기, 미디어 쿼리

 

색상 / 애니메이션

 

 

색상을 변수로 지정해서 관리

 

:root {

--main-color: rgb(98, 220, 147);\

--sub-color: rgb(100, 55, 26);

}

 

css파일에 이렇게 변수를 지정 후 사용하고자 하는 요소에 넣어주면 된다.

넣을 때는 var뒤에 변수명을 쓰면 된다.

 

div {

width: 100px;

height: 100px;

background-color: var(--main-color);

}

 

이렇게 하면 나중에 가져다 쓰기 편하다.

 

 

 

 

애니메이션 주기

 

transition

 

div에 마우스를 hover했을 때 로고가 커지게 하기

div:hover img {

width: 200px;

}

 

 

img {

width: 100px;

transition: all 1s ease-in-out;

}

 

div에 hover를 주면 그 아래에 있는 img의 width가 200px로 변한다는 거다

아래는

img에 transition을 주는데

모든 부분에서 1초 동안 ease-in-out으로 변한다는 거다

ease-in-out 은 cubic-bezier을 통해 바꿀 수 있다.

https://cubic-bezier.com/

 

만약 all 부분을 width로 바꾼다면

width가 변하는 것만 transition이 적용되고

그 외 다른 부분은 적용이 안된다.

 

 

transform

 

div:hover img {

width: 200px;

transform: rotateY(360deg);

}

위와 같은 조건에서 transform을 추가했고, Y축으로 회전을 360도 시키겠다는 거다.

 

 

 

 

이번에는 애니메이션을 이벤트 없이 혼자서도 움직이게 하는 거다

 

@keyframes moving-logo {

0% {

transform: scale(0.1);

}

25% {

transform: rotateZ(45deg) scale(1);

}

50% {

transform: translateY(-50px);

}

75% {

}

100% {

transform: rotateX(360deg);

transform: scale(3);

}

}

 

img {

width: 100px;

animation: moving-logo 3s infinite alternate;

}

 

위에서부터 보면@keyframes 뒤에 원하는 이름을 준다

0%~100% 까지 원하는 만큼 나눠주고 수치를 줄 수 있다

만든 keyframes 을 적용하고 싶은 곳에 animation 을 이용해 넣어준다

3s는 3초 동안 애니메이션이 진행될 것이고 infinite는 1회성이 아닌

무한대로 움직이겠다는 것이다. 뒤에 alternate는 역으로 다시 반복해 주는 거다

 

 

 

 

 

미디어 쿼리

 

하는 이유는 모바일 환경에서의 사용성을 위해서다

 

@media screen and (max-width: 300px) {

div {

opacity: 0;

}

}

화면이 300px보다 작아지면 div의 투명도를 0으로 만들라는 것이다.

이걸 이용하면 상대적으로 화면이 작은 모바일 환경에서도

원하는 모습으로 사용자에게 보일 수 있을 거 같다.