amanda의 공간입니다

// 241031 swiper for auto play on tab menu document.addEventListener('DOMContentLoaded', function () { let tabSliders = document.querySelectorAll('.care_swiper'); tabSliders.forEach(function (slider, index) { let sliderId = index + 1; let mySwiper = new Swiper(slider, {   observer: true,   observeParents: true,   slidesPerView: 1,   spaceBetween: 20,   centeredSlides: true,  speed: 2000,   autop..

html   css#snow_wrap{ position: absolute; top: 0; left: 0; width: 1920px; height: 100%;}#snow_wrap canvas{ position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}  js// snow animation$(()=>{ (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window...

html 3   css.lyrics_count{ width: 345px; margin: 0 auto; text-align: left;}.lyrics_count span{ display: inline-block; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; color: #000; font-size: 16px; font-weight: 700; vertical-align: middle;}.lyrics_count span + span{ margin-left: 6px;}.lyrics_co..

html menu 01 menu 02 menu 03 menu 04   jsfunction tabScroll(){ $('.navi_menu li a').on('click', function(){ let targetId = $(this).data('target'), targetSec = $('#' + t..

html   javaScriptfunction secScroll(){ const screenHeight = document.documentElement.clientHeight; $(window).scroll(function(){ $('.item').each(function(){ let crtHeight = $(window).scrollTop(); // current scroll top let t..

GA setting  @next/third-parties 설치  src/app/[lng]/layout.tsximport type { Metadata, Viewport } from 'next';import { dir } from 'i18next';import { locales } from '@/i18n';import { NextIntlClientProvider } from 'next-intl';import { getMessages, unstable_setRequestLocale } from 'next-intl/server';import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';import '@/assets/css/glo..

퍼블 작업하다가 asp에 css나 script 파일 링크할 때 url 맨 뒤에 하단 소스 붙이기  css나 script 코드를 수정했을 때 쿠키 삭제를 안한 PC에서는 이전 코드로 노출되는 경우가 있는데,가장 최근 버전으로 보이도록 버전 관리하는 asp 소스 뒷부분 큰따옴표를 바꾸면 안되기 때문에 url을 작은따옴표로 묶고 그 안에 붙여넣기  ?v=  사용예시'>

next.js 환경에서 스크롤 이벤트 구현하기 요구사항은 스크롤이 특정 영역에 진입했을 때 canvas로 그린 animation이 구현되는 것이었다  스크롤을 감지하기 위해 JS의 intersection observer 기능을 사용했고next.js 환경에서 사용하고자 useIntersectionObserver hook을 생성했다. 그리고 페이지 초기 렌더링 시에는 해당 canvas animation이 로드되지 않고scroll event가 수행될 때 canvas 컴포넌트가 렌더링 되도록 하기 위해next/dynamic을 import 했다.   src > hooks > useIntersectionObserver.tsimport { useEffect, useState, useRef } from 'react';..