Lpla 개발 블로그

JavaScript/실전

[JavaScript] resize 한 번만 실행

다음 코드를 살펴보자. 이전 시간에 다룬 코드를 그대로 가져온 것이다. [JavaScript/jQuery] 요소 추가, 삭제, 이동 반응형에 따라 요소의 위치를 바꾸려고 한다. css만으로 해결할 수 있다면 좋겠지만 단순하지 않은 레이아웃에서 css로 해결하기 어려운 경우가 있다. 이 때 자바스크립트, 특히 제이쿼리의 도움 lpla.tistory.com 브라우저의 크기를 조절할 때 pcBox() 혹은 mobileBox() 함수가 실행되는 responsiveWidth() 함수이다. 그 결과 아래와 같은 기능을 수행한다. 하지만 브라우저의 크기가 1px이라도 변화가 있다면 즉시 resize 이벤트를 호출하게 되어 브라우저에 과부화를 일으킬 소지가 있다. 이는 콘솔로그를 찍어보면 더 극명하게 드러난다. 이렇게..

JavaScript/기초

[JavaScript/jQuery] 요소 추가, 삭제, 이동

반응형에 따라 요소의 위치를 바꾸려고 한다. css만으로 해결할 수 있다면 좋겠지만 단순하지 않은 레이아웃에서 css로 해결하기 어려운 경우가 있다. 이 때 자바스크립트, 특히 제이쿼리의 도움으로 요소를 재배치할 수 있다. HTML 1번 2번 3번 CSS .box_wrapper { margin-top: 100px; font-size: 40px; } .box { width: 300px; height: 300px; margin: 0 auto; display: flex; justify-content: center; align-items: center; color: #FFF; } .box1 { background: #dc6851; } .box2 { background: #dcae51; } .box3 { back..

PHP

[PHP] 자바스크립트로 php 변수 변경은 불가능

이번 포스팅은 강의나 지식 제공 용도가 아니라 개인 복습용 내용 정리글이다. 자바스크립트를 사용하여 php 변수의 값을 변경하는 것은 불가능하다. php는 서버에서 실행되고 자바스크립트는 클라이언트 pc에서 실행된다. 즉 위 코드를 살펴보면 php가 먼저 실행되고 그 다음에 자바스크립트가 실행되기 때문에 자바스크립트의 조건문은 무시하고 php가 모두 실행된다. 따라서 $box 변수에는 마지막 3 값이 할당된 상태다. 그리고 빈 값을 가지고 자바스크립트 조건문이 실행된다. 만약 자바스크립트로 php 변수를 변경하고 싶다면 쿠키에 저장하여 사용하거나 ajax로 php변수를 전달할 수 있다. 참고 : https://stackoverflow.com/questions/1917576/how-do-i-pass-jav..

그누보드

[그누보드5] Swiper 최신글 만들기

1. 최신글 불러오기 그누보드에서 특정 게시판의 최신글을 불러오는 방법은 다음과 같다. 스킨 이름은 /skin/latest/스킨폴더명을 의미한다. 테이블 이름은 게시판을 생성할 때 짓는 고유 명칭으로 관리자 페이지에서 확인 가능하고 URL로도 알 수 있다. 게시판 스킨은 최신글을 불러오는데 어떤 영향도 끼치지 못한다. 2. 게시판 생성 관리자 페이지에서 게시판을 하나 만든다. 여기서는 newsletter로 만들었다. 게시판을 생성한 다음, 기억해야 할 것은 바로 이 TABLE명이다. 그리고 게시글을 작성한다. 이때 이미지는 첨부 파일 형태로 업로드해야 나중에 읽어 들일 수 있다. 여기선 이런 형태의 게시글을 5개 작성했다. 3. 스킨 추가 /skin/latest/스킨폴더명 경로에 최신글 폴더를 추가한다...

JavaScript/실전

[JavaScript] Swiper 예제 - 3D 입체 효과(coverflow)

Swiper의 effect: 'coverflow'를 사용하여 3D 입체 슬라이드를 만들 수 있다. HTML CSS .swiper-slide { width: 20%; margin-right: 10px; height: 200px; } .swiper-slide.slide01 { background-color: #BE5EC2; } .swiper-slide.slide02 { background-color: #F862A7; } .swiper-slide.slide03 { background-color: #FF7B87; } .swiper-slide.slide04 { background-color: #FFA26A; } .swiper-slide.slide05 { background-color: #FFCE5E; } .swi..

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

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