Web Front End

[CSS] transition

transition이란? CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공하는 속성 속성의 변화가 일정 기간에 걸쳐 일어나도록 함 변화를 부드럽게 보여줄 수 있음 예제 transition:width 2s, height 2s, background-color 2s, transform 2s;transitionend - transition 완료 감지하기 addEventListener를 사용하여 이벤트 모니터링 가능 el.addEventListener("transitionend", updateTransition, true);Reference https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

[CSS] transform

transform이란? 좌표공간을 변형함 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿈 transform의 변형 평면에서의 변형 3D 공간에서의 회전, 확대, 이동, 기울이기 회전: rotate() 확대축소: scale() 이동: translate(), translateX(), translateY() 기울이기: skew() 예제 HTML Transformed elementCSS div { border: solid red; transform: translate(30px, 20px) rotate(20deg); width: 140px; height: 60px; }결과 Reference https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms..

[CSS] requestAnimationFrame

requestAnimationFrame이란? rAF DOM 기반 스타일 변경, 캔버스 또는 WebGL 등 애니메이션에 사용하기위한 기본 API Javascript 실행 최적화를 위해 setTimeout, setInterval을 피하고 requestAnimationFrame 사용 window.requestAnimationFrame(callback);Reference https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=ko https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ https://develo..

[CSS] VSync와 브라우저

VSync란? Vertical sync (수직 동기화) GPU, 비디오 게임 및 모니터를 위한 최초의 동기화 기술 게임의 프레임 속도와 게임 모니터의 재생 빈도를 동기화하는 그래픽 기술 ⇒ 게임 FPS는 모니터가 따라잡을 수 없는 속도로 정보를 전달했음 ⇒ 서로 다른 화면이 충돌해 화면이 어긋나게 보여짐(Screen Tearing) ⇒ VSync 도입으로 FPS에 제한을 두어 동기화되게 하고, 부드러운 게임 화면을 볼 수 있게 됨 해상도, 색상, 밝기를 향상시킬 수는 없음 Frame Timing이란? 프레임을 실행/랜더링하는 데 걸리는 시간 랜더링되는 여러 프레임 간 타이밍이 얼마나 일관성 있는지도 보여줌 서로 다른 Frame Rates 프레임 속도가 낮을수록 프레임을 렌더링하는 데 시간이 오래 걸림 프..

[Javascript] Event & EventListener

addEventListener("click", ()⇒{}) 이벤트 등록 표준방법 첫 번째 인자: 발생하는 이벤트 이름 두 번째 인자: 이벤트가 발생할 때 실행되는 함수 / 이벤트핸들러 / 이벤트리스너 event Type https://developer.mozilla.org/en-US/docs/Web/Events https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties

[Javascript] Web API - Window

Window DOM 문서를 포함하는 창 현재 스크립트가 작동 중인 창을 나타내는 전역 변수 주요 메소드 Window.alert() Window.open() Window.requestAnimationFrame() Window.requestIdleCallback() EventTarget.addEventListener() GlobalEventHandlers.onclick() GlobalEventHandlers.onfocus()Referrence https://developer.mozilla.org/ko/docs/Web/API/Window