Lpla 개발 블로그

JavaScript/실전

[JavaScript] Click 이벤트 중복 해결하기

제이쿼리 resize 이벤트로 700px 이하에서만 클릭 이벤트를 적용하고 700px을 초과하면 어떠한 이벤트도 없는 버튼을 만들고자 한다. HTML button button은 클릭 이벤트를 생성할 요소, width 클래스는 윈도우 가로 크기를 볼 수 있도록 표시할 요소이다. JS let ww = $(window).width(); checkResize(); $(window).on('resize', function() { ww = $(window).width(); $('.width').text(ww); checkResize(); }); function checkResize() { if (ww

etc

윈도우 터미널 설치

Mac의 터미널과 유사한 윈도우 터미널을 마이크로소프트 스토어에서 쉽게 다운받아 사용할 수 있다. Windows Terminal 구매 - Microsoft Store ko-KR Microsoft Store에서 이 Windows 10용 앱을 다운로드하세요. 스크린샷을 보고, 최신 고객 리뷰를 읽고, Windows Terminal에 대한 평점을 비교하세요. www.microsoft.com 만약 설치가 안된다면 윈도우 설정에서 개발자 모드를 켜고 다시 설치하면 된다. 설치가 끝났다면 윈도우키(Win) + wt로 윈도우 터미널을 실행시킬 수 있다.

JavaScript/실전

[JavaScript] locomotive-scroll로 marquee 효과 만들기

1. 설치 공식 깃허브에서 받거나 npm으로 설치한다. GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax. 🛤 Detection of elements in viewport & smooth scrolling with parallax. - GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax. github.com npm install locomotive-scroll 이후 locomotive-scroll.css와 loco..

HTML&CSS

[CSS] IE에서 position: sticky 사용하기

1. position: sticky 소개 position: sticky는 평소에 static 속성을 유지하다가 스크롤이 부모 요소에 다다르면 fixed 속성으로 바뀌고, 부모 요소를 벗어나면 다시 static 속성으로 바뀌는 재미있는 CSS 속성이다. body { height: 400vh; } #parent { height: 100vh; position: relative; top: 100vh; border: 5px solid #EB514C; box-sizing: border-box; } #sticky { position: sticky; height: 200px; top: 0; background-color: #FFF4ED; } 2. 주의사항 단 sticky를 사용할 때 알아둬야 할 사항이 몇 가지 있다...

JavaScript/실전

Swiper 예제 - 첫번째 슬라이드에서 prev 기능 막기

1. 기본 구조 1 2 3 4 5 6 7 Swiper에서 loop 기능을 사용하지 않으면 첫번째 슬라이드에서 prev 버튼이 자동적으로 비활성화된다. 마찬가지로 마지막 슬라이드에서 next 버튼도 비활성화된다. 한편 loop 기능을 사용하게 되면 첫번째 슬라이드에도 이전 슬라이드가 존재하고, 마지막 슬라이드 다음에도 슬라이드가 존재하기 때문에 버튼이 항상 활성화되어 있다. 말 그대로 루프(반복)니까 당연한 현상이다. 그런데 사용자에 따라서 loop 기능을 사용하되 첫번째 슬라이드에서 prev 버튼을 비활성화하고 싶을 수 있다. 첫번째 슬라이드에서 마지막 슬라이드로 되돌아가는 것이 마음에 들지 않을 수도 있으니까. 이제 해결 방법에 대해 알아보자. 2. reachBeginning, reachEnd Swip..

JavaScript/실전

[JavaScript] 커서를 따라다니는 svg 효과

회사 웹디자이너분께서 다음 래퍼런스를 주면서 마우스 효과를 사용할 수 있는지 여쭤봤다. DFY® | Today’s Creative for Tomorrow™ 디파이는 디지털 마케팅의 모든 서비스를 제공하는 풀서비스 에이젼시입니다. www.dfy.co.kr 그런데 해당 사이트는 Vue.js 기반으로 제작된 사이트라 코드를 가져오려고 해도 쉽지 않았다. 필요한 커서 효과만 사용하기 위해 코드를 긁어 오면 다른 파일을 import 해야 하고, 그 파일은 또 다른 파일을 import 해야 하고.... import 지옥이 펼쳐졌다. 결국 노가다로 함수 하나하나 변수 하나하나 가지고 와서 적용하고 에러 뜨면 해결하는 방식으로 어렵게 코드를 가져올 수 있었다. See the Pen 커서를 따라다니는 svg 효과 by ..