오늘 배운 것 - CSS
1. Transform
요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다.
transform 변환함수
1) translate(x,y)
요소의 좌표를 움직일 수 있다.
x축으로 x만큼, y축으로 y만큼 이동시킨다. 양수/음수 입력이 가능하다.
x/y축 한방향으로만 움직이고 싶을때는?
- translateX(n) : 요소의 x축 좌표를 n만큼 움직일 수 있다.
- translateY(n) : 요소의 y축 좌표를 n만큼 움직일 수 있다.
2) scale
X축으로 x만큼, Y축으로 y만큼, 요소를 축소 혹은 확대한다.
x,y값이 같을 경우 한번만 입력해주어도 된다.
예시)
transform: scale(0.75, 1.1) -> x축은 0.75배 만큼 축소, y축은 1.1배 확장scale에도 한 방향으로만 적용 시킬 수 있다.
scaleX(n), scaleY(n)
3) skew(x-angle, y-angle)
요소를 각도만큼 기울인다.
x, y의 값은 deg(degree)이다.
transform: skew(15deg, 10deg)skewX(n), skewY(n) 가능
4) rotate(angle)
요소를 각도만큼 회전시킨다. 회전 방향은 시계방향으로 돌아간다. 단위는 deg이다.
transform: rotate(45deg)transform 변환 함수 중첩 적용
변환 함수도 중첩하여 사용할 수 있다.
사용 시 변환함수 사이에 공백이 필수이다.
예시)
요소를 75도 회전시키고 y축 방향으로 120 px 이동시키려면?
{ transform: rotate(75deg) translateY(120px); }요소를 x축 방향으로 30도, y축 방향으로 10도 기울이고 45도 회전시키려면?
{ transform: skew(30deg, 10deg) rotate(45deg); }📌 aspect-ratio
브라우저 사이즈에 상관없이 가로값과 세로값을 지정한 비율로 할 수 있다.
예시)
width: calc(25% - 7px);
aspect-ratio: 6 / 5;
-> 가로값은 지정한 값 상태에서, 6/5의 비율로 가로/세로크기를 지정해준다.2. Animation
animation이란?
여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법이다.
animation 적용 방법
1) transition 속성 활용
특정한 이벤트를 기점으로 작동한다. (hover 등)
2) animation 속성과 keyframes 활용
transition은 두가지 변화 사이를 부드럽게 이어주는 역할만 하지만, animation은 변화나 이벤트와 무관하게 애니메이션을 적용할 수 있으며 시작, 정지, 반복까지 제어할 수 있다.
@keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어해주어야 하기 때문에, transition보다 사용이 복잡하다.
=> 기본적으로 transition으로 만들고, transition으로는 만들 수 없는 애니메이션은 animation 속성을 이용하여 만든다.
@keyframes
CSS 애니메이션의 시작, 중간, 끝 등의 중간상태를 정의한다.
@keyframes 애니메이션name {
from { -> 시작 시점
left: 0;
}
to { -> 종료 시점
left: 200px;
}
}@keyframes 애니메이션name {
0% { -> 0% = from
left: 0;
}
50% {
left: 200px; -> 50%는 중간지점
}
100% { -> 100% = to
left: 200px;
}
}animation 속성들
-
animation-name
어떠한 keyframes를 요소에 적용할 것인지 지정한다. -
animation-duration
애니메이션을 한 번 재생하는데 걸리는 시간을 설정한다. -
animation-direction
애니메이션 재생 방향을 정의한다.(정방향/역방향) 기본값은 정방향 재생이다.
- reverse : 역방향 재생
- alternate : 정방향 재생. 반복시 정방향/역방향을 번갈아 재생한다.
- alternate-reverse : 역방향 재생. 반복시 역방향/정방향을 번갈아 재생한다. -
animation-iteration-count
애니메이션 재생 횟수를 정의한다. 기본값은 0
- infinite : 무한 재생 -
animation-timeing-function
애니메이션 재생 패턴을 정의한다.
-ease-in-out 등 -
animation-delay
애니메이션 시작을 얼마나 지연할 지 설정한다.
animation 단축 속성
📌 역시 순서에 유의해야 한다.
애니메이션name / duration / timing-function / delay / iteration-count / direction
{ animation: moveRight 0.4s linear 1s infinite alternate; }오늘의 회고
CSS의 transform과 animation 속성에 대해 배웠다.
transform을 사용하고, transition을 적용시켜 주는 방법이 은근히 헷갈려서 배운 것들을 복습해야겠다.
animation과 keyframes을 사용해서 아이콘을 움직이도록 하는 실습을 했는데, 속성을 적용시키면 눈으로 바로바로 보이니까 재미있었다. keyframes로 애니메이션을 정의하고 불러와야해서 transition 보다 더 복잡하다는데, 내 생각엔 코드는 늘어나지만 적용하기가 더 쉽고 알아보기 편한거 같다.
