5/27 개발일지

학습한 내용

transform rotate : 2차원적 회전효과 rotate 안에 값 양수는 오른쪽 음수는 왼쪽

scale : 선택한 영역의 크기를 비율로 키울때 사용 (width, height)
skew : 선택한 영역의 크기를 각도로 영향을 줄때 사용 (x,y)
선택한 영역의 object 위치를 변경할때 사용 (x,y)

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
다른 브라우저 설정시

transition : 움직임의 변화하는 과정 보고싶을때 사용

ransition-property: width;
transition-duration: 2s;
transition-timing-function: linear; ----> transition: width 2s linear 1s; (한줄로 정리)
transition-delay: 1s; (숫자는 duration, delay)

transition 안에 쉼표를사용하여 원하는 속성을 추가

animation

animation-name: changeWidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;

animation-iteration-count: infinite;
animation-direction: alternate;

}

@keyframes changeWidth {
from {
width: 300px;

}

to {
    width: 600px;
}

}

@keyframes : animation 과 연동시켜주는 무조건 써야하는 명령어
alternate : 왕복 운동 할때 주는 명령어
0%: to 100%: from

이번 animation 은 움직이므로 사진으로 찍기 난해 하여 하나만 캡처 하였습니다.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

animation 명령어와 @keyframes 연동시키는 점이 아직 잘 이해가 안됩니다. 말로는 표현할수있는데 아직 머리속에 정리가 안된 상태입니다.

해결방법

animation 과 @keyframes 의 연동 및 animation 에대해서는 반복 학습과 영상 반복 듣기로 해결하도록 하겠습니다.

학습 소감

새로운 항목을 배우고 코딩할때마다 신기하면서도 결과물이 제대로 나와주면 성취감 또한 있습니다. 아직 간단한 거지만 나중에 종합적으로 프로그래밍을 하여 결과물이 나오면 아주 행복할것 같습니다.