Dev/HTML CSS3 [Lottie] 웹 퍼블리싱 아이콘, 이미지 애니메이션 / 로티(Lottie) 사용법, web 적용 Lottie란? Airbnb에서 제작한 애니메이션 구현 라이브러리이다. 활용 플로우는 다음과 같다. 애프터이펙트에 Bodymovin 플러그인을 설치 애프터이펙트로 애니메이션 작업 작업물을 .json 또는 .lottie 확장자로 추출 lottie 라이브러리 import 후 간단한 스크립트 추가로 애니메이션 로드(웹, 앱 모두 가능) 활용 전달받은(또는 제작한) 소스를 웹에 적용시키는 방법을 알아보자. 소스상에서 lottie 라이브러리를 import 하는 방법으로는 cdn 방식과 download 후 직접 import 방식이 있다. cdn : https://cdnjs.com/libraries/bodymovin download : https://github.com/airbnb/lottie-web/tree/mas.. 2021. 9. 8. [VScode] 확장프로그램 - Live Sass Compiler 설정 Live Sass Compiler 설치 후 SASS/SCSS 파일을 작성하고 저장하면 .map 이라고 된 원치 않는 파일이 생성되는 것을 발견할 수 있다. 이를 방지하면서 CSS 파일로 compile되는 방식이나 저장경로 변경 등을 위해 몇가지 설정을 잡아줘야 한다. 우선 VScode에서 설정 창을 연 후 live sass compile을 입력한다. 그 후에 Edit in settings.json 을 클릭해서 setting 에디터를 열어준다. 버튼이 여러개라 헷갈릴 수 있는데 어떤 것을 클릭하더라도 결국엔 하나의 settings.json을 열기 때문에 아무거나 클릭해도 상관없다. settings.json 파일을 열어서 원하는 값으로 설정을 해주면 끝이다. 단, live sass compiler와 관계없는.. 2021. 5. 9. [VScode] 추천 필수 퍼블리싱 확장프로그램 - HTML CSS Auto Rename Tag - Html에서 특정 태그를 변경할 경우 닫는 태그도 자동으로 변경됨 - 사용법 : 자동적용 CSS Peek - Element에 어떤 스타일이 적용되었는지 확인할 수 있음 - 사용법 : class에 커서를 두고 ctrl + 마우스 클릭 HTML CSS Support - CSS에 정의되어 있는 선택자(id, class)를 Html에 입력할 때 자동완성 - 사용법 : id나 class 값 입력 위치에 커서를 두고 ctrl + space Live Sass Compiler - SASS/SCSS 사용 시 css파일로 compile할때 양식이나 경로 등을 설정할 수 있음 - 사용법 : 최초 setting.json을 설정하고 VScode 하단에 있는 버튼을 클릭해서 실행시켜두면 SASS,.. 2021. 5. 8. 이전 1 다음 반응형
