수업
과제 따라 쳐보기
과제로 나갈 내용을 강사님하고 함께 쳐보는 시간을 어제 오후부터 오늘 오전까지 가졌다.
SVG
SVG는 벡터그래픽이어서, 아무리 확대해도 깨지지 않는다. 다만 복잡한 이미지는 너무 사이즈가 커져서, 간단한 아이콘이나 로고 등에 이용하기에 효과적이다
png파일을 Svg로 바꿔서 각각의 요소에 효과를 주는 실습을 했다.
*이렇게 색을 바꿀 때는 background가 아니라 fill을 사용했다. translate값을 줘서, 요소들의 위치를 바꾸고, scale 값으로 크기도 변경해줬다.
Transition
transition: width 2s linear 1s;
=
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
크롬 개발자 도구에서 transition-timing-function은 편하게 조정 가능하다.
Perspective
perspective를 안주고 회전하면 그냥 단면처럼 보인다. 여백이 있는 것처럼만!
또 숫자가 작아질 수록 내 눈 앞에 있는 것처럼 보여 조금만 틀어도 굉장히 극적으로 보인다.
이 perspective를 이용해서 카드 뒤집기처럼 앞 뒤가 다르게 구현할 수 있다.
실습을 해보았는데, 도저히 뭔 소린지...
참고링크:
- https://3dtransforms.desandro.com/card-flip
- https://codepen.io/desandro/pen/bMqZmr
- https://codepen.io/bosworthco/pen/YWBLpR
생각
강사님들이 지금 알려주는 것은 도구 사용법이라고 했다. 이 도구를 사용해서 무엇을 만들지는 우리의 몫일텐데, 도구도 잘 못 쓰는 것 같아서 자신감이 떨어진다. 몰입을 한다고 하는데, 아니 하는건가 싶고, 블로그, 복습도 매일매일 해야할 것들이 너무 많은데 시간은 절대적으로 부족하고, 이해되지 않는 부분도 산더미다..! 어제 회고 시간에 고충토로 하면서 조금 해소되었던 불안이 다시 스멀스멀 올라오는 기분이다.
느낀점
과제를 함께 따라치는 시간은 끊임없이 집중하려고 노력해야 한다. 안 그러면 금방 놓치거나, 정신이 나가버린다. 오늘은 강사님이 복사해주는 코드가 아니라 전부 내가 쳐보면서 따라가려고 노력했다. 하지만 조금 어려운 내용이 나가면 집중력이 안드로메다로 가버린다...
고칠점
-
너무 불안해하지 말고, 조급해 한다. 조금씩 매일매일 천천히 이해할 수 있는 만큼씩 해나가야겠다..! 그러다 너무 힘들면, 강사님이나, 멘토님 등등 주위 사람들에게 도움을 청해야지! 처음이니까 어려운건 당연하다는 마인드로 하자.
-
시간관리가 필요할 것 같다. 할 일은 많은데 시간은 부족하니, 우선순위를 잡고 그 순서대로 하나씩 해야겠다.
계획
- 아침에 그날 계획 짜기(시간 분배)
- 조급해하지 말기(칭찬 일기 쓰기)
- 카드뒤집기 연습하기!
