일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 이미지에 링크여러개걸기
- js Array 내장함수
- vue 카카오 Maps API
- 카카오 Maps
- node.js이메일보내기
- 변수선언방법
- 텍스트색상반전
- 이미지반전css
- node메일보내기
- iCalendar
- vue Maps API
- json-server 사용하기
- 이미지색상반전
- node.js 로그관리
- 카카오 Maps API
- 모바일 사용자를 위해 올바른 HTML input type
- 텍스트입력 라이브러리
- 이미지에 링크여러개
- 자바스크립트 변수 차이점
- jqueryplugin
- 이미지에 다중링크걸기
- 텍스트서식태그
- plugin
- TypeIt
- 키보드 타이핑 효과
- 의미있는태그
- Array 내장함수
- niceselect사용법
- select플러그인
- json-server 서버설치
- Today
- Total
목록프로그래밍 (29)
ㅇㅅㅇ
유튜브를 둘러보다 발견한 자바스크립트 라이브러리 중 하나 키보드 타이핑 효과를 주는 자바스크립트 라이브러리 TypeIt TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 공식문서에서 말하는 장점으로는 ~4kb의 저용량 의존성 없음 매우 유연한 API SEO 친화적 을 들고 있다. *기본사용방법 여기에 지우고 다시 입력되는 등등의 옵션도 추가할 수 있다. 참고할 결과물은 아래와 같다. (코드펜에 더 좋은 예시가 많이 있으니 필요하면 그쪽을 참고하시길...) *etc 공식문서 하단에 보면 개인 및 오픈소스에는 무료지만 상업적 이용은 유료라고 한다. 용도(?)에 맞춰 잘 사용하자. 알기만 하..
최근에 효과에 관심이 많아져서 찾아보게 되었다. 이미지 혹은 텍스트가 겹칠 때 겹치는 부분이 반전효과로 구분되면 좋겠다 싶어서 찾아봤다. mix-blend-mode라는 혼합모드 설정하는 css를 사용하는 간단한 방법이 있었다. 많은 효과(?)가 있는데 그 중에서 나는 아래것을 사용해 봤다. mix-blend-mode: difference; 적용 전 적용후 (개인작업 중인 페이지에서 캡쳐해왔다.) 비교해보면 알겠지만 겹치는 부분끼리 혼합이 일어났다. (모질라 사이트에서 캡쳐해옴) mix-blend-mode는 여러 효과가 있으니 보고 필요한 효과를 사용하면 될 것 같다. 참고 : https://brunch.co.kr/@skykamja24/524 내가 찾던건 아니지만 알아두면 좋을 것 같아서 모아봤다. fil..
작업할 때 대부분 1개를 넣지만 간혹 2개 이상을 삽입 요청하는 경우가 있어 정리해둔다. (예시는 구글 가이드 사이트에서 발췌) 1개만 삽입할 경우는 아래와 같은데 여기서 2개 이상 삽입이 필요한 경우, 공식문서를 보면 각 페이지에는 전체 사이트 태그 인스턴스가 하나만 있어야 하기에 추가 제품마다 새로운 전체 사이트 태그를 복사하면 성능 문제가 발생하고 코드를 유지하기가 더 어려워질 수 있다고 한다. 해서 이미 소스가 있는 경우 추가할 소스의 config()부분만 가져와 아래처럼 추가하면 된다고 한다. 이렇게 하고 이벤트 추적도 넣어보니 잘 되었다. 참고 : https://amina.co.kr/bbs/board.php?bo_table=apms_qa&wr_id=119381 https://developers..
바닐라 자바스크립트로 스크롤 애니메이선을 고민하며 구글링하다 알게되었다. 사용법도 간단하답 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)..