탐구하는 취르미

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 홈페이지 구축할 때, 자주 사용하는 UI 중 하나다 현업에서 slide, slider, carousel, swiper로 불린다 슬라이더 중에 가장 유명한 Swiper 모듈을 설치해 보자 1. swiper 설치하기 npm i swiper package.json에 설치된 swiper 모듈 2. 기본적인 html 뼈대는 swiper 공식 홈페이지 문서에서 그대로..

Vite에서 모듈들 간단하게 설치해서 사용하기, gsap 편입니다. https://greensock.com/gsap/ GSAP Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, labels, callbacks, pauses, and even neste greensock.com GSAP는 화려한 애니메이션을 옵션만 숙지한다면, 보다 쉽게 애니메이션을 구현할 수 있는 좋은 모듈입..

프로젝트 생성 초기 폴더 구조 Vite로 프로젝트 생성 시, 초기 폴더 구조입니다 1. SASS를 설치하기 npm i sass -D package.json 파일에 sass가 설치되어 있는 것을 확인할 수 있다 SCSS로 스타일을 작성할 것이므로, 필요 없는 css파일 삭제하고 scss 파일 추가하기 style.css style.scss touch style.scss 3. 필요 없는 파일들 삭제하고 main.js에 추가한 style.scss를 가져오기(import) javascript.svg counter.js public/vite.svg 4. 스타일 초기화를 위해 reset.scss를 추가하면서, 일부 폴더 구조를 변경했다 스타일 파일은 한 곳에 묶어두는 것이 좋다 main.js에 style.scss 경..

간단하게 Vite로 프로젝트 생성하는 방법에 대해서 알아보겠습니다. https://vitejs-kr.github.io/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io 선행 작업으로 node.js가 설치되어 있어야 합니다. 터미널을 오픈하세요. 1. npm으로 Vite 설치하기 npm create vite@latest Project name: 진행하고자 하는 프로젝트 폴더명 입력하기 ✔️ 각각의 옵션은 프로젝트 성향에 맞게 선택하기 Select a framework: Vanilla Select a variant: JavaScript cd 생성한_프로젝트_폴더명 npm install npm run dev #서버 띄우기 잠시 서버 종료 ctrl + c #서버 종료..