프론트 개발 블로그

1분코딩 - 애플 웹사이트 인터랙션 클론! 인강 정리 1월 11일 월요일 키워드 1. 즉시 실행 함수 IIFE 2. ES6 문법 : arrow function / let, const 키워드 / 템플릿 문자열 3. load, DOMContentLoaded 차이 4. position: sticky 코드 작업 내용 1. 각 섹션의정보를 sceneInfo 배열에 넣는다. const sceneInfo = [ { type: 'sticky', heightNum: 3, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-i') } } ]; type : 'sticky' or 'normal'로 각 섹션마다 나타나는 애니메이션들을 제어한다...

Frame By Frame 애니메이션 구현하기 1분 코딩님의 인터랙티브 웹 개발 제대로 시작하기 강의 참고 5100 X 300 사이즈의 스프라이트 이미지를 Frame By Frame 애니메이션으로 구현해야 되는 상황 TIP1. 가로, 세로 사이즈의 두배 사이즈의 이미지를 만든 다음에 CSS 상에서 절반으로 잘라서 사용하기 : 레티나 디스플레이와 같은 고해상도 디스플레이에서 px 직접도가 높은 고해상도로 표현됩니다. TIP2. animation-timing-function: steps() 속성을 사용하기 : 해당 속성을 지정해주지 않으면 -2550px 만큼 연속으로 흘러가는 애니메이션이 되는데, 해당 속성을 사용하면 steps 단계만큼 끊어지는 애니메이션을 구현할 수 있습니다. @keyframes spac..