Dev's

input과 같이 폼에 값을 입력하게 될 경우 모바일 단말에서 각 상황에 맞는 가상 키보드가 표시된다. type 속성 값에 따라 모바일 단말에서는 활성화되는 가상 키보드가 변경되지만, inputmode 속성 값을 추가하여 type 속성 값과 별개로 가상 키보드의 형식을 지정할 수 있다. 속성 값 none 가상 키보드를 제공하지 않는다. 키보드를 직접 구현하는 경우 사용할 수 있다. text 기본값으로 제공되며, type 속성 값에 따라 제공되는 가상 키보드가 표시된다. decimal 소숫점(, .)을 제공하는 숫자형 가상 키보드가 표시된다. 또한 단말기에 따라 음의 부호(-)를 표시하는 가상 키보드가 제공될 수도, 아닐 수도 있다. numeric 숫자형 가상 키보드가 표시되며, demical과 마찬가지로..

모바일 단말에서 브라우저의 Orientation 변경을 감지하여 처리할 경우 orientationchange를 등록하여 사용할 수 있다. window.addEventListener('orientationchange', function() { console.debug("orientation 정보: ", screen.orientation); }); 참고 자료 https://developer.mozilla.org/ko/docs/Web/API/Window/orientationchange_event

HTML5에서 제공하는 Geolocation API을 사용하여 사용자의 위치정보를 가지고 올 수 있다. 모바일 단말에서는 GPS를 이용하여 사용자 위치를 가지고 올 수 있으나, GPS보다는 정확하지 않아도 GPS를 이용할 수 없는 환경에서는 Geolocation API를 이용하여 사용자 위치 정보를 가지고 올 수 있으며, 해당 API는 HTTPS에서 작동한다. 브라우저별 지원 여부 Geolocation API를 지원하는 브라우저별 지원 여부는 아래와 같다 위치정보 getCurrentPosition()를 사용하여 사용자의 위치를 가지고 올 수 있다. const display = document.getElementById("display"); function showPosition(position) { di..

개요 CSS3에서는 transition, animate 속성을 부여하여 애니메이션 효과를 줄 수 있습니다. 이벤트 리스너에 이벤트를 등록함으로써 transition, animate 애니메이션 효과가 완료된 후 이벤트를 호출할 수 있습니다. TransitionEnd transitionend는 transition 효과가 완료된 후 이벤트를 발생시킵니다. 사용법 이벤트 리스너에 transitionend를 등록하여 사용할 수 있습니다. const dom = document.getElementById('dom'); dom.addEventListener('transitionend', function() { console.debug('transitoinend'); }); 각 브라우저별 prefix를 붙여서 사용할 수..

개요 프로젝트 개발을 진행하다 보면 데이터를 저장해야 하는 경우가 생깁니다. 이런 경우 브라우저에서 제공하는 LocalStorage와 SessionStorage 두 가지 중 데이터가 지니고 있는 특성에 맞는 것을 선택하여 사용할 수 있습니다. LocalStroage vs SessionStorage 두 저장소는 데이터를 저장한다는 공통점을 가지고 있으나, 데이터의 지속성에 대한 차이점이 있습니다. LocalStorage에 저장된 데이터는 만료 기간이 없으며 브라우저가 닫혀도 데이터는 지속된다는 특징을 가지고 있으나, SessionStorage는 브라우저 종료시 데이터가 모두 사라지게 됩니다. 사용법 localStorage.setItem() key-pair 형태로 데이터를 저장소에 저장합니다. 저장소에 저장..

개요 window.location은 사용자가 페이지에 대한 정보를 전달해주며, 페이지 이동과 같은 역할을 수행합니다. 또한 window없이 location만으로도 사용할 수 있습니다. http://localhost:3000/my-watch?activeMenu=0#4 location.href; // http://localhost:3000/my-watch?activeMenu=0#4 location.protocol; // http: location.host; // localhost:3000 location.hostname; // localhost location.port; // 3000 location.pathname; // /my-watch location.search; // ?activeMenu=0 loc..