음악, 삶, 개발

설치는 매우 간단하다. npm install -D sass 바로 사용하면 된다. Hello! Hello! Hello! Hello! 당연히 파일로 분리하고, import 할수있다. /* test.scss */ $len : 100; @for $i from 1 through $len { .test-#{$i} { color : yellow; font-size : $i + px; } } Hello! Hello! Hello! Hello!

jakearchibald.github.io/svgomg/ 위의 사이트에서 추출. 코드

animate.css 나 tailwind css 를 사용하다보니, 아예 나만의 CSS 라이브러리를 만들어보면 어떨까라는 생각을 해보게되었다. 먼저 css 파일을 아래와 같이 만들었다. /* test.css */ .test { color : yellow; background-color : green; } 이렇게 만든 css 파일을 다른 css 파일 또는 style 태그안에 @import 해주면 된다. Hello World! 이와 같은 방식으로 animate.css 도 만들어졌다.

말도 안된다 이건. C++ 하다가 css 도 이미 편하다고 생각했지만 이건.... 3줄에 끝났다. 왜 Vue 를 써야하는지..왜 CSS 프레임워크를 써야하는지 깨달았다.

tailwindcss.com 앞서 animate.css 를 통해 남이 만들어놓은 애니메이션 css 클래스를 가져다쓰는것을 보았었다. 이보다 훨씬 더 나아가, Taliwind css 는 모든것을 클래스명으로 정의할수있게 해주는 CSS 프레임워크이다. Hello World! 거의 2만개가 넘는 클래스를 가지고있다고한다. CSS 의 모든 속성을 클래스명으로 대체할수있다. Taliwind css 의 창시자는 "Separation of concerns (걱정의 분리)" 라는 프로그래밍의 best practice 는 HTML & CSS 의 세계에서는 통하지않는다고한다. 결국 CSS 코드를 작성하고있으면서도, 우리는 계속해서 HTML 의 구성을 걱정하고있다는것이다. 따라서 별도의 CSS ..

$ npm init vite-app $ cd $ npm install $ npm run dev Vite 는 Vue 에서 제공하는 개발환경이다. 기존에 Vue-Cli 를 사용하였는데, Vite 를 쓰면 컴파일시간이 훨씬 빨라진다. v3.vuejs.org/guide/installation.html#vite tailwindcss.com/docs/guides/vue-3-vite www.youtube.com/watch?v=W6V9Z-FUEG8&t=177s www.youtube.com/watch?v=uBBvuA3b6kU

animate.style Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style www.npmjs.com/package/animate.css?activeTab=versions npm i animate.css animate.css 는 다른 개발자가 만들어놓은 css 의 애니메이션 클래스 모음이다. ..

animejs.com/documentation/ anime.js Javascript animation engine animejs.com www.npmjs.com/package/animejs npm i animejs github.com/juliangarnier/anime anime.js 는 CSS 의 여러 속성을 JavaScript 안에서 쉽게 animation 하게 해주는 라이브러리다. 굉장히 직관적으로 사용하기 쉽다. button 2016년 중순에 출시한뒤, 2020년 10월에 마지막으로 업데이트되었다. 거의 5년을 유지보수하고있으니 믿고 사용해도 될듯하다.

popmotion.io Popmotion: The animator's JavaScript toolbox Quick start import { animate } from "popmotion" animate({ from: 0, to: 100, onUpdate: latest => console.log(latest) }) Animation animate animate performs a keyframes or spring animation. import { animate } from "popmotion" animate({ from: 0, to: 100, onUpd popmotion.io www.npmjs.com/package/popmotion npm install popmotion < 용도와..

tagilog.tistory.com/539 인기 JavaScript 애니메이션 라이브러리 11 선 쓸만한 자바스크립트 라이브러리를 찾고 있던 중에 git 허브의 스타 순으로 작성된 아래의 목록을 찾을 수 있었습니다. 이 시간에서는 웹개발시에 유용하게 사용할 수 있는 자바스트립트 애니메 tagilog.tistory.com github.com/thednp/kute.js/wiki/How-To-Use thednp.github.io/kute.js/svgMorph.html svg path 를 다양한 방식으로 변형하게해주는 라이브러리이다. 가장 중요한 svg morph 기능을 가장 잘 표현해준다. 2015년에 시작하여.. 2021년 9월에 마지막으로 업데이트도있다. < 예..