TRstory

현재 년도

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(inport) 방식 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) : 스크롤 타겟의 포커스 이동에 따라 부모 스크롤 이동. (하단단 기준)

CommonJS(CJS) vs ECMAScript Modules(ESM) node js 의 모듈 시스템 - es5 의 모듈 시스템 (CJS) 확장자를 "*.cjs"로 사용하면 (CJS)로인식 - es6 의 모듈 시스템(ESM) 확장자를 "*.mjs"로 사용하면 (ESM)로 인식 or - package.json 에서 {type:"commonjs"} 선언시 (CJS)로 인식 - package.json 에서 {type:"module"} 선언시 (ESM)로 인식 or - 기본적으로 "*.js" 파일을 사용하지만 위처럼 강제할 수 있음. CommonJS - cjs 모듈 확장자(.cjs) - moduleES5CommonJS.cjs const sum = ($a, $b) => { return ($a+$b); } con..

vue3 CLI 초기 세팅 node.js (v14.13.0), npm (v8.11.0) vue CLI 기본 설치 초기 세팅 (설치 i, 삭제 r) npm 설치 (1,2 버젼 'vue-cli'), (3 버젼 '@vue/cli') ~~npm i -g vue-cli~~ npm i -g @vue/cli 업데이트 npm update -g @vue/cli yarn 설치 npm install -g yarn yarn add @vue/cli 업데이트 yarn global upgrade --latest @vue/cli vue, vue cli 설치 npm install -g @vue/cli 실행 개발 : npm run dev 배포 : npm run build 프로젝트 생성 vue create [..

# 넘버링 - 결과 HTML 삽입 미리보기할 수 없는 소스 - 소스

HTML 1. 시맨틱마크업 html5 테그 머리말 (섹션해더) 본문 (독립섹션) 문서에서 독립적인 하나의 콘텐트를 구분하는데 사용한다. 뉴스 항목, 블로그 본문과 같이 자체적으로 배포될 수있는 독립된 영역을 지정한다. (보조섹션) 문서의 주요 콘텐트와는 별개의 영역을 정의하는데 사용한다. 광고 블럭과 같이 주변의 콘텐트와 별도로 다뤄지는 영역을 지정한다 글 영역 사전적 의미 그대로 웹 문서의 한 부분, 한장을 구분하는데 사용한다 문서 내영역의 범위를 한정하며 문서의 아웃라인을 구성한다. 네비게이션(탬색 링크의 섹션 정의) 메뉴(도구모음 및 목록 양식 컨트롤, 명령) 문서의 제목을 그룹화 하는데 사용한다. 예를 들어 제목과 부제가 동시에 존재하는 문서의 경우 요소와 요소로 제목, 부제목을 정의하며 이들 제..