진스

카카오맵, 파이어베이스,scss 사용// https://nuxt.com/docs/api/configuration/nuxt-configexport default defineNuxtConfig({  compatibilityDate: '2024-04-03',  devtools: { enabled: true },  ssr: true, // SSR 비활성화  nitro: {    preset: 'static' // 정적 사이트 빌드 ssr로할때는 사실 불필요한듯  },  plugins: [    '~/plugins/firebase.js' // Firebase 초기화 플러그인 추가  ],  runtimeConfig: {    public: {      KAKAO_API_KEY: process.env.KAKAO_AP..

메인 상단에 영상 + 이미지 스와이프 배너가 있음pc와 모바일에서  휠을 내리거나 , 밑으로 스와이프를 하면 자연스럽게 메인배너 밑으로 스크롤 이동되길 원함기본적으로 모바일에서 touch이벤트시에  window.scrollTo({            top: targetScrollY,            behavior: 'smooth'        }); 이부분만으로는 좀더 빠른 스크롤이동이 안됨   그래서 작성한 코드:///////////////////////////메인슬라이드 휠 동작 let isScrolling = false; let isWheeling = false; const mainVisualElement = document.querySelector('.mainVisual'); const m..

font-weight 두께별 이름 및 상대 두께두께이름bolderlighter100Thin400100200Extra Light(Ultra Light)400100300Light400100400Normal700100500Medium700100600Semi Bold(Demi Bold)900400700Bold900400800Extra Bold(Ultra Bold)900700900Black(Heavy)900700속성(Property) 속성값값(예)설명normalfont-weight : normal;폰트 두께를 기본(400)으로 설정합니다.boldfont-weight : bold;폰트 두께를 볼드(700)으로 설정합니다.lighterfont-weight : lighter;폰트 두께를 기본 두께보다 얇게 설정합..

div class="inp_sel">                input type="tel" placeholder="4자리" maxlength="4"  class="inputs">              div>                            div class="inp_sel">                input type="tel" placeholder="4자리" maxlength="4"  class="inputs">              div>

다른곳에서본 것들은 잘안된다.. 이건 됐음/ white-space: normal; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;

웹뷰 방식으로 작업하고 app에서 확인, 카톡브라우저에서도 동일하게 스크롤은 되지만 스크롤바가 나타나지 않음 ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); // -webkit-border-radius: 10px; // border-radius: 10px; } ::-webkit-scrollbar-thumb { // -webkit-border-radius: 10px; // border-radius: 10px; background: #ccc; // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-..

모바일로 작업중이라 breakpoints 640만 보면 되는데. 이런식으로 슬라이드의 양옆으로 노출하고 싶다면. const swiper2 = new Swiper('.swiper-container2', { //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평 direction : 'horizontal', //한번에 보여지는 페이지 숫자 slidesPerView : 3.5, //페이지와 페이지 사이의 간격 spaceBetween : 30, //해상도에 따른 조절 breakpoints: { 640: { slidesPerView: 1.4, spaceBetween:20, slidesOffsetBefore: 0, // 왼쪽 여백 centeredSlides:true, // 슬라이드 가운데..

npm i pinia로 설치후에 main.js에서 import { createPinia } from "pinia"; app.use(createPinia()); 이렇게 설치 작성후에 실행하니 X [ERROR] No matching export in "node_modules/vue-demi/lib/index.mjs" for import "hasInjectionContext" node_modules/pinia/dist/pinia.mjs:6:9: 6 │ import { hasInjectionContext, inject, toRaw, watch, unref, ... ╵ ~~~~~~~~~~~~~~~~~~~ 14:50:46 [vite] error while updating dependencies: Error: Bui..