You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🌐 웹 애니메이션 최적화 requestAnimationFrame 가이드
자바스크립트 웹 애니메이션 웹페이지의 애니메이션을 구현할때 CSS의 animatoin , transition , transform 속성을 통해 구현할 수도 있지만, 보다 사용자와의 복잡한 상호작용을 구현하게 하기 위해 Javascript와 함께 사용하여 스타일을 변화시키도 한다. 예를들어 특정 영역을 클릭하거나 웹페이지를 스크롤할때 변화무쌍한 애니메이션 작업들이 그러하다. 그래서 간단하고 규칙적인 애니메이션은 CSS로만 요소의 좌표값이나 스타일 크기를 변화시키고, 세밀한 조작이 필요한 애니메이션은 자바스크립트로 스타일 속성을 변경 시키는 편이다. 하지만 자바스크립트로 스타일 속성을 변화시키는 방법은 CSS보다 (특히 모바일에서) 성능이 좋지 않다. 따라서 어쩔수 없이 자바스크립트와의 상호 협력이 필요할 ..
🧏 SEO 사이트 최적화 속도 향상 방법 모음 정리
1. 폰트 로딩 최적화 @import 사용 피하기 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @import는 폰트를 불러오는데 브라우저 로딩을 잠시 멈춰 세운다. 폰트를 로딩하고 나서야 그다음 css을 로딩하기 때문이다. @font-face 사용 따라서, link혹은 @font-face를 통한 웹폰트 로딩을 사용하도록 하자. link태그의 href링크로 가보면 안에 @font-face로 코딩되어있는 페이지를 볼수있다. 즉 그게 그거이다. /* 웹폰트 로드 */ @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/project..
