코딩 공부 코딩 공부

function follow(e){ // const circle1 = document.querySelector(".cursor").clientWidth; //190 : border값 빠진 상태 // const circle2 = document.querySelector(".cursor").offsetWidth; //200 : border값 포함 상태 const circle3 = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x(좌표값), y(좌표값) // console.log(circle1); // console.log(circle2); // console.log(circ..

const cursor = document.querySelector(".cursor"); //div.cursor const follower = document.querySelector(".cursor-follower"); //div.cursor-follower window.addEventListener("mousemove", e => { //마우스 움직일 때 마다 //커서 좌표값 할당 // cursor.style.left = e.pageX -5 + "px"; // cursor.style.top = e.pageY -5 + "px"; // follower.style.left = e.pageX -15 + "px"; // follower.style.top = e.pageY -15 + "px"; gsap.to(c..

//출력용 window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; //현재창 기준 마우스커서 수평 좌표 document.querySelector(".clientY").innerText = event.clientY; //현재창 기준 마우스커서 수직 좌표 document.querySelector(".offsetX").innerText = event.offsetX; //좌표를 출력하도록 하는 이벤트가 걸려있는 DOM node를 기준으로 수평 좌표 document.querySelector(".offsetY").innerText = event.offsetY; //좌표를 ..

highlight(); //외부 스크립트 함수 (highlight)호출 modal(); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu(); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider03 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sliderInner = document.querySelector(".slide..

highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider03 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sliderInner = document.querySelector(".sli..

highlight(); //외부 스크립트 함수 (highlight)호출 highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider04 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sl..

highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider03 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sliderInner = document.querySelector(".sli..

highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider02 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sliderInner = document.querySelector(".sli..