Lpla 개발 블로그

JavaScript/실전

[JavaScript] for문으로 홀수 짝수값 각각 더하기

for문을 사용하여 1에서 20까지 반복하면서 홀수일 경우 홀수끼리 더하고 짝수일 경우 짝수끼리 더한 값을 출력하는 방법에 대해 알아보겠다. 1. 1부터 20까지 for문 작성 for(var i=1; i

HTML&CSS

[CSS] 물결 버튼 효과

See the Pen 물결 버튼 by lpla (@lpla) on CodePen.

JavaScript/기초

[JavaScript] 단항 연산자

용어 정리 단항 연산자를 공부하기 전, 용어를 먼저 이해해야 한다. 더하기, 빼기, 곱하기, 나누기 등을 ‘연산’이라고 한다. 자바스크립트에서 지원하는 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%), 거듭제곱(**)이 있다. 피연산자는 연산자가 연산을 수행하는 대상이다. 1 + 2에서 1과 2가 피연산자이다. 그리고 1 + 2는 피연산자가 2개이므로 이항 연산자라고 한다. 한편 피연산자가 하나인 경우를 단항 연산자라고 한다. 단항 +연산자 값 앞에 + 기호를 작성하여 해당 값을 숫자(number) 타입으로 변환한다. var Nine = '9'; console.log(typeof Nine);// string console.log(typeof +Nine);// number 단항..

JavaScript/기초

[JavaScript] 데이터 타입(자료형) 종류

자바스크립트의 모든 값은 데이터 타입을 갖는다. 숫자(number) 문자(string) 불리언(boolean) 널(null) 정의되지않음(undefined) 심볼(symbol) : ES6에서 추가됨 객체(object) 1. 숫자(number) 자바스크립트의 숫자 타입은 배정밀도 부동소수점을 따른다. 여기서 생기는 문제점은 다음과 같다. console.log(0.1 + 0.2 == 0.3); // false 0.1+0.2가 0.3과 동일한지 확인했을 때 false를 출력한다. console.log(0.1 + 0.2); // 0.30000000000000004 실제 자바스크립트에서 0.1+0.2는 0.30000000000000004이다. 만약 정확한 계산이 필요한 작업이라면 이대로 값을 반환해선 안된다. 어..

JavaScript/기초

[JavaScript] script 태그 위치와 defer

자바스크립트는 html의 어디에 위치하는게 좋을까? 자바스크립트는 head 안에 혹은 body 위쪽에 script1.js document.body.prepend('script1.js'); console.log('script1.js'); script2.js document.body.prepend('script2.js'); console.log('script2.js'); script3.js document.body.prepend('script3.js'); console.log('script3.js'); script1.js 와 script3.js 는 head에 있고 script2.js 는 body 에 있다. 결과 script1.js 와 script3.js 는 body가 생성되기 전에 실행되기 때문에 에러가 발..

JavaScript/기초

[JavaScript] 비동기와 콜백 - 쉽게 이해하기

비동기와 콜백을 깊이 공부하고자 하는 분에게는 맞지 않은 포스팅입니다. 1. 비동기 비동기와 콜백, 자바스크립트를 2년 가까이 공부하면서 나에게 가장 어려운 개념이었다. 용어가 생소하고 각종 사이트를 찾아봐도 한 문장으로 설명해주는 곳이 없었기 때문이다. 사실 이 두 개념을 몰라도 보통 난이도 이하의 자바스크립트 코드를 짜는데 별 어려움이 없었다. 이유는 알 수 없지만 함수를 찾을 수 없다는 에러 메시지가 뜬다? 혹은 실행 순서가 꼬인다? 그렇다면 함수 위치를 바꾸거나 요소가 존재할 때 실행되도록 하거나, 편법으로 setTimeout을 사용하면 대체로 해결됐다. 나는 비동기와 콜백을 잘 사용하는 것이 아니라 이것들이 대체 무엇인지 알고 싶었다. 따라서 이 글은 비동기와 콜백을 어느 정도 알고 있다면 시간..

JavaScript/실전

[GSAP] 애니메이션 ScrollTrigger - 자주 묻는 질문

gsap의 자주 묻는 질문 중에 몇 가지를 간추려 정리해봤다. Most Common ScrollTrigger Mistakes Are you guilty of any of the most common mistakes people make in their ScrollTrigger code? Creating to() logic issues Nesting ScrollTriggers inside multiple timeline tweens Using one ScrollTrigger or animation for multiple sections Forgetting to use functi greensock.com 1. 애니메이션이 뷰포트 중간에서 시작하고 화면을 벗어나면 초기화하고 싶습니다. GSAP는 스크롤트리거..

JavaScript/실전

[GSAP] 애니메이션 사용법 (중급 - ScrollTrigger)

지난 시간에 GSAP로 애니메이션 효과를 만드는 법을 공부했다. 하지만 어떤 애니메이션 효과를 만들지 만큼 중요한 것이 언제 효과를 보여줄 것인가이다. 내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다. 그렇기 때문에 ScrollTrigger가 중요하다. 설치 공식 사이트 혹은 CDN 혹은 npm 등 편한 방법으로 ScrollTrigger.js나 ScrollTrigger.min.js 를 다운로드한다. Docs Documentation for GreenSock Animation Platform (GSAP) greensock.com gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life..

JavaScript/실전

[GSAP] 애니메이션 사용법 (기초)

GSAP? GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다. 하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나이다. GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장한다. 하지만 초보자들에게 그 간단한 사용법 조차도 어렵고 헷갈리는 것이 사실이다. 공식 사이트에서 배워보려 해도 방대한 문서 양에 어디서부터 시작해야 할지 막막하다. GSAP를 배우려는 목적은 멋진 애니메이션 효과를 구현하고 싶기 때..

etc

[SVG] 애니메이션

SVG SVG로 애니메이션 효과를 만들어보도록 하겠다. 내가 원하는 결과물은 아래와 같다. 먼저 svg파일을 다운받거나 만들어야 한다. 나는 일러스트레이터 패스툴로 금방 그렸다. HTML Asset 2 먼저 svg를 HTML에 붙여넣는다. 코드가 길지만 결국에 선을 나타내는 건 이다. 는 그룹(group)의 약자로 여기선 사용할 일이 없으므로 지워도 상관 없다. Polyline, Path Polyline과 Path는 큰 차이가 없다. 곡선을 나타낼 때 Polyline이 Path보다 더 많은 개수가 사용된다고 하나 크게 의미 없다. 혹시라도 polyline를 path로 바꿔 쓰고 싶다면 아래처럼 코드를 수정하면 된다. 지금은 마지막과 처음을 연결할 일이 없으므로 사용하지 않는다. 어디까지나 설명을 위해서 ..