Lpla 개발 블로그

JavaScript/실전

[JavaScript] 계산기

이 글은 유튜브 ZeroCho ES2021 자바스크립트 강좌에 나온 내용을 기초로 작성했지만 다른 부분이 존재합니다. 1. HTML 마크업, CSS 추가 자바스크립트로 단순한 사칙연산 계산기를 만들어보겠다. 실제 계산기는 신경 써야 할 게 훨씬 많고 복잡하기 때문에 여기서는 다루지 않는다. 먼저 HTML과 CSS는 아래 내용을 그대로 복사한다. 7 8 9 + 4 5 6 - 1 2 3 / C 0 = X * { box-sizing: border-box; } #result { width: 180px; height: 50px; margin: 5px; text-align: right; } #operator { width: 50px; height: 50px; margin: 5px; text-align: center..

JavaScript/실전

[JavaScript] Swiper 예제 - 마우스오버시 일시정지

Swiper에서 autoplay 파라미터를 사용하여 자동재생 기능을 활성화할 수 있다. const swiper = new Swiper('.swiper-container', { autoplay: true, }); autoplay: true로 3초 마다 자동재생되는 슬라이드를 만들 수 있지만 그다지 추천하는 방법은 아니고 delay와 disableOnInteraction: false 로 세부 옵션을 추가하는 것이 좋다. const swiper = new Swiper('.swiper-container', { autoplay: { delay: 2000, disableOnInteraction: false, }, }); delay는 자동 재생 시간으로 유명하니 넘어가고 disableOnInteraction은 기본값..

JavaScript/실전

[GSAP] 예제 - Pin과 timeline으로 요소 등장

GSAP ScrollTrigger의 Pin과 timeline을 사용하여 효과를 구현하고자 한다. 어떤 지점에 도달하면 스크롤 하더라도 배경은 유지된 채, 수평 방향에서 요소가 등장하는 효과다. 배경을 유지하는 것은 pin, 요소가 등장하는 것은 timeline으로 구현할 수 있다. 최종 결과물 1. 준비 head에 GSAP와 ScrollTrigger를 추가하고 하단에 자바스크립트 외부 파일을 추가했다. 2. HTML, CSS section1 section2 1 2 3 section3 section4 body에 section 요소 4개를 추가했다. 여기서 화면이 고정될 요소는 section2다. 즉 pin을 section2에 부여할 것이다. 그리고 pin이 유지되는 동안 서서히 나타나게 될 요소들은 box..

JavaScript/실전

[JavaScript] Datepicker 사용법(설치, 한글, 스킨)

1. 준비 jQuery는 Datepicker라는 날짜 선택창을 지원한다. Datepicker를 사용하기 위해서는 jQuery와 jQuery-UI까지 설치해야 한다. 공식 사이트에서 다운 받아 설치하거나 CDN으로 설치할 수 있다. Download Builder | jQuery UI Download Builder jqueryui.com jqueryui - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery Java..

JavaScript/실전

[JavaScript] 슬라이더 + 탭 형식 멀티 팝업

업무 중에 팝업 관련 업무도 생각보다 많다. 일반적으로 팝업창 하나에 이미지 한 개가 들어가지만 사이트에 게시되는 팝업 개수가 늘어나면 지저분함은 물론, 일일이 닫는 것도 불편하기 때문에 이럴 경우엔 멀티 팝업을 사용한다. 기존에 만든 멀티 팝업이 몇 개 있지만 이번에 블로그 포스팅용으로 새롭게 만들어보겠다. 1. 미리보기 2. 슬라이더 라이브러리 내가 가장 애용하는 슬라이더 라이브러리는 Swiper다. 하지만 이번에는 Slider Pro를 준비해봤다. 내가 좋아하고 잘하는 라이브러리만 고집하기보다 다른 라이브러리도 경험해보면서 실력을 늘리기 위함이다. 따라서 반드시 Slider Pro일 필요는 없지만 여기선 Slider Pro를 사용하겠다. Slider Pro는 제이쿼리 기반 라이브러리이기 때문에 제이..

JavaScript/실전

[JavaScript] 끝말잇기 (2)

