Gentleman'study 젠틀맨

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); // 모든 위치정보값 function follow(e){ gsap.to(".cursor", {duration: 0.3, left: e.pageX - (circle3.width / 2), top: e.pageY - (circle3.height / 2)}); //출력용 document.querySelector(".pageX").innerText = e.pageX; document.querySelector(".pageY").innerText = e.pageY; } window.addEventListener("mousemove", follow); 전체 사이트 보기 자바스크립트로 ..

const cursor = document.querySelector(".cursor");// 커서 const follower = document.querySelector(".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" gsa..

window.addEventListener("mousemove", (e)=>{ document.querySelector(".clientX").innerText = e.clientX// 브라우저 기준 좌표값 document.querySelector(".clientY").innerText = e.clientY document.querySelector(".offsetX").innerText = e.offsetX// 요소 기준 좌표값 document.querySelector(".offsetY").innerText = e.offsetY document.querySelector(".pageX").innerText = e.pageX// 페이지 기준 좌표값 document.querySelector(".pageY").i..

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..

기본 타입 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다. 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다. 자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다. 원시 타입(primitive type)은 다음과 같습니다. 1. 숫자(number) 2. 문자열(string) 3. 불리언(boolean) 4. 심볼(symbol) : ECMAScript 6부터 제공됨 5. undefined var num = 10; // 숫자 var myName = "홍길동"; // 문자열 var str; // undefined 숫자(number)형 자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 ..

함수의 기초 함수(function)란? 함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다. function addNum(x,y) { return x + y; } document.wrtie(addNum(2,3)); 자바스크립트 함수 자바스크립트에서는 함수도 하나의 타입(datatype)입니다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다. 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있습니다. 함수의 정의 자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가잡니다. 함수의 이름 괄호 안에 ..

반복문 프로그래밍에서는 반복되는 코드를 사용하는 경우가 많습니다. 이럴 때 반복문을 이용하여 코드를 간단하게 만들 수 있습니다. 반복문의 대표적인 구문은 for문과 while문이 있습니다. 다음은 for문과 while문을 통해 1부터 100까지 숫자를 출력 해보겠습니다. for문 { for (let i = 1; i