웹밤바

variable.scss : 각 대응할 분기점 설정 // media $mobileSize : 320px; $tabletSize : 768px; $pcSize : 1100px; mixin.scss // mediaquery @mixin respond-to($media) { @if $media == mobile { // mobile @media only screen and (max-width: $tabletSize - 1) { @content; } } @else if $media == tablet { // tablet @media only screen and (min-width: $tabletSize) and (max-width: $pcSize - 1) { @content; } } @else if $media..

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

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

20190415 공통 문자셋이 en으로 되어있어 ko로 변경 수정사항이 없는곳도 다른페이지와 다르게 문자자간이라던지 미세하게 다른부분 발견 en 과 ko의 차이임을 확인

20190423 ...

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 =..

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

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

반응형웹에 적용될 카운트다운 만들기 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 부분이 ..

반응형으로 작업하기위해 vw로 이용했었는데 pc에서 브라우저 사이즈와 video 사이즈가 일치하지 않아 오류 => em으로 작업 html에 font-size를 px로 주고 미디어쿼리로 일정사이즈 이하에서 vw로 변환 비디오사이즈보다 작게 브라우저창을 줄이지 않을거라는 가정하에 나는 pc video width 740으로 주었다 @media only screen and (max-width:740px) { html { font-size: 3.3956vw; } } 단 pc에서 740보다 작게 브라우저를 줄이면 UI는 vw로 변환되어 비디오사이즈는 고정, UI는 유동적으로 변환된다. .play-progress:before { font-size: 1.042em; position: absolute; right: -0..