본문 바로가기

Javascript

Javascript 2023. 2. 6. [Javascript] 스크롤 방향 감지하기 (위/아래 방향 알아내기) ↕️ 내 스크롤이 위로 가는가... 아래로 가는가... 알려주세요 Javascript 님...🙂 요즘 사이트들을 보면 스크롤을 올릴때, 혹은 내릴 때 숨겨지는 네비게이션, 버튼들이 자주 보인다. 그리고 내 포트폴리오에도 그 기능을 넣어야했다. 그래서 공부하게 된 마우스 스크롤 방향 감지하기 Javascript 코드 // 이전 스크롤 위치를 변수에 담는다. let lastScrollY = 0; // 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생) window.addEventListener("scroll", (e) => { // 현재 스크롤 위치(스크롤을 했을 경우 위치)를 변수에 담는다. let currentScrollY = window.scrollY; // 이전 스크롤 위치(Y)가 현재 스크롤 위치(Y)보다 ..
Javascript 2023. 2. 6. [Javascript] 탭메뉴 만들기 이번엔 탭메뉴 만들기! 이번건 검색했을 때 여러가지 방법들이 많이 나와서 고민했다. 이런 저런 페이지들의 코드들을 보면서 어떤게 좋은 코드일까... 어떤게 나은 코드일까... 해보다가 결국 내 마음대로 섞어서 짜보았다(?) 🥸 내 코드는 forEach와 index를 사용한 코드이다. Javascript 코드 // 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다. const tabItem = document.querySelectorAll(".tab__item"); const tabContent = document.querySelectorAll(".tab__content"); // 2. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다. // 이때 index도 같이..
Javascript 2023. 2. 6. [Javascript] 아코디언 메뉴 만들기 요즘은 참 편리한 시대가 되었다. 다양한 플러그인들은 더 편리한 개발환경을 제공하지만 포트폴리오를 만들며 스스로의 실력을 가늠하고 싶은 내 입장으로서는 직접 코드를 짜서 아코디언 메뉴를 만들어보고 싶었다. (일단 너무 오랜만에 사용해보는 Javascript... 그동안 사용하지 않아 굳었던 머리를 풀고싶기도 했다. 😇) 그래서 이래저래 구글링을 해보고 만든 나의 아코디언 메뉴!(두둥) 사실 간단한 기능이지만 그냥 처음 아무것도 주어진게 없는 코드를 바라봤을 땐 참 막막했던 것 같다. 코드 한줄 한줄을 주석으로 해석해보았다. 작업을 하다보니... 예전에 작성했던 코드보다 더 간결한 코드를 찾아서 수정했다. 😇 (아래는 예전에 작성해봤던 코드) 더보기 Javascript 코드 (예전 코드) // 1. 아코디..

티스토리툴바