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