목록JavaScript (59)
진스
메인 상단에 영상 + 이미지 스와이프 배너가 있음pc와 모바일에서 휠을 내리거나 , 밑으로 스와이프를 하면 자연스럽게 메인배너 밑으로 스크롤 이동되길 원함기본적으로 모바일에서 touch이벤트시에 window.scrollTo({ top: targetScrollY, behavior: 'smooth' }); 이부분만으로는 좀더 빠른 스크롤이동이 안됨 그래서 작성한 코드:///////////////////////////메인슬라이드 휠 동작 let isScrolling = false; let isWheeling = false; const mainVisualElement = document.querySelector('.mainVisual'); const m..
div class="inp_sel"> input type="tel" placeholder="4자리" maxlength="4" class="inputs"> div> div class="inp_sel"> input type="tel" placeholder="4자리" maxlength="4" class="inputs"> div>
모바일로 작업중이라 breakpoints 640만 보면 되는데. 이런식으로 슬라이드의 양옆으로 노출하고 싶다면. const swiper2 = new Swiper('.swiper-container2', { //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평 direction : 'horizontal', //한번에 보여지는 페이지 숫자 slidesPerView : 3.5, //페이지와 페이지 사이의 간격 spaceBetween : 30, //해상도에 따른 조절 breakpoints: { 640: { slidesPerView: 1.4, spaceBetween:20, slidesOffsetBefore: 0, // 왼쪽 여백 centeredSlides:true, // 슬라이드 가운데..
posts.js const posts = [ { id: 1, title: '제목1', content: '내용1', cratedAt: '2023-01-01' }, { id: 2, title: '제목2', content: '내용2', cratedAt: '2023-02-02' }, { id: 3, title: '제목3', content: '내용3', cratedAt: '2023-03-03' }, { id: 4, title: '제목4', content: '내용4', cratedAt: '2023-04-04' }, { id: 5, title: '제목5', content: '내용5', cratedAt: '2023-05-05' }, ]; export function getPosts() { return posts; } ..
보호되어 있는 글입니다.
상황: 페이지 이동때마다 새로고침되는 쇼핑몰 이용중 고정 사이드 메뉴 색상을 바꿔줘야 함 꼼수: url 주소에 따라 클래스 추가하기 (페이지 뒤에 주소 두자리를 받아서 이용) //1. $(function(){ const linkUrl = document.location const link = linkUrl.pathname var arSplitUrl = link.split("/"); //(4) ['', 'myshop', 'addr', 'list.html'] var nArLength = arSplitUrl.length; //4 var arFileName = arSplitUrl[nArLength-1]; //list.html var arSplitFileName = arFileName.split("."); //(..
카페24 작업중 as-is : 전체 테두리가 같은 회색으로 통일 to-be: 흰색 칼라에만 테두리를 따로 주고싶음 결과: 적용 코드 const colorWhite = $(".color .xans-product span[style= 'background-color:#FFFFFF;']") colorWhite.attr("style","border:1px solid #000") 아래를 참고로 하였음 jQuery 노드 요소 탐색 jQuery 노드 찾기 (요소 탐색) jQuery 셀렉터 필터 속성옵션 필터 폼 요소 노드 Traversing 요소 필터링 tutorialpost.apptilus.com jQuery 셀렉터 $("*")// 모든 엘리먼트 선택 $("div")// Tag 이름으로 노드 찾기 $("#idNam..
[Javascript] URL 파라미터 값 가져오기 (쿼리스트링 값) Javascript에서 URL에 포함된 파라미터(쿼리스트링)의 값을 읽어오는 방법입니다. 현재 페이지의 URL과 파라미터 읽기 특정 파라미터 값 읽기 특정 파라미터가 있는지 체크하기 파라미터 추가, 변경, hianna.tistory.com Javascript에서 URL에 포함된 파라미터(쿼리스트링)의 값을 읽어오는 방법입니다. 현재 페이지의 URL과 파라미터 읽기 특정 파라미터 값 읽기 특정 파라미터가 있는지 체크하기 파라미터 추가, 변경, 삭제하기 전체 파라미터 목록 가져오기 1. 현재 페이지의 URL과 파라미터 읽기 현재 페이지의 URL을 가져오는 방법과 쿼리스트링을 가져오는 방법은 지난 포스팅에서 소개했습니다. [Javascrip..