Lpla 개발 블로그

HTML&CSS

[CSS] Grid를 사용할 때 장점 하나

1. Grid를 사용하지 않을 때 어려운 레이아웃 웹퍼블리셔라면 grid를 사용할 줄 몰라도 한 번쯤 들어는 봤을 것이다. grid가 좋다고는 하는데 과연 어디에 좋은 것일까? grid를 왜 배워야하는지 의문이 드는 사람들을 위해 짧게 글을 쓴다. 디자이너의 시안에 따라 퍼블리싱을 할 때 다음과 같은 레이아웃이 있다고 하자. 시안 A 만약 이것을 코딩한다면 몇 가지 방법이 있겠지만 그중 아래처럼 코딩할 수 있다. See the Pen Gird Layout 없이 by lpla (@lpla) on CodePen. A, B, C, D는 모두 같은 box 클래스를 가지지만 우측에 있는 B, C, D는 wrapper 클래스로 한 번 더 감쌌다. A와 wrapper를 수평 정렬하기 위해서다. 따라서 부모 conta..

JavaScript/실전

[JavaScript] sketch.js로 마우스를 따라 다니는 파티클 효과 구현하기

sketch.js로 마우스를 따라 다니는 파티클 효과를 구현할 수 있다. 공식 사이트는 참고하면 좋고, 코드를 바로 사용하려면 아래 codepen에 있는 코드를 그대로 사용하면 된다. sketch.js 데모 사이트 sketch.js Parallax Mountains Excellent parallax effect from Jack Rugile, using the sketch.js 2d canvas soulwire.github.io 파티클 효과 데모 사이트 sketch.js » Basic Example soulwire.github.io See the Pen sketch.js Demo by lpla (@lpla) on CodePen. 실제 웹사이트에 적용할 때 sketch.js 스크립트를 추가하는 것은 필수다..

HTML&CSS

[CSS]마우스 오버시 글자 반전 효과

See the Pen Invert Text by lpla (@lpla) on CodePen. css의 mix-blend-mode 를 사용하여 반전 효과를 줄 수 있다. 익스플로러에서는 지원하지 않는다. 크로스 브라우징에 관한 자세한 내용은 여기서 확인할 수 있다. "mix-blend-mode" | Can I use... Support tables for HTML5, CSS3, etc Blending of HTML/SVG elements Allows blending between arbitrary SVG and HTML elements caniuse.com

JavaScript/실전

[GSAP] 숫자 카운트 (ScrollTrigger)

GSAP로 숫자 카운트 효과를 만들 수 있다. 1. 해당 요소에 스크롤시 숫자 카운트 See the Pen [GSAP] count - onUpdate by lpla (@lpla) on CodePen. 2. 해당 요소에 스크롤시 숫자 카운트 & 숫자 초기화 See the Pen [GSAP] count - onUpdate & toggleActions by lpla (@lpla) on CodePen. 3. 해당 요소에 스크롤시 숫자 카운트 & 스크롤에 따른 숫자 변화 See the Pen [GSAP] count - onUpdate & scrub by lpla (@lpla) on CodePen. ------- 21.08.28 추가 ------- 4. 소수 자리 표현 See the Pen [GSAP] count ..

일상

최근 느끼는 점

자바스크립트 공부를 한다. -> 프론트엔드 프레임워크를 사용하여 더 멋진 코드를 작성하고 싶은 욕구가 생긴다. -> 리액트 공부를 한다. -> 자바스크립트 문법이 부족함을 느낀다. -> 자바스크립트 공부를 한다. -> (반복)

JavaScript/기초

[JavaScript] 조건문 응용

이 글은 벨로퍼트와 함께하는 모던 자바스크립트의 내용을 공부하고 정리한 글입니다. 05. 조건문 더 스마트하게 쓰기 · GitBook 05. 조건문 더 스마트하게 쓰기 이번에는 조건문을 조금 더 스마트하게 쓰는 방법에 대해서 알아보겠습니다. 특정 값이 여러 값중 하나인지 확인해야 할 때 만약, 여러분이 특정 값이 여러 값 중 learnjs.vlpt.us 1. 특정 값이 참인지 확인하는 상황 function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } isAnimal('개'); // true isAnimal('노트북'); // false 특정 값이 동물인지 확인하는 함수 isA..

JavaScript/실전

[JavaScript] 절대 좌표, 상대 좌표 구하기

HTML CSS html, body { margin: 0; padding: 0; } .box { width: 500px; height: 500px; position: absolute; } .box1 { background-color: bisque; top: 1000px; left: 50%; transform: translateX(-50%); } .box2 { background-color: brown; top: 3000px; left: 50%; transform: translateX(-50%); } box1의 top은 페이지(문서) 기준으로 1000px이다. 하지만 내가 보고 있는 화면을 기준(viewport)으로 좌표를 측정한다면 0px이 될 수도 있고 -1000px이 될 수도 있다. 1. 상대 좌표 ..

PHP

[PHP] 맨땅에 헤딩으로 게시판 만들기 (1)

강의글이 아닙니다. 자신 있는 분야도 아니므로 틀린 부분이 있을 수 있습니다. php로 게시판을 만들고 싶어졌다. php를 정식으로 공부하지 않아서 문법에 많이 약하지만 게시판 커스텀은 수십 차례 해봤기 때문에 충분히 가능할 것 같았다. 그래서 내가 아는 지식을 총동원해서 게시판을 만들어 보기로 했다. 1. 로컬 서버 생성 php를 사용하기 위해 비트나미 로컬 호스트를 만들었다. 이전에 작성한 글이 있으니 참고하면 된다. 그누보드 로컬 설치하기 먼저 구글에 bitnami wamp를 검색하여 다운로드받는다. 글 작성일 기준으로 8.0.0-0이 최신버전이다. 하지만 8.0.0-0은 아직 그누보드에서 제대로 검증되지 않았다. 나는 모르고 8.0.0-0을 설치했다가 그 lpla.tistory.com 2. 게시판..

etc

로컬 호스트에서 phpmyadmin 속도 문제 해결

phpmyadmin이 유독 로컬 서버에서 응답 속도가 많이 느린 문제가 있다. phpmyadmin이 설치되어 있는 폴더에서 confing.inc.php 파일을 아래로 수정한다. [수정 전] $cfg['Servers'][$i]['host'] = 'localhost'; [수정 후] $cfg['Servers'][$i]['host'] = '127.0.0.1'; 그리고 비트나미 서버를 재시작한다. 그리고 다시 phpmyadmin을 접속하면 평소와 같은 속도가 나온다. 참고 : https://community.bitnami.com/t/phpmyadmin-4-8-1-is-very-slow-how-do-i-upgrade-it/61965

JavaScript/기초

[JavaScript] forEach, map, fill

1. forEach forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. forEach는 중간에 멈출 수 없다. for문 const array1 = [2, 4, 6, 8, 10]; const array2 = []; for (let i = 0; i { array2.push(element * 2); }) console.log(array2); // [4, 8, 12, 16, 20] 2. map map 메서드는 주어진 함수를..