[TIL] CSS - Transform

kcm dev blog·2021년 9월 19일
0

TIL

목록 보기
17/19

지난번에 배웠던 내용이 CSS로 레이아웃 잡는 법이라면 오늘은 CSS로 애니메이션을 만드는 방법에 대해 주로 배웠다. 그동안 레이아웃을 잡고, 컴포넌트 별로 꾸미는 방식은 배웠지만 애니메이션의 경우 필요에 따라 코드를 찾는 방식으로 학습했던 터라 사실상 아예 개념이 잡히지 않은 상태라 봐도 무방 했다.

Transform은 애니메이션을 활용하기 위해 사용하는 속성이고, 이와 관련된 속성들이 많이 있다. 원근법을 주기 위해 사용되는 perspective, 요소의 뒷면을 설정하는 backface-visibility, 요소에 색상과 관련된 다양한 속성들을 설정하는 filter 등이 있다.

사실 아직 배우기만 했고, 프로젝트에 실제로 써보고, 반복적으로 작성하는 연습은 되어 있지 않아 시간이 좀더 필요하다. 이번 명절에 CSS만을 활용하여 홈페이지를 클론하는 과제가 주어질 예정이다. 이 기회를 활용하여 다양한 CSS 기법을 익히고, 적응해 나가야 겠다.

profile
오늘 배운건 오늘 소화하자!

0개의 댓글