푸으름

✏️ 변형 함수translate() 함수: 요소 이동하기transform: translate(tx,ty)지정한 크기만큼 x축과 y축으로 이동transform: translate(tx,ty,tz)지정한 크기만큼 x축과 y축, z축으로 이동transform: translateX(tx)지정한 크기만큼 x축으로 이동transform: translateY(ty)지정한 크기만큼 y축으로 이동transform: translateZ(tz)지정한 크기만큼 z츅으로 이동scale() 함수: 요소 확대 및 축소하기transform: scale(sx,xy)지정한 크기만큼 x축, y축으로 확대 및 축소transform: scale3d(sx,xy,sz)지정한 크기만큼 x축, y축, z축으로 확대 및 축소transform: sca..

✏️ animation 속성자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있음 / 특정 지점에서 스타일을 바꾸면서 애니메이션을 만들고, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 함,  키프레임은 @keyframe 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 특성을 지정종류설명@keyframes애니메이션이 바뀌는 지점을 지정animation-delay애니메이션의 시작 시간을 지정animation-direction애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정animation-duration애니메이션의 실행 시간을 지정animation-iteration-count애니메이션의 반복 횟수를 지정animation-na..

✏️ 트랜지션(transition)웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성을 바꾸는 것예를 들면 파란색 사각형 위에 마우스를 가져다대면 빨간색 사각형으로 바뀌는 것 등을 생각해 볼 수 있음이런 식으로 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 의미 ✏️ 트랜지션과 속성종류설명transition-property         트랜지션의 대상을 설정transition-duration트랜지션의 실행 시간을 설정transition-timing-function트랜지션의 실행 형태를 지정transition-delay트랜지션의 지연 시간을 지정transition위의 속성들을 한꺼번에 지정 #1 트랜지션의 대상을 지정하는 transition-property 속성..

✏️ transform과 변형 함수CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성 해야 함 기본형  => transform: 함수 ✏️ 2차원 변형 함수종류설명translate(tx,ty)지정한 크기만큼 x축, y축으로 이동translateX(tx)지정한 크기만큼 x축으로 이동translateY(ty)지정한 크기만큼 y축으로 이동scale(sx,sy)지정한 크기만큼 x축, y축으로 확대.축소scaleX(sx)지정한 크기만큼 x축으로 확대.축소scaleY(sy)지정한 크기만큼 y축으로 확대.축소rotate(각도)지정한 각도만큼 회전skew(ax,ay)지정한 크기만큼 x축, y축으로 왜곡skewX(ax)지정한 크기만큼 x축으로 왜곡skewY(ay)지정한 크기만큼 y축으로 왜..