애니메이션의 이해

웹 애니메이션을 제작할 때 여러 가지 방법이 있다. CSS 애니메이션 교육에 앞서 실무에서 자주 사용하는 웹 애니메이션 종류에 대해 알아보고 장단점을 비교해보겠다.  GIF최대 256 색상을 지원하며 비 손실 압축 포맷으로 구현이 간편함압축률이 낮아 이미지 용량이 크고, 브라우저 성능(fps) 저하 발생 MP4손실 압축 포맷으로 용량이 적고 스트리밍 재생이 가능함알파 채널이 지원되지 않아 배경색을 포함한 콘텐츠를 제작해야 함 CSS & JS인터렉션 UI 애니메이션에 적합하고, 부드러운 애니메이션 제공복잡하고 현란한 애니메이션 제작 어려움 LOTTIESVG 벡터 기반으로 선명하고 현란한 애니메이션 제작이 가능After Effects 도구 사용으로 진입 장벽이 높음  애니메이션 장단점 비교      [ 출처..

• format_list_bulleted CSS/Default
• · 2024. 9. 27.
• textsms

JavaScript 'console' 객체 제어하기

필자는 웹 개발자다. 대부분 Chrome 브라우저를 사용하며, 동시에 개발자 도구를 띄워놓는다.종종 우리네의 실수가 아님에도, 혹은 데이터 확인 용도로 출력하는 console 내역들이 많을 수 있다.너무 보기 싫었다. 그래서 작성한다.   console 객체 자체가 전역으로 선언되어있기에, 해당 함수 또한 전역으로 사용할 수 있다.console 객체 내 신규로 넣어준 함수의 설명은 다음과 같다.console.off()document loading 완료 시, 기본적으로 실행된다.console 객체 내 함수들을 비어있는 함수 function() {} 로 선언해버려 작동을 방지한다.console.on()console 로그를 보고 싶을 때, 개별적으로 선언해줘야 한다.console 객체 내 함수들을 원복시켜 작..

• format_list_bulleted JavaScript/Default
• · 2024. 7. 15.
• textsms

JavaScript Array 관련 내장 함수

JavaScript Array 내장 함수JavaScript 내 array 형태의 변수를 컨트롤 할 수 있는 내장 함수들에 대해 살펴보겠다.값 확인값 추가 // push(Object obj)값 제거(가장 마지막에 할당된) // pop()값 제거(가장 처음에 할당된) // shift()값 제거(인덱스를 이용한) // splice(int param), splice(int param, int param)값 추가(인덱스를 이용한) // splice(int param, int param, Object obj ... ...)  Array 값 확인테스트 목적으로 Array 변수를 다음과 같이 선언하였다.test: () => { // 테스트 array 선언 let testAry = ["오이", "피클"]; debugg..

• format_list_bulleted JavaScript/Default
• · 2022. 6. 15.
• textsms