근혁 study 공부정리

{ const paragraphs = [ "1one in four American adults is unvaccinated or only partially vaccinated, and that number isnt budging much these days. Fewer than 80,000 adults are getting their first shot every day a 96% drop from the more than 2 million a day in April 2021. Its easy to believe that anyone who hasnt gotten a shot by now is unlikely to get one in the future—but there is still a group o..

{ const musicWrap = document.querySelector(".wrap__music"); const musicImg = musicWrap.querySelector(".music__img img"); const musicName = musicWrap.querySelector(".music__song .name"); const musicArtist = musicWrap.querySelector(".music__song .artist"); const musicAudio = musicWrap.querySelector("#main-audio"); const musicPlay = musicWrap.querySelector("#control-play"); const musicPrevBtn = mus..

{ //01. HTML/CSS 구성 //02. 클릭한 카드 뒤집기 //03. 두개의 카드 뒤집어서 같은지 확인 (첫번째, 두번째) //04. 클릭한 카드의 두개의 이미지 가져오기 //05. 두개의 이미지 비교하기 //06. 틀린 이미지 애니메이션 효과 주기 //07. 빨리 클릭하면 버그 발생 처리하기 const cards = document.querySelectorAll(".cards li"); let cardOne, cardTwo; let disableDeck = false; function flipCard(e){ //클릭 카드 = e 타겟 let clickedCard = e.target; if(clickedCard !== cardOne && !disableDeck){ //(빨리 클릭 버그)클릭카드와 ..

{ 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") //이전 버튼 c..

{ 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") //이전 버튼 c..

{ const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { //item = mouseimg const imageWrap = item.querySelector(".img") const imageWrapBounds = imageWrap.getBoundingClientRect(); //위치값을 가져옴 let itemBounds = item.getBoundingClientRect(); //item의 위치값 const onMouseEnter = () => { //마우스가 영역에 들어왔을때 gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale..

{ 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); }

{ document.querySelectorAll(".content__item__desc").forEach(desc=>{ let descText = desc.innerText; let descWrap = "" + descText + ""; desc.innerHTML = descWrap; if(desc.classList.contains(".reveal")){ desc.innerHTML = descText } else { desc.innerHTML = descWrap; } }) function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY const reveal = docum..