본문 바로가기
> 콜로소/[고윤서] 인터랙티브 웹사이트 만들기

[2-5] 웹 명함 구축하기 (2) - svg 비율 깨기, 애니메이션

by 자몽주스 2024. 4. 29.
728x90
반응형

   preserveAspectRatio="none"
preserveAspectRatio="none"의 사용
svg는 기본적으로 비율이 지켜지도록 하는 설정이 돼있음.
- 비율을 깨기 위해 사용
- svg 자체에 속성을 주기
- 많은 속성이 있지만 none 이라는 속성 이용
- 적용해주면 svg 비율이 깨져서 쭉 늘어난 것 확인 가능.
preserveAspectRatio="none"
다른 logo들에게 적용시켜주기

animation-timing-function: ease-in-out;
시작할 땐 서서히 했다가 점점 빨라지고 끝부분에 가서는 서서히 속도가 줄어듦
- 속도와 관련된 그래프이기 때문에 cubic-bezier라는 속성을 이용해서 함수를 따로 설정해 줄 수 있음.

궁금한거 해결할 부분
const links = document.querySelectorAll(".link-tree li"); 질문
console.dir 출력
728x90
반응형