전체 글 (92) 썸네일형 리스트형 [토막글] Fake REST API JSONPlaceholder - Free Fake REST API (typicode.com) [Vue3] script setup에 대한 고찰 vue3 script setup이 간편하다는 정보를 많이 접하게 되었다. | Vue.js (vuejs-korea.org) | Vue.js v3-docs.vuejs-korea.org (54) Vue 3 Script Setup Tutorial - This Changes Everything! - YouTube 대충 요약하자면 script setup을 사용하면 composition api를 활용해서 react hooks처럼 활용할 수 있게 만들어준다는 것이다. (아직 깊게 파고들지 않아서 정확하지 않을 수 있음) ref를 import해서 useState처럼 사용할 수 있다. 버튼을 누르면 count가 증가하는 프로그램을 만들어봤다. ref의 타입을 명시하지 않아도 되지만 기왕 타입스크립트 쓰는김에 ref(0);.. [vite] Vue3 + Typescript 프로젝트 생성 vue-cli만 사용해 오다가 vite가 그렇게 빠르대서 사용해보기로 했다. 우선 npm 버전과 vue 버전을 확인해 본다. npm -version 8.11.0 vue --version @vue/cli 5.0.1 프로젝트 생성 npm init vue@latest Need to install the following packages: create-vite-app Ok to proceed? (y) create-vite-app 설치가 필요하다고 하면 Ctrl + C를 눌러 create-vite-app을 설치한다. npm create vite@latest 커스터마이즈로 typescript + vue-router를 설치해준다. Select a variant: » Customize with create-vue 다음.. CSS transform CSS transform - 엘리먼트를 마음대로 변형하는 속성이다. 위치를 옮길 때 회전시킬때 크기 확대 축소 박스 비틀기 등 CSS transition 기초 참조 : https://www.youtube.com/watch?v=Zp-n49r9TCA 예를 들어 hover하면 색이 변하는 박스를 만든다면 기본 상태 element가 있고 css로 :hover 효과로 다른 색을 지정할 수 있다. 이때 두가지 선택지가 있다. 1. 직접적인 엘리먼트에 transition 넣기 -> hover할때 안할때 모두 자연스럽게 색이 변함 2. hover 이벤트에 transiton 넣기 -> 마우스를 올릴때만 자연스럽게 색이 변함, 뗄 때에는 바로 띡하고 색이 돌아옴 마우스를 올리고 1초뒤에 transition이 일어난다. 마찬가지로 1. transition과 원상복구가 자연스러우려면 직접적 요소에 delay를 주어야함 2. 원상복구는 그냥 냉정하게 처리되려면 이벤트에 delay주기.. CSS Transition animation-fill-mode animation-fill-mode는 none, forwards, backwards, both가 있습니다. none : 아무것도 지정되지 않은 상태입니다. forwards : 애니메이션이 키프레임의 100%에 도달했을 때 마지막 키프레임을 유지합니다. backwards : 애니메이션의 스타일을 애니메이션이 실제로 시작되기 전에 미리 적용합니다. both : forwards, backwards를 둘 다 적용합니다. CSS fadein fadeout Animation 속성을 이용하여, 사라지는 효과를 가지고자 한다. FadeIn: 서서히 생기는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } @keyframes fadein { /* 효과를 동작시간 동안 0 ~ 1까지 */ from { opacity: 0; } to { opacity: 1; } } @keyframes를 이용하여 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정 from을 시작으로 to로 변화하는 과정을 만들 수 있다. FadeOut: 서서히 사라지는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } .. CSS 화면 정중앙 정렬 width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; 정중앙 정렬시 height 값을 100% 설정하게 되면 스크롤이 생긴다. vh는 뷰포트를 기준으로 한 값이다. 예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 된다. 그와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 된다. 즉, 100vh로 설정했다는 것은 뷰포트 전체높이만큼의 값이라는 뜻. 덧붙여. margin: auto;는 가로정렬을 해준다. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
