728x90 JavaScript97 [React] 리액트로 만드는 슬라이드 SCSS $color-purple: #8B5CF6; $color-pink: #EC4899; $color-gray: #9CA3AF; $color-black: #1F2937; $card-size: 23rem; body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: linear-gradient(45deg, $color-purple, $color-pink); font-family: 'Montserrat', sans-serif; } * { box-sizing: border-box; } .carousel { position: relat.. 2023. 5. 2. [JavaScript] 드래그 가능한 슬라이드 구현하기 HTML mirror works culture news careers contact facebook dribbble instagram SCSS // SCSS mixin to generate the final CSS code for the slider // Params: // - $cssClass: CSS class to match the slider container // - $slider-length: Length (width or height) of slider container // - $slider-center: If slider should be centered // - $slide-width: Fixed width for each slide // - $slide-height: Fixed hei.. 2023. 5. 1. [JavaScript] 마우스 위치대로 따라다니는 효과 주기 HTML 또리 또리 또리 또리 또리 CSS html, body { margin: 0; padding: 0; width: 100%; height: 100vh; background: #161616; overflow: hidden; } .text { position: absolute; pointer-events: none; font-family: venn-extended, sans-serif; font-weight: 700; font-style: normal; font-size: 6em; -webkit-text-stroke: 1px #fff; /*font-weight: 500; text-transform: uppercase;*/ color: #161616; } .text span { color: #fff; }.. 2023. 4. 30. [JavaScript] setInterval() 함수, setTimeout() 함수 setTimeout() 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야 하는 경우에 자바스크립트의 setTimeout() 함수 사용. setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다. ex> 2초를 기다린 후 문자열을 콘솔에 출력하기 setTimeout(() => console.log("2초 후에 실행됨"), 2000); setTimeout() 함수는 세번째 인자부터는 가변 인자를 받는데, 첫번째 인자로 넘어온 함수가 인자를 받는 경우, 이 함수에 넘길 인자를 명시해주기 위해서 사용한다. ex> 두 개의 수를 인자로 받아 더한 값을 출력해주는 add()라는 함수에 인자로 3과 4를 넘겨 2초를 기다린.. 2023. 4. 27. [React] 무한 스크롤 Infinite Scroll 구현하기 infinite(=무한)를 구현하는 infinite.jsx와 그를 불러오는 infiniteLanding.jsx로 나뉜다. infinite.jsx import React, {useEffect, useState} from 'react' import Card from '../utils/card/card'; const Infinite = ({posts, fetching, fetchMoreData}) => { const [postInfo, setPostInfo] = useState([]); useEffect(() => { setPostInfo(posts); }, [posts]) const handleScroll = () => { const scrollHeight = document.documentElement.s.. 2023. 4. 25. [React] 리액트 프로젝트 시작할 때 초기화하기 VS Code사용. create-react-app 설치 및 사용 리액트 프로젝트를 만들때는, 페이스북에서 만든 리액트 프로젝트 생성 도구인 create-react-app 을 사용한다. 프로젝트에 필요한 기능만 딱 들어있다. 1. create-react-app 을 설치하려면 일단 글로벌 설치를 한다. yarn global add create-react-app yarn? 더보기 npm과 yarn은 자바스크립트 패키지 매니저이다. yarn이 npm보다 더 나은 점은 다음과 같이 요약할 수 있다. 1. 속도가 더 빠르다. (performance) 2. 보안성이 좋다. (security) npm은 이름 그대로 '노드 패키지 매니저'이다. 런타임 동안 노드 환경에서 쓰이는 다양한 패키지들을 관리한다. npm은 np.. 2023. 4. 24. [React] Framer-motion 애니메이션 라이브러리 Framer-motion은 Framer가 제공하는 리액트용 애니메이션 라이브러리다. 설치 $ npm i framer-motion 사용법 import { motion } from "framer-motion" motion.div 와 같이, HTML 태그 앞에 motion 키워드를 붙여준다. motion 키워드가 붙은 요소를 motion component 라고 한다. 초기 상태를 initial 속성에 객체 형태로 넣고, 애니메이션 할 상태를 animate 속성에 객체 형태로 넣는다. Transitions import "./styles.css"; import { motion } from "framer-motion"; export default function App() { return ( ); } Orchest.. 2023. 4. 21. [JavaScript] 캐러셀(Carousel) 슬라이더 기능 구현 캐러셀은 여러개의 이미지나 영상을 슬라이더 형태로 만드는 것이다. html,css,js 를 이용하여 만들어보자 HTML prev next 먼저 캐러셀을 넣을 컨테이너와 리소스(예제에서는 이미지) 이전, 다음 버튼을 만들어준다. CSS * { box-sizing: border-box; } .carousel-wrapper { width: 500px; height: 300px; } .carousel-wrapper > .carousel { display: flex; transform: translate3d(0, 0, 0); transition: transform 0.2s; } .carousel-wrapper > .carousel > img { width: 500px; height: 300px; } 넓이 500p.. 2023. 4. 19. [JavaScript] localStorage란? localStorage란? localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있다. 저장한 데이터는 세션간에 공유된다. 즉, 세션이 바뀌어도 저장한 데이터가 유지된다. localStorage를 사용하는 방법 setItem() - key, value 추가 getItem() - value 읽어 오기 removeItem() - item 삭제 clear() - 도메인 내의 localStorage 값 삭제 length - 전체 item 갯수 key() - index로 key값 찾기 localStorage에 아이템 추가, 읽기 setItem() localStorage에 아이템을 추가하기 위해서는 setItem() 함수 사용 window.localStorage.setIt.. 2023. 4. 18. [JavaScript] 스크롤시 한 섹션씩 이동하기 HTML 1 2 3 4 5 6 7 CSS 1 html{overflow: hidden;} 2 3 html, body{width: 100%; height: 100%;} 4 5 .content{ 6 width: 100%; height: 100%; 7 background-color: blueviolet; 8 9 position: relative; 10 } 11 .content > h1{ 12 position: absolute; 13 top: 50%; left: 50%; 14 transform: translate(-50%,-50%); 15 16font-size: 20em; 17 font-weight: bold; 18 text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6); 19 20 } 2.. 2023. 4. 14. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 728x90
