진스

출처 vue-awesome-swiper의 옵션에 대해 알아보자 negabaro.github.io 개요 이 포스트에서는 vue-awesone-swiper의 주요옵션에 대해 알아보자. 설치 방법은 아래 포스트를 참고 vue-awesome-swiper를 이용해 vue에서 swiper(Carousel)를 사용해보자 initialSlide(디폴트 0) 슬라이드의 시작 index번호 지정이 가능(디폴트는 0이다) direction(디폴트 horizontal) 슬라이드 방향을 정한다. 디폴트는 horizontal(수평)이다. 수직으로 변경할때 vertical을 지정해주면 된다. 수직시에는 height,max-height값을 지정해야한다. speed(디폴트 300) 슬라이드의 속도 밀리초로 지정 디폴트는 300이다. ..

출처 vue-awesome-swiper를 이용해 vue에서 swiper(Carousel)를 사용해보자 negabaro.github.io vue-awesome-swiper란? Swiper라는 인기 라이브러리를 vue에서 간단히 사용할 수 있게 만들어진 wrapper이다. Swiper를 이용하면 아래와 같은 컴퍼넌트를 구현할 수 있다. swiper설치 방법 패키지 설치 yarn add swiper vue-awesome-swiper ※주의 swiper의 버전은 최신(6)이 아닌 5.3.7에서 동작확인했다. 6에서는 여러가지 버그가 있다고함. Pagination is not working on Swiper6관련 이슈 로드 import Vue from "vue"; import { Swiper, SwiperSlid..

https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com

Accept ~ Change 4가지 기능 Accept Current Change -> 헤드 부분을 적용 (내가 고친거) Accept Incoming Change -> 변경된 부분을 적용(병합 대상이 된 브랜치의 내용으로 변경) (남이 고친거) Accept Both Change -> 둘다 적용(말그대로 헤드와 변경된 부분 둘다 남겨준다.) Compare Change -> 컨플릭트가 난 부분을 좀 더 보기쉽게 보여준다.

출처 [Vue.js] Vue 애니메이션(Animate) #2 - Javascript Hooks, Velocity 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 hasudoki.tistory.com 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity(이번 포스팅) GSAP 2021.04.11 - [개발일기/Vue.js] - [Vue.js] Vue 애니메이션(Animate) #1 - Transition [Vue.js] Vue 애니메이션(Animate) #1 - Transition 이..

출처 [Vue.js] Vue 애니메이션(Animate) #1 - Transition 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 hasudoki.tistory.com 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition(이번 포스팅) Page Transition Transition Group Javascript Hooks + Velocity GSAP Tra..

들어가기 개발프로젝트에 따라서 Node의 버전을 여러개 설치하고, 번갈아 가면서 사용해야 할 경우가 있다. 이럴때는 NVM(Node Version Manager)를 이용해서 한 개발환경에 어려개의 Node 버전을 설치해서, 원하는 Node 버전을 골라서 사용 할 수 있다. 일단 기존에 Node가 설치되어 있다면 Node를 제거하자. NVM 설치 아래 경로로 이동해서 Windows용 nvm설치 파일을 다운로드 한다. nvm-setup.zip 파일을 다운로드 한다. https://github.com/coreybutler/nvm-windows/releases 압축을 풀면 폴더 내부에 nvm-setup.exe 파일이 나온다. 해당 파일을 실행시키면 nvm이 설치가 된다. 윈도우 터미널에서 아래 명령어를 입력하면..

출처 [css] css 선택자(selector) 개념 정리 CSS(Cascading Style Sheets)는 HTML 요소(Element)의 스타일을 주는 역할을 하는데요, 그러려면 스타일을 적용하고자하는 HTML 요소를 특정할 필요가 있기 때문에 선택자(selector)에 대해 잘 알아둬야 합니다. velog.io CSS selector에 대해 CSS(Cascading Style Sheets)는 HTML 요소(Element)의 스타일을 주는 역할을 하는데요, 그러려면 스타일을 적용하고자하는 HTML 요소를 특정할 필요가 있기 때문에 선택자(selector)에 대해 잘 알아둬야 합니다. 먼저 css의 기본적인 규칙은 다음과 같은데요, 여기서 h1이라고 되어있는 부분이 바로 셀렉터 입니다. h1이라는 h..