그냥, 일단 써내려가자

안녕하세요, 무택입니다 :)오늘은 부드러운 스크롤링을 위한 라이브러리 Locomotive-scroll을 들고 왔습니다. 사용 방법이 쉽지는 않은데 아래에서 최대한 쉽게 설명한 내용을 보고 사용해 보세요! Good Referance 공간기록ㅣ빈 공간에 가치를 담다공간기록이 만들어 낸 빈공간에는 공간기록과 클라이언트의 수많은 가치있는 이야기들이 새롭게 기록되어져 담깁니다.ggglog.com  HTML/CSS scroll-speed 양수 scroll-speed : 0.5 scroll-speed : 1 ..

안녕하세요 무택입니다 :) 오늘은 스크롤 트리거에 대해 설명해보려고 합니다. 스크롤을 활용해서 웹페이지를 동적으로 만들어 줄 수 있는 라이브러리인데 너무 좋은 라이브러리라서 보시면 활용할 곳이 정말 많을 것 같습니다😊 스크롤 트리거, 왜 사용할까요? 동적인 웹 구현을 하기 위해서는 자바스크립트가 거의 필수로 들어가야 합니다. JS를 활용한 기능들 중 스크롤 위치에 따른 기능 구현이 많이 필요한데 페이지마다 자바스크립트만으로 구현하기에는 복잡하고 사용성이 떨어지기 때문에 편하게 스크롤 위치를 감지하고 기능을 넣을 수 있는 스크롤 트리거 라이브러리를 사용하면 쉽고 빠르게 동적인 기능을 만들 수 있습니다. 코드 및 설명 HTML/CSS .full_screen { width: 100%; height: 100vh..

안녕하세요 무택입니다 :) 오늘은 저번 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..

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

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

안녕하세요 무택입니다 :) 오늘 알아보려고 하는 기능은 퍼블리싱하는데 시간 절약을 도와주는 animate 라이브러리를 알아보려고 합니다. 퍼블리싱하는 데 있어서 정적인 웹보다 동적인 웹이 UX에 있어서 더 좋은 환경이라는 건 많은 분들이 알고 계실 겁니다. 그런 동적인 웹을 만드는 데 있어서 많은 도움을 주는 라이브러리니까 아래 설명을 보고 활용해 보면 좋을 것 같습니다😉 Animate 라이브러리란? animate 라이브러리는 다양한 모션을 템플릿 형식으로 만들어서 웹사이트 퍼블리싱 할 때 쉽게 모션을 넣게 해주는 라이브러리입니다. 해외에서 만든 모션들이기 때문에 국내 페이지 개발에 사용할만한 모션이 많지는 않지만 적절한 상황에 넣으면 좋은 효과를 낼 수 있는 모션들이 많아서 퍼블리싱하면서 적절한 상황에..

안녕하세요 무택입니다 :) 오늘 알아볼 기능은 박스 안에서 텍스트가 올라오는 기능입니다. 최근 웹사이트에 사용되는걸 자주 보는 기능인데 말로 설명하는 것보다 아래에서 사례를 바로 알아봅시다. 기능을 적용하려면 animate 라이브러리 사용법을 기본적으로 알아야합니다. 코드 예제 See the Pen 박스 안에서 텍스트 올라오기(animate라이브러리) + txt stroke/txt fill by TytanLee (@TytanLee) on CodePen. HTML - M. Cloud Bridge CSS - *{ padding: 0; margin: 0; font-family: 'Prompt'; } div{ overflow: hidden; } h1{ font-size: 84px; line-height:1; t..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 "YTPlayer" 플러그인입니다. 유튜브 iframe은 모바일에서 자동재생, 자동바 숨김이 안되기 때문에 이런 경우에 활용가능한 라이브러리(플러그인)입니다. 01. 일반 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer) by TytanLee (@TytanLee) on CodePen. 일반적인 활용을 하면 html파일에서 문서가 지저분해 보여서 html에서 설정한 속성값을 스크립트로 넘겨서 html파일을 깔끔하게 만들 수 있습니다. 깔끔하게 정리한 문서는 아래를 참고해주세요. 02. 코드 간소화 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화 by TytanLee (@..

안녕하세요 :) 무택입니다🧔 오늘은 웹사이트 서치하다가 좋아 보이는 기능을 발견해서 그 기능에 대해 기록해보려 합니다. 스크롤 시 천천히, 부드럽게 보여주는 애니메이션에 대한 내용입니다. smoothwheel 제이쿼리를 찾아보다가 문제점이 있어서 실제 적용하기는 힘들어 보여서 실제로 더 서치 하다가 적용 가능한 scrooth라이브러리를 발견해서 두 가지를 남겨봅니다. 1. smoothwheel.js 원본 링크 - https://github.com/fatlinesofcode/jquery.smoothwheel GitHub - fatlinesofcode/jquery.smoothwheel: Cross browser smooth mouse wheel and trackpad scrolling Cross browse..