그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 저번 Slick-slider의 dot을 커스텀한 글에 이어서 이번에는 Swiper의 dot을 커스텀하는 방법에 대해서 써보려고 합니다. 아래에서 바로 확인하시죠. Slick-slider의 Dot을 커스텀하는 방법은 아래 글을 참고해 주세요. https://mu08.tistory.com/107 Swiper 라이브러리의 Dot을 커스텀하는 방법 HTML/CSS Swiper 1 Swiper 2 Swiper 3 꼭 swiper의 js파일과 css파일을 불러와야 적용이 됩니다. JS var bullet = ['슬라이드1', '슬라이드2', '슬라이드3']; var swiper = new Swiper('.swiper-container', { pagination: { el: '.sw..

안녕하세요 무택입니다 :) 오늘은 Slick-slider라이브러리의 dot을 커스텀할 수 있는 방법에 대해 써보려고 합니다. 이 라이브러리는 웹개발에 있어서 쓸 일이 정말 많은데 커스텀하지 않은 버전의 슬라이드도 정말 좋지만 상황에 따라 커스텀해야 할 경우도 생기더라고요. 그럴 때를 위해 써보려고 합니다. Slick-slider의 dot을 커스텀할 수 있는 방법 HTML/CSS slick 01 slick 02 slick 03 JS $('.slick_slider_div').slick({ autoplaySpeed: 2500, dots: true, slidesToShow: 1, customPaging: function (slider, i) { var thumb = $(slider.$slides[i]).data..

안녕하세요 무택입니다 :) 오늘은 로딩화면에 대해 써보려고 합니다. 국내에는 로딩화면을 쓰는 사이트가 많지는 않은 걸로 알고 있습니다. 하지만 해외 사이트를 돌아다니다 보면 로딩화면을 구현한 사이트를 자주 접하는 것 같습니다. 여기에 대한 이유는 아래에서 설명드리겠습니다. 로딩화면이 필요성 사이트의 소스들(이미지, 영상, 스크립트 등)이 많아서 무거운 사이트의 경우 사이트에 들어가면 화면이 모두 다 불러와지는 데까지 시간이 소요됩니다. 1초에서 길면 10초까지 걸리는 사이트들이 있는데 시간이 1초 정도만 넘어가더라도 사용자는 지루함을 느낄 수 있습니다. 시간이 더해질수록 기다리지 않고 사이트를 이탈하는 경우가 많아지죠. 이런 이유에서 어쩔 수 없이 사이트가 무거워지는 경우 로딩화면을 구현함으로써 기다림을..

최소한의 코드로 디데이 계산하기 See the Pen [js]D-day계산기 by TytanLee (@TytanLee) on CodePen. const christmas = new Date("2023-12-25"); 디데이 설정 const today = new Date(); 밀리세컨드 단위의 시간 표시 1초=1000 day_gap = christmas - today; 크리스마스까지 남은 밀리세컨드 초 값 setInterval(find_day, 1000); 1초마다 디데이 기능 실행

HTML 상품명 가격 상품선택 모자 셔츠 바지 Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 사용된 문법 .eq(number) : 선택한 배열의 number번째 요소를 불러온다. .val(...) : 선택한 요소의 value값을 가져온다. 변수에 값 할당 시 ""를 사용할 경우 줄 바꿈이 생기면 코드 진행이 끊기기 때문에 줄 바꿈을 이용할 경우 ``를 사용하기 .html(...) : 선택요소의 내부에 (...)안 코드를 교체해 준다. .append(...) : 선택요소의 내부에 (...)안 코드를 추가해 준다. .forEach(function(a, i){} : 배열에 쓸 수 있는 반복문 함수. a는..

안녕하세요 무택입니다 :) 오늘은 js에서 스크롤 높이의 개념에 대해 정리해보려고 합니다. js를 처음 배우기 시작한 사람으로서 스크롤 높이의 개념이 아직 헷갈릴 때가 많습니다. 그래서 스스로 정리할 겸 이해하기 쉽게 설명해 보도록 하겠습니다. 스크롤 높이 종류 높이의 종류는 크게 세 가지로 정리할 수 있습니다. 1. 요소의 실제 높이(전체 높이) : scrollHeight 2. 요소의 보여지는 높이 : clientHeight 3. 요소를 스크롤한 값 : scrollTop 이미지를 클릭하면 크게 볼 수 있어요 위 텍스트 박스의 클래스가 txtBox라고 한다면 document.querySelector(".txtBox").scrollHeight; //txtBox 요소의 전체 높이 document.queryS..

[API]카카오 지도를 간편하게 불러오는 방법 안녕하세요 무택입니다 :) 오늘은 카카오 지도를 불러오는 방법에 대해 써보려고 합니다. 웹사이트를 구현하다 보면 지도 기능이 필요한 경우가 생기는데 보통 구현하기 힘들 경우 이미지로 대 mu08.tistory.com 위 링크에서 카카오 맵을 어떻게 등록하는지 알 수 있습니다. 안녕하세요 무택입니다. 오늘은 VScode에서 카카오 지도를 라이브서버로 테스트해보려고 할 때 안 나오는 오류에 대해서 써보려고 합니다. 지도를 등록하는 과정에서 도메인 입력을 실수했을 때 일어나는 오류인데 아래 내용을 확인해서 수정해 보시길 바랍니다. 카카오 지도 401 에러 해결 방법 위와 같이 "Failed to load resource: the server responded wi..

안녕하세요 무택입니다 :) 오늘은 카카오 지도를 불러오는 방법에 대해 써보려고 합니다. 웹사이트를 구현하다 보면 지도 기능이 필요한 경우가 생기는데 보통 구현하기 힘들 경우 이미지로 대체하는 경우가 있습니다. 하지만 확실히 지도를 불러오는 방법이 사용성이 좋기 때문에 아래 방법을 보면서 따라 해보시길 바랍니다😊 카카오 지도 불러오는 방법 크게 순서는 이렇게 됩니다. 1. 카카오 API 제공 사이트에서 애플리케이션 기능으로 고유 API키를 발급 2. 지도 기능을 사용할 수 있는 코드를 복사해 와 고유 API키를 입력 3. 기타 커스텀 기능을 활용하면 다양하게 사용이 가능. 자세한 설명은 아래를 참고해 주세요. 1. 카카오 지도 api 사이트에서 "카카오 개발자사이트" 들어가기 2. 로그인 후 시작하기를 눌..

.test() 함수 사용 /.../.test(요소) 요소에 ...가 있는지 확인 /a/.test(요소) : 요소에 a를 포함하고 있으면 true 반환 /[a-z]/.test(요소) : 요소에 a부터 z까지 소문자가 있으면 true 반환 /[A-Z]/.test(요소) : 요소에 A부터 Z까지 대문자가 있으면 true 반환 /[ㄱ-ㅎ]/.test(요소) : 요소에 ㄱ부터 ㄴ까지 자음이 있으면 true 반환 /[0-9]/.test(요소) : 요소에 0부터 9까지 숫자가 있으면 true 반환 /^a/.test(요소) : 요소가 a로 시작하면 true 반환 /a$/.test(요소) : 요소가 a로 끝나면 true 반환 /\S/.test(요소) : 요소에 아무 문자 하나를 포함하고 있으면 true 반환 /\S+@\..

스크롤 유도 애니메이션 See the Pen 스크롤 유도 액션 by TytanLee (@TytanLee) on CodePen. 애니메이션(딜레이 조절)을 활용한 스크롤 유도 효과