Lpla 개발 블로그

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로 바꿔 쓰고 싶다면 아래처럼 코드를 수정하면 된다. 지금은 마지막과 처음을 연결할 일이 없으므로 사용하지 않는다. 어디까지나 설명을 위해서 ..

JavaScript/실전

Swiper 예제 - Swiper 2개 연동

웹사이트를 만들다보면 Swiper 2개를 연동해야 하는 상황이 발생할 수 있다. 여기서 말하는 연동이란, A 슬라이더를 여러 방법으로 동작할 때, B 스와이퍼도 움직이는 것을 말한다. 마찬가지로 B 슬라이더를 움직이더라도 A 슬라이더가 함께 움직이는 것도 포함한다. 최종 결과물 기본 구조 HTML CSS .swiper-container { width: 600px; text-align: center; } .swiper-container img { width: 100%; } JavaScript var MainSwiper = new Swiper('.main_swiper .swiper-container'); var SubSwiper = new Swiper('.sub_swiper .swiper-container'..

JavaScript/실전

Swiper 예제 - 새로고침할 때마다 순서가 바뀌는 슬라이드

Swiper를 예시 라이브러리로 사용했지만 자바스크립트를 사용하는 기술이므로 다른 어떤 슬라이드도 가능하다. 사전 지식 지난 시간에 여러 가지 방법으로 랜덤 이미지를 구현하는 방법을 알아봤다. [JavaScript] 랜덤 이미지 보여주기 자바스크립트로 랜덤 이미지를 보여주는 방법에 대해 알아보겠다. 0. 기본값 세팅 HTML CSS html, body { width: 100%; height: 100%; margin: 0; } .container { position: relative; width: 100%; height: 100.. lpla.tistory.com 랜덤 슬라이드도 비슷한 맥락이기 때문에 배운 걸 바탕으로 어렵지 않게 구현할 수 있다. 다만 앞선 랜덤 이미지와 랜덤 슬라이드는 결정적인 차이가 ..

React

[React] ReactJS로 영화 웹 서비스 만들기 (7) 完

ReactJS로 영화 웹 서비스 만들기 (1) ReactJS로 영화 웹 서비스 만들기 (2) ReactJS로 영화 웹 서비스 만들기 (3) ReactJS로 영화 웹 서비스 만들기 (4) ReactJS로 영화 웹 서비스 만들기 (5) ReactJS로 영화 웹 서비스 만들기 (6) 이번 시간에는 라우터의 기본 기능을 익히며 리액트 기초 강의를 마무리하도록 하겠다. 라우터 설치 및 준비 라우터는 한 페이지 내에서 명령에 따라 필요한 컴포넌트를 불러오는 형태를 말한다. 우리는 2개의 라우터를 만들 것이다. 이전 시간까지 만든 영화 페이지를 Home 탭에, 사이트를 소개하는 내용을 About 탭에 만드는 것이 목적이다. npm i react-router-dom으로 라우터를 설치한다. 그리고 src폴더 안에 com..

JavaScript/실전

[JavaScript] 랜덤 이미지 보여주기

자바스크립트로 랜덤 이미지를 보여주는 방법에 대해 알아보겠다. 0. 기본값 세팅 HTML CSS html, body { width: 100%; height: 100%; margin: 0; } .container { position: relative; width: 100%; height: 100%; } .img_box { width: 100%; height: 100%; position: relative; left: 50%; transform: translateX(-50%); background-repeat: no-repeat; background-size: cover; } 먼저 HTML에는 container와 img_box 클래스로 된 요소 2개를 만들고 하단에 제이쿼리를 불러온다. 그리고 CSS는 각자 ..