목록전체 글 (483)
음악, 삶, 개발
^#[^@}]+} // id ^\.[^@}]+} // class Vscode 말고, Sublime Text 에서 해야함.
나만의 CSS 프레임워크를 만들어보자! : SCSS
tailWind css 를 사용하면서, 내가 직접 CSS 라이브러리를 짜보고싶다면 욕심이 생겼다. 이를 위해 필요한것이 SCSS 이다. SCSS 는 CSS 의 단점을 보완하기위해 나온 언어이다. SCSS 를 사용하면 CSS 안에서 for loop 를 하여, 여러 클래스를 순차적으로 생성해낼수있다. SCSS 는 pre-processor 이기때문에, 빌드하고나면 plain CSS 가 된다. 먼저 vite 환경 터미널에서 npm install -D sass 를 통해 설치를 한다. 이제 사용해보자. /* test.scss */ $len : 100; @for $i from 1 through $len { .text-size-#{$i} { color : yellow; font-size : $i + px; } } 위의..
Vite 에서 SCSS 사용하기
설치는 매우 간단하다. 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!
일러스트레이터에서 만든 SVG 사용하기
jakearchibald.github.io/svgomg/ 위의 사이트에서 추출. 코드
나만의 CSS 라이브러리 만들기 : @import
animate.css 나 tailwind css 를 사용하다보니, 아예 나만의 CSS 라이브러리를 만들어보면 어떨까라는 생각을 해보게되었다. 먼저 css 파일을 아래와 같이 만들었다. /* test.css */ .test { color : yellow; background-color : green; } 이렇게 만든 css 파일을 다른 css 파일 또는 style 태그안에 @import 해주면 된다. Hello World! 이와 같은 방식으로 animate.css 도 만들어졌다.
vue 와 tailwind 의 환상적인 경험...
말도 안된다 이건. C++ 하다가 css 도 이미 편하다고 생각했지만 이건.... 3줄에 끝났다. 왜 Vue 를 써야하는지..왜 CSS 프레임워크를 써야하는지 깨달았다.
Taliwind css : class명으로만 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.css : 남이 만들어놓은 css 애니메이션 클래스들
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 의 애니메이션 클래스 모음이다. ..
anime.js : CSS 애니메이션을 JS 에서
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년을 유지보수하고있으니 믿고 사용해도 될듯하다.