728x90 반응형 Front-end100 [Jquery] 마우스 휠& 드래그 이미지 zoom & translate _ 라이브러리X 참고 링크 웹 서핑을 하다 보면 마우스 휠로 줌 인 아웃 많이 해봤을꺼다. 라이브러리를 사용하지않은 코드 😎 import 😎body 😎css #container{ width:500px; height:300px; overflow:hidden; } #slide{ width:100%; height:100%; transition: transform .3s; } img{ width:auto; height:auto; max-width:100%; pointer-events: none; } 😎script $(document).ready(function (){ var scroll_zoom = new ScrollZoom($('#container'),5,0.5) }) //The parameters are: // //cont.. 2022. 11. 10. [Jquery] Sortable 라이브러리 사용하여 리스트 드래그 앤 드롭 만들기 Todo List / table List 등 다양한 리스트들 있습니다. 리스트들을 드래그 해서 순서를 변경하는 코드 소개합니다 Sortable 라이브러리 사용했습니다. 기본적인 리스트를 마지막버튼을 드래그 하여 초록색 점이 2번째로 이동! 😎 CDN //드래그 & 드롭 Sortable.create(listWithHandle, { handle: '.my-handle', animation: 150, // Element dragging ended onEnd: function (e) { //드롭했을때 이벤트 실행 var itemEl = e.item; // dragged HTMLElement console.log(e.newIndex+1); updateSort(); } }); updateSort()함수를 만들어 리.. 2022. 11. 2. [React] client IP / userAgent 정보 받기 외부 라이브러리 사용 하여 클라이언트의 IP 정보를 가져 옵니다. const [ ip , setIp ] = useState(); useEffect( () => { axios.get('https://geolocation-db.com/json/') .then((res) => { setIp(res.data.IPv4) }) },[]) userAgent 정보는 MDN 기본 반찬인 navigator로 출력 가능합니다. const userAgent = window.navigator.userAgent 2022. 10. 6. [React] 다국어 기능 적용하기 react-i18next 홈페이지에 버튼 클릭으로 다국어를 지원하는 코드입니다. 리액트 기반이며 라이브러리로 i18next 사용했습니다. 위 이미지처럼 클릭시 언어가 변경 됩니다. 폴더 구조 입니다. 😎 src > utiles > i18n > locales > en-US > index.js import page from './page.json' export default{ page } 😎 src > utiles > i18n > locales > en-US > page.json { "소개":"Intro", "인사말":"Greeting", "사업 소개":"BusinessInfo", "참여 기관":"Agency", "데이터":"Data", "안심":"Safe", "분석":"Analysis", "구역":"Zone", "마켓":"Mark.. 2022. 10. 5. [React-spinner] loading spinner 적용하기 axios interseptor 참고 git npm i react-spinners spiner적용 component를 하나 만들엉줍니다. - loading.js import React, { useEffect} from 'react' import { css } from "@emotion/react"; import BeatLoader from "react-spinners/BeatLoader"; const override = css` display: block; margin: 0 auto; border-color: rgba(255,255,255,0.7); border-width: 10px; `; const Loading = (props) => { const check = props.loading == null ? false : props.l.. 2022. 9. 27. [React] Canvas 사이즈에 맞춰 이미지의 원본 비율로 출력하기 const imgOnCanvas = (imageSrc) => { if (!canvasRef) return; const canvas = canvasRef.current; const ctx = canvasRef.current.getContext("2d"); setCanvas(canvas) setCtx(ctx); const image = new Image(); image.src =imageSrc image.onload = function() { console.log("-------------------------"); //입력 파일의 크기를 알아냄 let inW = image.width; let inH = image.height; console.log("[1]image 원본 - size",inW,inH); /.. 2022. 9. 23. [canvas] canvas 에 그려진 그림/이미지 리셋 하기 ctx2.clearRect(0,0,reCanW,reCanH); ctx2.beginPath(); clearRect 에서 4개의 element는 필수 입니다. ctx.clearRect(top , left , 넓이 , 높이); 그린 rect들을 클리어 하고 새로운 이벤트 활성화 가능합니다. 2022. 9. 23. [React] Canvas 레이아웃 2개 겹치기 제가 진행하는 개발코드는 하나의 캔버스엔 이미지를 출력해주고 그 위에 똑같은 사이즈의 캔버스에 클릭이벤트가 생성 됩니다. 캔버스 한개로 이벤트 생성 가능하나 클릭 이벤트시 활성화된 곳이 변경 되는 이벤트여서 캔버스의 리셋이 필요했습니다. canvas 2개 를 css로 간단하게 겹치기 가능합니다. onBboxCanvas(e)} > .leftBox{ position: relative; } .leftBox .canvas{ position: absolute; top:0px; left:0px; } 2022. 9. 23. [CSS] overflow-y:scroll 디자인하기 스크롤 디자인 변경하는 CSS overflow-y:scroll로 스크롤 사용 가능하다. 기본 스크롤도 충분히지만 쫌더 통일성 있는 디자인을위해 스크롤 색상과 모양 디자인을 변경하는 CSS를 추가했다 이미지 표의 오른쪽 스크롤 이다. .accodient-box{ overflow-y: scroll; } .accodient-box::-webkit-scrollbar { width: 10px; /* 스크롤바의 너비 */ } .accodient-box::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #848484; /* 스크롤바의 색상 */ border-radius: 10px; } .accodient-box::-webkit-scrollbar-track { background.. 2022. 9. 23. 이전 1 2 3 4 5 6 7 ··· 12 다음 728x90 반응형
