분류 전체보기 81

rolling text number animation (수정 ES6 버전)

해당 소스를 최근에 사용할 일이 있어 차용해보니 jquery가 섞여있어 최신 문법으로 리펙토링 했다 훨씬 코드가 줄어들었고 slide 여부를 동일한 방법으로 작성하고 css transition 유무로 구분지었다 콤마 적용방법도 정규식을통해 미리 콤마를 찍어두고 숫자와 동일하게 롤링시켰다 new source See the Pen rolling text number animation ES6 by soohyeon (@sooh) on CodePen. new RollingNum('.countTest1','123000','slide'); new RollingNum('.countTest2','123000'); function RollingNum(className, number, type) { const speed =..

STUDY/javascript 2021.05.17

pull to refresh 각도설정 추가

github.com/BoxFactura/pulltorefresh.js/blob/master/README.md BoxFactura/pulltorefresh.js A quick and powerful plugin for your pull-to-refresh needs in your webapp. - BoxFactura/pulltorefresh.js github.com 웹앱에 위 플러그인을 추가하여 당겨서 새로고침 기능을 추가했다. 네이티브에서 메뉴 페이지 스와이프기능을 제공하고 각 페이지내에 아래로 당겨서 새로고침 되는 기능 추가! 다음페이지 넘길 목적으로 검지로 스와이프를 할 경우 손가락 방향이 사선이 된다 스와이프시 페이지이동과 pull to refresh가 동시에 일어나 보기싫게 덜렁덜렁 거리게 된다 ..

STUDY/javascript 2021.04.14

React로 달력 스케줄 만들기 삽질 기록

React 생활코딩으로 공부하고 그 기반으로 이전에 퍼블리싱 작업했던 스케줄을 React로 변환하는 스터디를 했다 Javascript로 달력을 계산하고 날짜와 해당날짜의 스케줄을 출력하는 부분까지 잘 구현이 되었다 라고 생각했다 component는 아래 4개로 구성되었다 calendar.js detail.js list.js schedule.js - calendar.js : 달력 table의 tbody부분 출력(날짜부분) - detail.js : 달력에서 날짜를 눌렀을때 상세 Layer 부분 상세에서 이전날 일정/다음날 일정 선택할수 있다 - lists.js : 스케줄 내용 출력. 달력의 스케줄과 상세레이어의 스케줄 공통사항(마크업 똑같음) - schedule.js : 스케줄 메인페이지. 이전달/다음달 이..

STUDY/react 2021.03.22

ipad 에서 input 키보드 이외 다른곳 터치시 키보드 내려가지 않는 현상

20191016 ipad input focus되서 키보드 on 된 후 다른곳 터치시 키보드 내려가지 않는 현상 최초 대응 input, textarea 요소에 focus되고난 후 html터치 스타트시 최초 터치한 input과 새롭게 터치한 요소가 다르면 blur - 이슈발생 : 댓글에서 글 작성후 '전송'버튼 터치시 blur되버리면서 뒷쪽요소 터치됌 - 1번째 수정 : 터치한 요소가 button이면 return --무수한 케이스 발생 $(document).on('focusin',$('input[type="text"],textarea'), function(evt){ var $this = $(evt.target); $('html').on('touchstart',function(e){ var eTagname =..

STUDY/debuging 2021.03.17

맥북 m1 node 세팅기

+ homebrew 설치 - 터미널 옵션-정보가져오기 'Rosetta를 사용하여 열기' /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 오류! Warning: /opt/homebrew/bin is not in your PATH. vi .bashrc 입력 export PATH=/opt/homebrew/bin:$PATH :q 로 빠져나온후 source ~/.bashrc 잘 설치되었는지 확인 brew help + nvm 설치 brew install nvm mkdir ~/.nvm vi .bash_profile 추가 export NVM_DIR="$HOME/.nvm" [ -s "$NVM_D..

Useful Study 2021.02.07

javascript 없이 input radio 별점주기

의미론적으로 input radio로 별점 5개중 1개를 선택하는 마크업으로 구현 별 1개 .. 반복 ~~ 별5개 위 마크업을 기본으로 jquery 없이 css로만 구현 startRadio 의 after 가상태그에 기본 별의 테두리만 색이 채워지고 안쪽은 투명한 이미지 준비한다 이미지는 이것 하나만 사용된다 startRadio 는 안쪽 컨텐츠 개수만큼 커질수 있게 display:inline-block으로 설정 after에 별 높이값만큼 높이 설정후 width값은 지정해 주지 않는다 이렇게 별의 배경 세팅이 되었다. label에 별 width, height 값을 세팅 float:left로 일렬 나열, position:relative : 선택된 별 보다 낮은 개수는 채워질수 있는 기준점 설정 *핵심* star..

STUDY/CSS 2020.03.31