애니메이션 속성이 필요할까? 블로그에 업로드하진 않았지만 transition 속성과 transform 속성을 결합하면 꽤나 그럴듯한 애니메이션 효과를 줄 수 있었다. 하지만 두조합으로도 한계점은 확실하게 있다. 여러 이유가 있겠다만 저 두 조합으로는 처음과 끝지점의 원상태와 움직인후의 상태까지만 조정이 가능하다. 중간지점에서의 효과나 모션그래픽등에서 종종 볼 수 있는 키프레임단위의 효과들은 어떻게 적용시켜야 할까? 시작과 끝 반복 횟수나 설정은? 이를 보완할 수 있는 속성이 애니메이션 속성이다. 기본 문법 keyframes 정의 애니메이션 속성을 사용하기 위해선 먼저 keyframes를 정의해줘야 한다. @keyframes move__box { from { } to{ } } 기본적인 구조는 이러하다. m..

시작하기 앞서 개발자는 다들 기술블로그라는 것을 가지고 있는 듯하다. 자신이 어느 기술스택을 가지고 있는지에 대한 기술스택에 대한 자기 증명, 취업을 위한 스펙, 잊히는 기초지식을 방지하기 위한 사전식기록 기타 등등 각자의 이유는 다르겠지만 개발자라고 부르기에도 아직은 민망한 비전공자인 필자는 이 블로그를 통해 하루하루 인강 등을 배운 지식을 복기하며 본인의 지식으로 만들기 위한 장으로써 이 블로그를 활용하고자 한다. transform 이란? CSS의 속성중 하나로써 대입되는 대상의 이동, 회전, 확대축소 ,비틀기 등의 변형 효과를 줄 수 있다. 일반적으로 알고 있는 사전적인 의미와 뜻은 같다고 할 수 있다. 기본 문법 transform: 변경요소(변경수치); 변경 요소중에 대표적인 4가지 이동 tran..