웹밤바

css conic-gradient를 이용한 도넛그래프 아래 블로그를 참고했으며 data추가하여 유동적으로 사용할수 있도록 수정했다 https://guiyomi.tistory.com/66 CSS로 직접 그래프 만들기(bar, donut 그래프) + 애니메이션 효과 추가 보통 웹 개발을 할 때 그래프를 다룰 일이 생기면 라이브러리를 찾아서 사용하곤 했다. 이번에도 라이브러리를 이용하여 도넛 그래프 8개를 2행 4열로 배치하는 화면을 만드는 작업을 하게 됐는 guiyomi.tistory.com See the Pen 다중 도넛 그래프 by soohyeon (@sooh) on CodePen. .donut { position: relative; width: 300px; height: 300px; border-rad..

fixed로 화면 하단에 따라다니는 input창이 있는 UI ios특성상 하단에 input이 있으면 focus 했을 때 키보드가 올라가면서 화면을 보고 있던 디바이스 너머로 밀어 올려 보낸다 이슈 - 간헐적으로 키보드가 인풋 창을 덮어서 보이지 않는 현상 - 내가 보고 있던 화면을 위로 올려버려서 시선을 잃는 현상 ios의 키보드를 올렸을때 화면 처리방식이 너무나 까다로워 검색하던중 '채널톡'이라는 서비스의 ios대응기 게시글을 참고했다. https://channel.io/ko/blog/cross_browsing_ios15 다만 내가 표현하고 싶은 부분과 다른점은 채널톡은 최신대화가 하단에 보여지기 때문에 최하단 화면으로 갱신해주면 되지만 나의경우 보고있던 화면을 이동시키지 않는것이 큰 차이점이였다. 아..

let a = [] let b = ['바나나', '딸기', '복숭아'] a.push(b) a.push(b) => [['바나나', '딸기', '복숭아'], ['바나나', '딸기', '복숭아']] 원하는건 ['바나나', '딸기', '복숭아', '바나나', '딸기', '복숭아'] a = [...a, ...b] spread operator를 이용한다

링크에 mouse over 했을때 a 링크의 href를 ireame에 append 해준다. mouse leave 일경우 append 되어있는 iframe을 지워준다. 한번에 로딩하면 로딩속도가 느려지기 때문에 각 필요할때 불러주는 형식이 알맞았다. $('a').on({ mouseenter :function(){ var $this = $(this); var href = $this.attr('href'); var html = ''; $this.append(html) }, mouseleave : function(){ $(this).find('.sitemapIframe').remove(); } }) iframe에 href로 링크만 불러올경우 불러온 컨텐츠가 ifeame에 너무 크게 보이게 된다. iframe에 ..

해당 소스를 최근에 사용할 일이 있어 차용해보니 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 =..

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가 동시에 일어나 보기싫게 덜렁덜렁 거리게 된다 ..

var vid = document.getElementById('video'); vid.webkitExitFullscreen();

반응형웹에 적용될 카운트다운 만들기 W3C에 소개되어있는 카운트 다운 소스를 이용해 진행중인 프로젝트에 적용하였다 일단 var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime(); 이 부분을 개발에서 지정된 날짜로 넣어주면 그 날짜를 읽어 카운트 해 주는 방식으로 바꾸고 var dday = $(".mainBnr__timer").attr('data-dday'); var yy = dday.substr(0,4); var mm = dday.substr(4,2); var dd = dday.substr(6,2); var hhmmss = dday.substr(8,2)+':'+dday.substr(10,2)+':'+dday.substr(12,2); 저 mm 부분이 ..

photoswipe로 이미지 뷰어를 사용하고 있는데 tablet 테스트중 ipad mini2 구형기계에서 회전시 반응이 느려 resize 오류가 발생되었다 1. 화면 회전후 $(window).trigger('resize') 를 해봤는데 반응없음. 2. @medea query로 디바이스 width, height 넣고 회전시 높이, 넓이 재 지정 반응은 있지만 위치가 자기 마음대로 아무데나 가있음.. 3. 2번후 javascipt로 회전체크해서 0.1초후 resize해줌 var styleNode = document.createElement('style'); styleNode.type = "text/css"; var $win = $(window); var winWidth = $win.width(); var w..

swiper js버전 See the Pen swiper 선택요소 중앙정렬 by soohyeon (@sooh) on CodePen. 스크롤 버전 선택된 요소가 박스의 중앙정렬 될수있도록scrollLeft값 조작 listWidth : 요소 전체 길이boxHarf : 스크롤될 부모요소 가로값의 절반 (중앙정렬 기준)targetLeft : 선택된 요소의 position left 값selectTargetPos : targetLeft + 선택된요소 중간값 var selectTargetPos = (targetLeft + target.outerWidth()/2);if (selectTargetPos