Lpla 개발 블로그

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..

PHP

[PHP] URL 가져오기, 문자열 자르기, 자릿수 맞추기

관련 포스팅 [PHP] 파일 하나로 여러 개의 페이지 사용하기 (그누보드 관련 포스팅을 할 계획이었는데, 막상 그누보드는 하나도 사용하지 않아서 php로 수정했다.) 일반적으로 웹사이트에서 한 페이지를 제작하기 위해 최소 파일 하나가 필요하다. 가령 ind lpla.tistory.com 1. URL 가져오기 다음 URL이 있다고 가정하자. https://example.com/page.php?mn01=5_1 이 URL은 네 가지로 분류할 수 있다. example.com page.php mn01 5_1 그리고 php로 각각을 구하는 방법은 다음과 같다. // example.com // /page.php?mn01=5_1 // /page.php // mn01 // 5_1 슬래시를 빼고 구하고 싶다면 basena..

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..

PHP

[PHP] 파일 하나로 여러 개의 페이지 사용하기

(그누보드 관련 포스팅을 할 계획이었는데, 막상 그누보드는 하나도 사용하지 않아서 php로 수정했다.) 일반적으로 웹사이트에서 한 페이지를 제작하기 위해 최소 파일 하나가 필요하다. 가령 index.html 페이지를 화면에 띄우기 위해서는 index.html 파일이 필요하다. 하지만 php와 파라미터를 이용한다면 파일 하나로 여러 페이지를 만들 수 있다. 간단한 예시를 살펴보자. 1번 2번 3번 sub.php 파일을 만들고 위 코드를 입력했다. 그리고 http://도메인/sub.php 페이지로 접속하면 흰 화면만 출력된다. 하지만 내용이 하나도 없는 것은 아니다. 개발자도구를 확인해보면 section 태그가 확인된다. 1번, 2번, 3번 텍스트는 어디로 간 것일까? 나는 위에서 $_GET 을 사용하여 조..

HTML&CSS

[CSS] 16가지 버튼 애니메이션 효과

See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen. 웹사이트를 퍼블리싱할 경우 기획을 바탕으로 디자인한 시안을 그대로 따라서 제작하게 된다. 하지만 기획이나 시안 단계에서는 주로 레이아웃과 컨텐츠 배치에 신경 쓰고, 마우스오버시 어떻게 나타나달라, 클릭시 이런 효과가 있으면 좋겠다라는 요구는 잘 없다. (아예 없진 않다.) 그래서 퍼블리셔의 재량에 따라 버튼 같은 요소에 효과를 추가할 수 있는데 나는 가급적이면 사이트를 새로 제작할 때마다 조금씩 새로운 기능이나 효과를 사용하려고 노력한다. 다음에는 이 codepen에 있는 버튼을 사용해 볼 생각이다.