[JavaScript] 끝말잇기 (1) 5. 현재 제시어와 이전 제시어 정의 이제 이전 제시어의 마지막 글자와 현재 제시어의 첫 글자의 일치 여부를 확인하여 일치할 경우에 다음 제시어를 변경하고, 일치하지 않을 경우에는 변경하지 않도록 해야 한다. 따라서 현재 제시어를 nowWord, 이전 제시어를 prevWord라는 변수로 정의한다. 변수를 추가한 만큼 기존 코드에도 변수를 입력하여 수정할 필요가 있다. [기존 코드] wordBtn.addEventListener('click', function(){ wordDisplay.textContent = wordInput.value; wordInput.value = ''; }); [수정한 코드] let wordInput = document.querySelecto..

JavaScript/실전

[JavaScript] 끝말잇기 (1)

이 글은 유튜브 ZeroCho ES2021 자바스크립트 강좌에 나온 내용을 기초로 작성했지만 다른 부분이 존재합니다. 1. 순서 혼자서 하는 끝말잇기 놀이를 자바스크립트로 구현하려고 한다. 무작정 코드를 작성하기 이전에 먼저 머릿속으로 구상해보자. 필요한 HTML에는 무엇이 있을까? 끝말잇기 제시어를 작성할 input 요소, 작성한 제시어를 제출할 button 요소, 그리고 제출한 제시어를 출력할 div 요소까지 필요하다. 다음으로 필요한 JavaScript에는 무엇이 있을까? 입력한 제시어를 기억하는 변수와 div 요소에 출력하는 코드, 직전에 입력한 제시어의 마지막 값과 방금 입력한 제시어의 처음 값이 일치하는지 판단 여부, 두 값이 일치한다면 div 요소의 값을 바꾸고 일치하지 않는다면 div 요소..

JavaScript/실전

Swiper 예제 - 특정 해상도에서만 사용하기 (반응형)

1. breakpoints? swiper는 breakpoints로 반응형을 지원한다. const swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 10, breakpoints: { // 1280px 보다 클 경우 1280: { slidesPerView: 2, spaceBetween: 20 } } }); breakpoints는 반응형에 따라 swiper 효과를 다르게 주고 싶을 때 유용하다. 하지만 swiper 기능 자체를 호출(실행)/제거하려면 breakpoints로 해결할 수 없다. 가령 pc 해상도에서만 사용하고 모바일 해상도에서는 사용하지 않으려면 가장 단순무식한 방법은 display: none; 으로 pc에서 보여..

JavaScript/실전

[JavaScript] Tilt.js 사용하기

1. Tilt.js 소개 Tilt.js 라이브러리를 사용하면 요소에 마우스의 움직임에 따라 변하는 3D 틸트 효과를 부여할 수 있다. 1.71kb로 가볍고 사용법도 간단해서 쉽고 예쁜 효과를 빠르게 구현할 수 있는 장점이 있다. gijsroge/tilt.js A tiny 60+fps parallax tilt hover effect for jQuery. - gijsroge/tilt.js github.com See the Pen Tilt.js by lpla (@lpla) on CodePen. 2. Tilt.js 사용법 Tilt.js 라이브러리를 사용하기 위해서는 제이쿼리와 Tilt.js를 추가해야 한다. 틸트 효과를 부여하는 방법은 두 가지로 첫번째는 해당 요소에 data-tilt를 추가하는 것이다. 두번째..

JavaScript/기초

[JavaScript] 함수 (2)

이전 글에서 이어집니다. [JavaScript] 함수 1. 함수란? 자바스크립트에서 함수는 가장 중요한 문법 중 하나이다. 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아서 출력 lpla.tistory.com 6. 참조에 의한 전달과 외부 상태의 변경 엄연히 말해 자바스크립트에서 참조에 의한 전달은 존재하지 않고 값에 의한 전달만이 존재한다. 하지만 편의상 전달되는 값의 종류에 따라 값에 의한 전달과 참조에 의한 전달로 구분하여 부르기로 한다. 이 때 참조에 의한 전달은 다른 프로그래밍 언어에서 말하는 그것과 정확히 일치하지 않는다. // 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다. function ..