TRstory

# prefers-color-scheme: dark light// jsif (window.matchMedia('(prefers-color-scheme: dark)').matches) { console.log("현재 다크 모드입니다.");} else { console.log("현재 라이트 모드입니다.");} meta name="color-scheme" content="light dark">// css/* 다크 모드일 때 */@media (prefers-color-scheme: dark) { body { background-color: #121212; color: #ffffff; }}/* 라이트 모드일 때 */@media (prefers-color-scheme: light) { body..

CASE1 - 순수 VScode 만 사용 (사용시 주석삭제)// .vscode/settings.json{ // 저장할 때 자동 포맷 "editor.formatOnSave": true, // HTML/CSS/JSON 등 VS Code 기본 포맷터 사용 "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "[css]": { "editor.defaultFormatter": "vscode.css-language-features" }, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[javascript]": { ..

- HTML viewport 설정meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> - CSS 변수로 선언하기:root { --sat: env(safe-area-inset-top); --sar: env(safe-area-inset-right); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left);} - CSS 변수 사용body { padding-top: var(--sat);} - SCSS 에서의 선언:root { --sat: #{env(safe-area-inset-top)}; --sar: #{env(safe-..

- 기본 전역 사용 - 동적 스크립트 로드후 사용

현재 년도

new IntersectionObserver(callback[, options]);Intersection Observer API 의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트 가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공합니다.DOC : https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver 메서드설명.observe(targetElement)루트 내에서의 가시성 변화를 감지할 element입니다. 루트 요소의 자손이어야 합니다. 루트가 현재 문서의 뷰포트일 경우 이 요소도 문서 내에 위치해야 합니다.반환값 : undefined.di..

CDN : https://cdnjs.com/ jQuery : https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.jsgsap :    https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.jsScrollTrigger : https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js

100/1초 시간을 (시:분:초:100/1초) 변환 // total => 100 / 초 funciton HMSsm(total){ let totalS = Math.floor(total / 100); // totle (초) let timeH = Math.floor(totalS / 3600); // 1시간 3600초 (시) let timeM = Math.floor(totalS % 3600 / 60); // 나머지 를 / 60 몫 (분) let timeS = Math.floor(totalS % 60); // 나머지 (초) let timeMs = (total % 100); // 100/1 초 timeH = String(timeH).padStart(2,"0"); timeM = String(timeM).padStar..

CSS 선언인라인(inline) 방식html 에서 적용 ... 내장(internal) 방식html 에서 style 태그로 적용링크(external) 방식html 에서 적용@import( import ) 방식css 에서 적용@import url("./css/style.css");

인터페이스 Element의 메서드는 호출된 요소가 사용자에게 표시 scrollIntoView()되도록 요소의 상위 컨테이너를 스크롤합니다. element.scrollIntoView(true) doc : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView- element : 스크롤 타겟- element.scrollIntoView(true) : 스크롤 타겟의 포커스 이동에 따라 부모 스크롤 이동. (상단 기준)- element.scrollIntoView(false) : 스크롤 타겟의 포커스 이동에 따라 부모 스크롤 이동. (하단단 기준)