분류 전체보기35 스크롤시 헤더 색상변경 및 백그라운드 덮기 1. 스크롤시 상단 이미지 덮으면서 이동2. 상단 이미지안에 타이틀은 스크롤시 점점 오파시티3. 스크롤시 콘텐츠가헤더의 밑부분에 이면 클래스 on 붙이기 https://brunch.co.kr/@this-summer/92참고 사이트 See the Pen scroll 할때 header 배경색상 변경 상단이미지 덮기 by uni (@agosto) on CodePen. 2024. 7. 1. vue3+swiper npm install swiper npm install swiper/vueSwiper와 Vue용 Swiper 패키지 설치 스타일 임포트 해주기import 'swiper/swiper-bundle.css'12345678910111213141516171819202122232425src/main.js 에 import 'swiper/swiper-bundle.css'--> template> div> swiper :modules="[Navigation, Pagination]" navigation pagination> swiper-slide> img src="https://via.placeholder.com/600x300?text=Slide+1" alt="slide1" /> /sw.. 2024. 6. 29. vue3 페이지 이동 할때마다 함수를 각각 지정하지않고 링크가 여러개일 경우로 만들기1234567891011121314151617template> div> button @click="navigateTo('/about')">Go to About/button> button @click="navigateTo('/contact')">Go to Contact/button> button @click="navigateTo('/services')">Go to Services/button> /div>/template> script setup>import { useRouter } from 'vue-router' const router = useRouter() const navigateTo = (path) => { rout.. 2024. 6. 29. vue3 한개의 스크립트로 여러페이지에서 사용하기 ``은 Vue 3.2부터 도입된 문법으로, 컴포넌트의 setup 함수를 더 간결하게 작성할 수 있습니다. 아래는 `useAlert` Composition 함수를 `` 상단에 사용하는 방법입니다. ### 1. `useAlert` Composition 함수 정의 먼저, `useAlert` Composition 함수를 정의합니다.123456789101112131415161718import { ref } from 'vue' export function useAlert() { const showAlert = ref(false) const vAlert = () => { showAlert.value = true setTimeout(() => { showAlert.value = false .. 2024. 6. 28. 레이어팝업 위치 이동하기 vue3기능 -> Teleport 레이어팝업은 콘텐츠 영역의 바깥에 위치해야하는데vue3에 텔레포트 기능으로 저렇게 옮겨 줄수가 있다 Teleport to="#modal"> AppModal>AppModal> Teleport>index.html에서 2024. 6. 28. vue3 사라지고 나올때 트렌지션 효과 https://vuejs.org/guide/built-ins/transition.html Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org v-enter-from => 앞에 이름을 마음대로 지정해서 showDown-enter-from 이런식으로 변경해서 사용 에 name없을때는 기본인 v-enter-from없을때는 기본 클래스1234567891011121314151617181920212223242526272829template> Transition name="showDown"> div v-if="show" class="alert alert-success" role="alert">{{ message }}/div> /Transition>/.. 2024. 6. 28. 이전 1 2 3 4 ··· 6 다음
