ㅇㅅㅇ

바닐라 자바스크립트로 스크롤 애니메이선을 고민하며 구글링하다 알게되었다. 사용법도 간단하답 window.scroll({ top: 0, left: 100, behavior: 'smooth' }); top:창이나 요소를 스크롤하기 위해 Y축을 따라 픽셀 수를 지정 left : 창이나 요소를 스크롤하기 위해 X축을 따라 픽셀 수를 지정 behavior : 스크롤 애니메이션 설정(auto: 기본값, 즉시실행 / smooth : 부드럽게 스크롤 애니메이션) 공식문서를 보면 Window.scroll()뿐만 아니라 Window.scrollTo(),Window.scrollBy()에서도 적용가능하다고 한다. 참고: https://developer.mozilla.org/en-US/docs/Web/API/Window/scr..

스크롤바를 커스텀 할 때 주로 사용하는 플러그인 매번 찾아보게 되서 자주 사용하는 것들만 적어본다 사이트는 여기▼ jQuery custom content scroller – malihu | web design Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQue manos.malihu.gr 기본 사용방법 ..

niceSelect 기본 사용법은 아래의 포스팅에 정리되어 있으니 생략한다. [JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법1 코딩을 하다보면 select를 수정하게 될 때가 있는데 css로 수정할 수 없는 영역이 있어 플러그인 niceSelect의 힘을 빌리게 되었다. 사용법 1. 아래의 링크에서 소스파일을 다운받는다 https://jquerynicesel soa-memo.tistory.com 응용이랄까 추가작업이 필요한 경우에 사용했던 소스 2가지를 정리해 본다. 1. niceSelect 사용 후 optionbox의 스크롤을 추가할 경우 1-1. .nice-select .list에 높이 제한을 두면 스크롤이 생긴다. .nice-select .list { height:..

코딩을 하다보면 select를 수정하게 될 때가 있는데 css로 수정할 수 없는 영역이 있어 플러그인 niceSelect의 힘을 빌리게 되었다. 사용법 1. 아래의 링크에서 소스파일을 다운받는다 jQuery Nice Select Usage 1. Include jQuery and the plugin. 2. Include the plugin styles, either the compiled CSS... ...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization. @import 'nice-select'; // Or 'nice-select-prefixed'. jquerynicesel..

react공부를 시작하는데 오류가 났다..ㅋ.. 1번째를 오류를 한국어 번역으로 돌려보니 지원되지 않는 "react-dom"에서 createRoot를 가져오고 있습니다. 대신 "react-dom/client"에서 가져와야 합니다. 라고한다. .. 구글링을 통해 방법을 찾았다. JavaScript와 TypeScript 방법이 다르던데 나는 JavaScript 방법으로 수정해였다. - 수정전 //index.js import React from 'react' import ReactDOM from 'react-dom' import reportWebVitals from './reportWebVitals' import App from './App' const rootNode = document.getElementB..

어쩌다 음원재생 버튼을 만들 기회가 있어서 정리해봤다. 1. html 음원재생 정지 음원재생과 일시정지는 한 버튼을 사용한다. 음원재생 버튼을 누르면 음원이 재생되고 재생중에 한번더 음원재생 버튼을 누르면 일시 정지된다. 정지를 누르면 처음으로 돌아가 음원재생 버튼을 누르면 처음에서부터 재생된다. 2. js var audio = document.getElementById("video"); $(function(){ $('.play').on('click', function(e){ e = e || window.event; var btn = e.target; if (!audio.paused) { //일시정지 audio.pause(); isPlaying = false; } else { //재생 audio.play..

웹, 모바일에서 사용 가능하다. 스크롤 처음과 끝을 감지해 모션을 만들게 되는 경우가 있어 정리하게 되었다. jquery로 처음과 끝만 감지되는지 확인 할 수 있게 만들었다. (참고로 가로스크롤이다.) 1. html 스크롤 박스 스크롤 위치 2. css .scrollwrap { position: relative; display: block; width:200px; overflow-x: auto;} .scrollcontent { width: 1000px; } 3. jquery function showGradient(){ if($(this).scrollLeft() == 0){// 스크롤이 0일 때 $('.scrolllo').text('스크롤 처음입니다.'); }else if (Math.ceil($(this)..

웹 작업 시 이미지 회색처리를 해본 사람들은 알겠지만 IE에서는 filter: grayscale(100%)가 되지 않는다.ㄱㅡ 해서 열심히 구글링해서 방법을 찾았다. 검색할때마다 앞서 나간 선조님들께 감사드린다.ㅜ 내가 사용한건 Cross-Browser Grayscale image example using CSS3 + JS 이다. * 1버전 Cross-Browser Grayscale image example using CSS3 + JS by Streamline www.majas-lapu-izstrade.lv * 2버전 Cross-Browser Grayscale image example using CSS3 + JS v2.0 with browser feature detection using Modernizr..

퍼블리셔가 마케팅 직원이 아니니 이런건 몰라도 상관없지 않을까 싶지만 작업하다 보면 홍보 혹은 소개 사이트를 만들게 되고 이 경우 검색엔진 최적화를 무시할 수 없게 된다. 메타 테그의 사이트 제목과 설명을 기획자 혹은 업체에 요청하게 될 때 이 것에 대해 모르다면 설명해줘야 할 일도 생긴다.(글자 제한이나 작성 팁 같은...) 그럴때마다 참고하도록 올려본다. 구글 : support.google.com/webmasters/answer/7451184?hl=ko 검색엔진 최적화(SEO) 초보자 가이드 - Search Console 고객센터 이 가이드는 어떤 사람을 대상으로 하나요? 온라인 콘텐츠를 소유 또는 관리하여 수익을 창출하거나 Google 검색을 통해 온라인 콘텐츠를 홍보하시나요? 그렇다면 이 가이드를..

! 티스토리 블로그가 아직 익숙하지 않은 블로거라 여러모로 어색할 수 있습니다ㅜㅅ ! 이유없는 비난외의 잘못된 부분에 대한 조언이나 후기 등의 덧글은 환영합니다.ㅎ 업무에 실제로 사용한 소스다. 업로드한 사진에서 얼굴만 잘라 쓸 수 있도록 하는 플러그인이 필요해 찾아보게 되었다. 사진업로드 -> 업로드한 사진에 cropper.js 실행 -> 업로드 버튼 클릭 시 크롭된 사진이 보이게끔 했다. 플러그인은 제목에 썼지만 cropper.js를 사용했다. Cropper.js fengyuanchen.github.io (올린 링크로)1.5.7버전으로 들어가면 몇 가지 예시를 볼 수 있고, 작성일 기준, 현재까지 4.1.0버전까지 나온거 같다. cropper.js에서 지원하는 옵션에 따라 낮은버전을 사용하면 작동이 ..