본문 바로가기

I LOVE WHAT I DO

0과 1 사이, 새로운 시작!

코드 한 줄이 세상을 바꾼다.

부족하지만 최선을 다하면 된다.

전체 글

총 36개

0과 1 사이에서

메뉴 버튼 클릭시 다른거는 내려가고 클릭한 버튼만 나오게 2023. 2. 21. 16:44 메뉴 1 메뉴 2 메뉴 3 메뉴 1 - 항목 1 메뉴 1 - 항목 2 메뉴 1 - 항목 3 메뉴 2 - 항목 1 메뉴 2 - 항목 2 메뉴 2 - 항목 3 메뉴 3 - 항목 1 메뉴 3 - 항목 2 메뉴 3 - 항목 3
Javascript - Array filter 사용하기 2023. 2. 20. 23:06 filter는 Array의 함수 중 가장 많이 쓰이는 3 대 함수라 한다.3개는 amp,filter,reeduce 등이 있다. filter의 활용도는 매우 높은 편이라 어디라고 정해진 곳 없이 사용되는 편이다. filter는 해석 그대로 걸러주는 역할을 하는 함수이다.주로 특정 조건을 만족하는 새로운 배열을 필요로 할 떄 사용하는 편이다. const numbers = [1, 2, 3, 4, 5];const result = numbers.filter(number => number > 3);console.log(numbers);// [1, 2, 3, 4, 5];console.log(result);// [4, 5]예제 코드는 array를 통해 주어진 값들을 filter를 통해 3보다 큰 수를 가진 값들을 걸어..
유용한 add toggle remove 용어 2023. 2. 2. 13:42 /** * 인자에 DOM 요소와 클레스명을 전달하면 해당 DOM 요소에 클레스명을 첨삭(더하거나 빼거나)해줌 * @param {document} target 클레스명을 변경하고자 하는 DOM 요소 * @param {string} className 첨삭하고자 하는 클레스명 */function toggleClassList(target, className) { target.classList.toggle(className);}/** * 인자에 DOM 요소와 클레스명을 전달하면 해당 DOM 요소에 클레스명을 더해줌 * @param {document} target 클레스명을 변경하고자 하는 DOM 요소 * @param {string} className 더하고자 하는 클레스명 */function addClassLi..
Js 이것은 상단 메뉴바가 스크롤 시 따라 올 수 있도록 제작 2023. 1. 31. 17:47 if (document.querySelector('.title_category') !== null) { const scrollC = document.querySelector('.title_category'); const scrollD = document.querySelector('.detail_title_category'); const scrollE = document.querySelector('.DescTop'); window.addEventListener('scroll', () => { if (window.scrollY >= 66) { scrollC.style.position = "fixed"; scrollC.style.top = "0"; scrollC.styl..
Js 다른 슬라이드 기능 2023. 1. 31. 17:42 if (document.querySelector('.detail_title_category') !== null) { const detailTitleCategory = document.querySelector('.detail_title_category') const detailTitleList = document.querySelector('.detail_title_list'); const scrollBtnSet = document.querySelector('.fix'); const prevBtn = document.querySelector('.prev_btn'); const nextBtn = document.querySelector('.next_btn'); // EventListener det..
Js 스크롤 기능 2023. 1. 31. 17:39 if (document.querySelector('.giftSubImgArea') !== null) { // DOM const giftSubImgList = document.querySelector('.giftSubImgList') // 테마 버튼들 모여있는 영역 const prevBtn = document.querySelectorAll('.subImgSlideBtn')[0] // 버튼 // variable const PREV_NUM = -309 // 버튼 클릭 시 이동할 픽셀 // EventListener prevBtn.addEventListener('click', () => handleControlBtn(PREV_NUM)) nextBtn.addEventListener('click',..
반응형 크기에 따라 이미지 height 자동 조절하기 2023. 1. 31. 17:32 if (document.querySelector('.giftMainImg') !== null) { const giftMainImg = document.querySelector('.giftMainImg') const gitfImgArea = document.querySelector('.gitfImgArea') const productItemContents = document.querySelector('.prt_item_desc') const prtpad = document.querySelector('.prt_pad') window.addEventListener('resize', () => { if (`${prtpad.clientWidth}` >= 768) { giftMainImg.s..
클릭 시 글 색 변하게 하기 2023. 1. 31. 17:18 const number = document.getElementsByClassName("video_page_link");const categoryA = document.querySelectorAll('.category_activeA>li>a');const categoryB = document.querySelectorAll('.category_activeB>li>a');function handleClick(event) { for (var i = 0; i active ,clicked 이름 둘다 css에 색을 넣으면 해당하는 클래스에 색이 변할것이다.참고로 querySelectorAll('.category_activeB>li>a'); 부분에서 앞에 '~~' 부분은 해당 클래스 명으로 수정해야한다! functi..