패스트캠퍼스 환급챌린지 15일차 미션 (2월 15일) : 프론트엔드개발 강의 후기

오늘의 목표

ch.08 22,23 변환

 

오늘은 변환을 보자

아유 왜 아직까지 감기가 안 나을까...

이제 다 나았나보다 싶었더니 또 오늘 목이 부어서 아프다..ㅎㅎ

 

아무튼 오늘은 변환 파트 듣자.

 

오늘은 주된 내용은 

transform

translate(2d 위치 이동)

transform:translate( x축 값 , y축 값  ); 형태로 x축과 y축 으로 움직이고,

개별적으로 transform:translateX(x축 값); 만 , transform:translateY(y축 값); 만 움직일 수도 있다.

 

transform: scale( x축 값 , y축 값  ); or transform: scale( 값 );

transform: rotate( x축 값 , y축 값  ); or transform: scale( 값 );

 

rotate 는 2d 이지만, rotateX , rotateY 각각은 3d 다!!!

 

*rotate 는 원근거리를 무조건 가지고 있어야해서 perspective 라는 함수를 반드시 추가해줘야 하고!

*perspective 는 무조건 트랜스폼 제일 앞 부분에 작성해야함!

⬇️⬇️⬇️하단 이미지 참고!!!⬇️⬇️⬇️

비포 >>> 에프터

 

skew - 각도 회전이니까 deg(각도 degree) 단위 사용

 

perspective 함수에서 원근 거리가 적용되는 대상은 '관찰대상 자체'이다.

 

사실 용어도 익숙치 않고, 오늘 처음 봤다.

근데 혼자 속으로 '아니 저 스큐는 활용을 언제 할까' 하고 있었는데...

바로 그 다음에 활용 예시를 보여주셨다.

게임에서도 화면을 조금 더 풍성하게 보이게 할 수 있구나..!!

 

근데 프론트엔드 하다보니까 변환함수 진짜 많다는 생각이 드네...

오유 포토샵이나 일러스트에서는 보기로 찾아보고 미리 시각적으로 확인할 수 있는데

여긴 기울기도 각도와 그 식을 입력해야 세팅이 된다니 신기하다

코딩은 누가 언제 처음 어떻게 만들게 된 걸까?

 

궁금한 것들이 풍성해진다.

디자인하다가 개발 시작해보니까 어느날은 재밌다가 어느날은 어렵다가 왔다갔다하는 개발공부ㅎㅎㅎ

 

오늘은 그래도 뭔가 재밌다. 고 느껴졌다.

 

어느정도 눈에 보이는 결과가 나를 움직이기도 하는구나.

나는 결과물이 좀 더 중요한 사람일 수도 있겠구나..ㅎㅎ 했다.

아무튼 오늘 강의 끝!

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]