// pc, 모바일 구분 const isMobile = () => { const user = navigator.userAgent; let isCheck = 'PC'; if ( user.indexOf("iPhone") > -1 || user.indexOf("Android") > -1 ) { isCheck = 'MO'; } return isCheck; } $(window).resize(function (){ mainNavSize(); }); function mainNavSize() { if(isMobile() == 'PC') { var windowWidth = $(window).width(); //요소의 너비를 반환 // 768 if(windowWidth < 769) { // 모바일 $('main nav u..

*이미지를 감싸는 버튼 혹은 div등의 부모 태그가 있어야 함 *바뀌는 이미지들의 파일명은 규칙성을 가지고 있어야 함 동일한 구조의 버튼이 여러개가 있고 각각의 버튼을 눌렀을 때, 이미지가 바뀌는(토글) 기능 var pinBtn = document.querySelectorAll(".pinBtn_js"); var click = true; function pinClick(element) { var btnTarget = element.currentTarget; var iconImg = btnTarget.querySelector(".pin_js"); if (btnTarget.click) { iconImg.src = iconImg.src.replace("off.png", "on.png"); } else { ico..

HTML JS const today = new Date(); const week = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'); const todayWeek = week[today.getDay()]; const todayDay = today.getFullYear()+'년 ' + (today.getMonth()+1)+'월 ' + today.getDate()+'일 '; $('#todayWeek').text(todayWeek); $('#todayDay').text(todayDay); 결과 이해하기 - new Date() * 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로..

# locomotive-scroll? 뷰포트 요소를 검출 및 시차효과를 사용한 부드러운 커스텀스크롤 플러그인. 단, 사용성·접근성 및 성능 문제를 일으킬 수 있음. # 사용하기 1-1. NPM node.js를 사용하여 locomotive-scoll을 다운받는 방법. 콘솔창에 다음의 설치 명령어를 입력하면 다운로드 됨. npm install locomotive-scroll 1-2. github locomotive-scroll의 git에서 직접 다운받는 방법. https://github.com/locomotivemtl/locomotive-scroll/tree/master/dist GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in vie..

#smooth scrollbar? 크로스브라우징이 가능한, 스크롤바를 사용자가 정의할 수 있는 JS 플러그인. #사용하기 1-1. NPM Node.js를 사용하여 smooth scrollbar를 다운로드 하는 방법. 콘솔창에 다음의 설치 명령어를 입력하면 node_modules라는 파일이 생성되며 그 안에 다운로드 됨. npm install smooth-scrollbar 1-2. github smooth-scrollbar의 git에서 직접 다운로드 하는 방법. https://github.com/idiotWu/smooth-scrollbar/tree/develop/dist GitHub - idiotWu/smooth-scrollbar: Customizable, Extendable, and High-Perfor..

탭 메뉴나 페이지 번호 등을 클릭했을 때 클릭한 요소만 css를 변경(.active 추가)하는 js HTML 1 2 3 4 5 css #container > .tab {color:#333;} #container > .tab.active {color:#fff; background:#333; border-radius:50%;} JS const tabContainer = document.getElementById("container"); let tab = tabContainer.getElementsByClassName("tab"); for(let i = 0; i < tab.length; i++){ let current = document.getElementsByClassName("active"); curren..