웹 공부중... 내 코딩 정리노트

HTML 해설보기 닫기 SCRIPT //레이어 팝업 $(".comment").click(function(){ $(".layer").show(); $(".layer_bg").show(); }); $(".layer .close").click(function(){ $(".layer").slideUp(300); $(".layer_bg").hide(); }); 팝업 CSS 보기 :

//modal(화면 위에 하나의 작은 화면) : 소스를 보여주는 작은 화면 const modal = function(){ //소스 보기(source-btn)를 클릭하면 maodal창을 보이게 해주세요(show 추가) document.querySelector(".source-btn").addEventListener("click", () => { document.querySelector("#modal").classList.add("show"); document.querySelector("#modal").classList.remove("hide"); }); // //닫기 버튼(modal-close) 클릭하면 없어지게 해주세요(show 삭제) // document.querySelector(".modal-clos..

const images = [...document.querySelectorAll("img")]; const lerp = (a, b, n) => (1 - n) * a + n * b; const map = (x, a, b, c, d) => ((x - a) * (d - c)) / (b - a) + c; const getMousePosition = e => { let posX = e.clientX; let posY = e.clientY; return { x: posX, y: posY }; }; let mousePos = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; window.addEventListener("mousemove", e => (mousePos..

const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imgageWrap = item.querySelector(".img"); const imgageWrapBounds = imgageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = () => { gsap.set(imgageWrap, {xPercent: 50, yPercent:50, rotation: -15, scale:0.3, opacity:0}); gsap.to(imgageWrap, {xPercent: -50, yP..

function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2))*0.1; let positionFast = (e.pageX - (window.innerWidth/2))*0.2; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}); gsap.to(".spanFast", {duration: 0.4, x: -positionFast}); gsap.to(".cursor", {duration: 0.3, left:e.pageX, top:e.pageY}); } document.addEventListener("mousemove",mousemove);

// slider07 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = sliderBtn.querySelector(".prev"); const sliderBtnNext = sliderBtn.querySe..

HTML CSS * { margin: 0; padding: 0; box-sizing: border-box; } ul{ list-style: none; } img { width: 100%; vertical-align: top; } body { background: #007bff; } .wrap__card { display: flex; align-items: center; justify-content: center; height: 100vh; } .card__inner { width: 700px; height: 700px; background-color: #fff; border-radius: 20px; padding: 30px; } .cards { display: flex; flex-wrap: wrap; j..

파일구조 HTML Time Left: 60s Mistakes: 0 wpm: 0 cpm: 0 Try Again CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins"; } body { background: #17A2B8; } .typing__wrap { display: flex; align-items: center; justify-content: center; height: 100vh; } .typing__inner { width: 60vw; min-width: 900px; min-height: 40vh; background: #fff; border-radius: 20px; padding: 40px; } .input__fi..

{ let num = 1; while(num

함수 함수란 프로그램의 코드를 저장한 공간이라고 할 수 있습니다. 데이터를 저장할 때는 변수를 선언하여 저장했습니다. 변수는 데이터만 저장할 수 있고 코드를 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 호출하여 사용할 수 있습니다. 변수와 함수의 차이점 변수(var)함수(function) - 1개의 데이터만 저장합니다. - var 키워드를 이용하여 선언 - 문자형,데이터,논리형 등의 데이터를 보관합니다. - 자바스크립트 코드를 저장합니다. - function 키워드를 이용하여 선언합니다. - 출력문, 제어문등의 코드를 저장하고 데이터를 반환 선언적 함수 선언적 함수는 함수명이 있는 함수입니다. 따로 변수에 넣어주지 않고 선언할 때 붙여준 이름으로 호출합니다. 변수를 선언할 때 var 키워드를 사용..