기록장

| 문제상황index.html과 sub/subpage.html 은 같은 JS를 공유해서 사용하는 상황.같은 mp3파일을 JS를 통해 가져와야 하는데,경로가 달라서 JS가 sub/subpage.html 에서 동작할경우'. ./ '가 추가되어야 함 $(document).ready(function () { const basePath = window.location.pathname.includes('/sub/') ? '../' : ''; const audioPaths = { Bgm1_Fireplace: basePath + 'bgm/DC_fire.mp3', Bgm2_Rain: basePath + 'bgm/DC_rain.mp3', Bgm3_MxRedKeyboard: ..

여기 있는 동영상 프레임 복사누르면클립보드에 복사됨!(이걸 몰라서 매번 4k로 받고 캡쳐했던 경험이 ㅠㅜㅠㅜ)

/* 모든 요소에 대해 하이라이트 제거 */* { -webkit-user-select: none!important; /* 크롬, 사파리, 오페라 */ -moz-user-select: none!important; /* 파이어폭스 */ -ms-user-select: none!important; /* 인터넷 익스플로러/엣지 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Safari */ -webkit-tap-highlight-color: transparent; /* 다른 웹킷 기반 브라우저 */ user-select: none!important; /* 표준 */}    -webkit-tap-highlig..

🔰영상 자동재생 시, 아래의 필수 태그가 포함되어야 재생됨autoplay, muted, playsinline  + 다른 코드는 자주 봤지만 아래 코드는 IOS 에서 아니면 보기 힘들어서 설명추가playsinline: iOS에서 비디오가 전체 화면 모드로 전환되지 않고 인라인(화면 내에서) 재생되도록 함이는 특히 모바일 환경에서 중요한 속성 사파리에서만 안되는게 생각보다 많아서중간중간 자주 막히네..! ㅎㅎ

📌 오늘 날짜로 CSS 새로받기" rel="stylesheet"> 📌 페이지 들어갈때마다 CSS 새로받기 " />  이 코드를 사용하면 페이지가 로드될 때마다 time() 함수가 현재의nix 타임스탬프(초 단위)를 반환하기 때문에, 항상 새로운 URL이 생성되고 브라우저가최신 CSS 파일을 가져오게 됨 ⚠️ 매번 새로운걸 받기 때문에, 트래픽 및 로딩시간이 증가 하므로 테스트 시에만 사용!    📌 특정 업데이트 날짜를 기점으로 CSS 새로받기 나는 보통, 이런식으로 .css 뒤에 "?ver=날짜" 처럼 사용한당ㅎㅎ

✅ 필자의 사용 목적 - 포스터를 웹상에 나타냄 (도합 14장)- 해당 포스터를 각각 고화질로 (실물 포스터 출력 고려) 다운받게 함  고해상도 + 디테일한 텍스쳐가 많이 들어간작업물을 웹에도 나타내고, 다운로드 까지 받게할 일이 없었어서(이때까지는 dpi를 낮게 조정하거나 일반적인 export기능을사용할때 퀄리티를 낮춰서 저장할시, 충분히 커버 가능한 작업을 해옴)  웹용으로 저장을 왜 써야하는지, 그 필요성을 그다지 느끼지 못했는데이번에 알게되어 기록!     📌 웹용으로 저장 방법 1. 웹용으로 저장(ctrl + alt +shift + s)을 염   2. 사전설정 : jpeg 중 정도로 설정, 이미지크기 : 퍼센트 부분을 반절 정도로 줄임 - 미리보기 패널에 용량이 347kb 정도로 줄여진게 보임..

📌 예시 (Aespa -Armageddon webpage) 가로폭이 세로폭보다 큰 PC의 경우 가로로,가로폭이 세로폭보다 작은 모바일의 경우 세로로변환하여 디자인이 일관적으로 보이게 하는 컨셉 Web page다(이런 페이지들은 금방 사라져서 아쉽 ㅠㅜ) 인터렉션 요소가 많아서 재밌는 이 사이트 처럼 기기별 가로 사이즈에 따라가로세로를 변경하려면 아래 코드를 사용하면 된당https://aespa.com/ aespa aespa.com    📌 적용예제 코드See the Pen 자동가로/세로변경 css by galaxy_star (@fold6) on CodePen.  📌 핵심코드 /* 핵심코드 */ /* 가로폭이 세로폭보다 작은 경우, 즉 장치가 세로 모드일 때를 감지 */ @media..

OG(Open Graph) 태그웹페이지가 소셜 미디어에서 어떻게 표시될지를 제어하는 메타 태그,이를 통해 링크가 공유될 때 웹페이지의 제목, 설명, 이미지 등을 미리보기로 설정가능   주요 목적과 사용 이유  소셜 미디어에서의 시각적 효과:OG 태그는 페이스북, 트위터, 카카오톡 등 소셜 미디어 플랫폼에서 링크가 공유될 때 어떻게 표시될지를 제어.예를 들어, og:image 태그는 링크를 공유할 때 표시되는 썸네일 이미지를 설정더 나은 사용자 경험:사용자가 소셜 미디어에서 링크를 클릭하기 전에 해당 링크의 내용을 미리 확인할 수 있도록 도와줌. (클릭률(CTR)이 증가)브랜드 일관성 유지:웹사이트나 페이지가 소셜 미디어에서 공유될 때 일정한 형식과 디자인을 유지할 수 있도록 함.(브랜드 이미지 관리에 도..

✅ 쿠키 사용을 위한 CDN  ⚠️주의 : 쿠키는 제이쿼리cdn보다 밑에 있어야 동작함  ✅ JS코드 (해결 후 코드)// |￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|// 첫 진입시에만 팝업, 이후 숨김// |＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿|// \ (•◡•) /$(document).ready(function () { var popDisplay = $.cookie('popDisplay'); if (!popDisplay) { $('#pop').show(100); $.cookie('popDisplay', 'none', { path: '/' }); } else { $(..

이런식으로 스와이퍼 js와 CSS를 가져오는데JS는 CDN으로 가져와도, pagination 을 수정하려면 로컬파일을 받아야 함 https://www.jsdelivr.com/package/npm/swiper?tab=files&version=11.0.0 jsDelivr - A free, fast, and reliable CDN for JS and Open SourceOptimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.www.jsdelivr.com  아래 사이트에서 사진과 같이 버전에 맞는 swiper-bundle.css 를 ..