학습한 내용

오늘은 정말 역대급 어려웠다. 애니메이션에 대한 내용이여서 처음엔 움직이는 결과들이 신기하고 재밌었지만 뒤로 갈 수록 응용하는 질과 양이 많아지니까 상당히 어려웠다고 느꼈다.
● transform 은 늘리거나 줄이거나 각도변경 위치변경 할때 사용하는데 속성은
rotate(45deg); = 음수는 왼쪽으로 양수는 오른쪽으로 회전 (2차원적인 회전)
scale(2,3); = x축을 2배 y축을 3배로 늘린다는 뜻
skew(10deg, 20deg); = x축으로 10, y축으로 20 회전 (3차원적인 회전)
translate(100px, 200px); = x축으로 100만큼 y축으로 200만큼 움직인다

● transition = 움직이는걸 보여주고 싶을 때 사용한다 속성은
-proterty: width; = width값을 움직이겠다
-duration: 2s; = 2초만에 움직이겠다
-timing-funtion; = 속도의 성격을 지정할 수 있다 (점점빨라지는 등)
-timing-funtion: linear; = 일정한 속도를 가겠다
-delay: 1s; = 마우스를 가져다 대고 1초후에 발동

transform이나 transition은 한줄로 정리할 수 있다

transform: scale(2,3) rotate(45deg);
transition: width 2s linear , height 2s linear;

animation 애니메이션도 위에 속성들을 그대로 사용하고 애니메이션에만 있는속성으로는
-iteration-count: 6; = 움직이는 횟수
: infinite; = 무한
-direction: normal; = 편도
-direction: alternate; = 왕복
● animation이 나오면 꼭 나와야 하는게 @keyframes 애니매이션 이름 {} 이다

이 처럼 0~100%으로 활용하기도 하고 from~to로 사용하기도 한다
0->25->50->75->100 순으로 움직이는데 속성에서 alternate인 왕복값을 사용했다면 100->75->50->25->0 순으로 다시 돌아온다.
여기 까진 신기하고 즐기면서 배웠다

학습 중 어려웠던 내용

실습을 들어가면서 정말 정말 어려웠다. 바다 이미지를 가져와 이미지에 마우스를 가져다 댔을 때 글자가 보이게 하는 액션이였는데
부모는 position: relative; 를 사용했고 자식은 position: absolute; 를 사용했는데 부모에게 높이 값을 부여하지 않은 상태에서 자식이 left,bottom 에 0값을 주다보니 absolrte 특징상 부모의 값을 기준으로 좌표 기준점이 달라지다 보니 이미지 아래에 있던 글자들이 부모의 값인 이미지 안으로 들어갔다.
이 상태에서 부모에게 overflow: hidden; 을 적용시키고 자식의 bottom 값을 -85 로 했을 시 hidden 속성값에 의해 글자가 사라지게 된다.
그 후 새로운 .부모:hover .자식 { bottom: 0; } 을 사용 하면 이미지에 마우스를 가져다 댔을 시 bottom이 0값인 이미지안에 글자가 보이게 설정이 가능하다. 결과물만 봤을 땐 간단해 보이지만 그 속엔 많은 속성들과 값들이 조화를 이루고 있고 그 속성과 값들을 직접 정의 해보려고 하니 상당한 어려움이 있었다

해결방법

일단 오늘 실습은 상당히 어려웠다. 그러기에 오전 한번 오후 한번이 아닌 오후에 2번은 더봐야 할 것이다. 오늘 배운 영역을 떠나 전에 들었던 강의 들의 내용을 먼저 완벽하게 숙달해야 지금 하는 부분에서 많이 헷갈려 하지 않을 것이다
애니메이션 영역을 배우다보니 전에 배웠던 내용들과 콜라보레이션이 되는 속성들이 많다 보니 미리 전에 내용들을 숙달 해야 할 것이다
실습 들어가선 정말 와.. 와.. 소리가 입밖으로 나왔다 그만큼 많이 헷갈리고 어려웠다 다음 내용들어가기 전에 오늘 까지 한 내용들은 꼭! 꼭! 숙달 될 만큼 학습을 해야겠다.

학습 후 소감

일단 눈으로 보는 재미가 있는 애니메이션 부분을 공부하다 보니 시간 가는줄 모르고 학습하였습니다. 쉽게쉽게 하시는 강사님을 보며 따라하다보니 쉬운줄만 알았던 내용이 스스로 해보려고하니 상당히 어려웠던 내용이였고 쉽게 사용할 수 있는 사이트들도 알려주시면서 강의를 해주시니 응용하기에도 너무 간편하고 좋았습니다
장마가 시작되는 날이어도 습도하나 없는 깔끔한 강의를 해주신 김인권 강사님과 집구석에 있다보니 살이 부는 상황에 0칼로리 치킨같은 대구AI스쿨 감사합니다

transform,transition,animation 속성들을 생각하는 것도 힘든데 position 특징까지 우려 해가며 사용하려니 정말 머리가 터질 거 같았다.