기록장

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

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

📌 예시 (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 를 ..

나 같은경우 이제껏 제이쿼리를 사용할때 html 파일안에  아래와 같이 CND을 불러왔었는데, 그래서 아래 제이쿼리 CDN이 제이쿼리를 사용하고 있는 .js 파일보다 밑에 있을때동작이 안돼서 해매는 경우가 있었당 위의 서순으로 구성해야 동작됨    제이쿼리를 사용하는 js코드 위에, CDN을 넣으면 동작이 되는데,위 Jquery CDN을 불러오는 형태로는 .js 파일안에 넣는게 불가능하기 때문에다른 형식으로 .js에 넣는 방법은 다음과 같당 // Load jQuery$.getScript("https://code.jquery.com/jquery-3.6.0.min.js", function () { console.log("jQuery..

1. 카카오 디벨로퍼 에 들어가서 애플리케이션을 추가함  https://developers.kakao.com/console/app 카카오계정 accounts.kakao.com     2. 플랫폼에서 맵을 동작하고자 하는 주소를 입력함 (나는 liveserver로 동작시에 표기되는 ip주소를 등록함)(도메인주소 마지막 부근에 / 를 입력하면 안됨)    3. 앱키 에서 JavaScript 키를 복사하여 넣음    4. 카카오 maps API 의 웹에 에 접속하여 원하는 샘플을 고름https://apis.map.kakao.com/web/      5. JS + html을 복사하고 Vscode에 붙혀놓은 후,  3. 에서 발급받은api키 를 넣고 마음껏 커스텀 하면 끝       ++ 6 . 원하는 좌표값은 ..

준비물1. JQuery Cookie받기 / cdn으로 넣기 https://github.com/carhartl/jquery-cookie GitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:No longer maintained, superseded by JS Cookie:. Contribute to carhartl/jquery-cookie development by creating an account on GitHub.github.com2. JQuery cdn으로 넣기 (받아 넣어도 되지만 생략)script>    📖 쿠키의 개념Server 혹은 Database 가 아니라, 내 컴퓨터( Local ) 의 브라우저( C..