[HTML] 2

[html/javascript] timepicki를 이용한 시간 선택 기능 구현

0. 배경 자세교정을 detect하여 교정하는 알람을 내세우는 프로젝트 중 알람을 몇 시간마다, 몇 분에, 언제 시작할지 정하는 알람 기능이 필요했다. '시간을 선택할 때 시/분/오전&오후라는 정보를 사용자로부터 멋들어진(?) ui로 받아내는 기능이 없는지 구글링을 해봤다. 처음에는 핸드폰에 있는 알람 앱처럼 다이얼로 돌린다던지, 스크롤 애니메이션을 적용시키고 싶었지만 그러려면 jquery와 이것 저것 다양한 플러그인을 설치해야 한다. 플러그인을 설치하면 웹페이지가 더 무거워져서 할 수 없이 더 간단한 기능으로 구현해보고자 했다. 그렇게 찾아낸 것이 TimePicki.js다. 이런식으로 간단하게 입력하고 데이터를 받을 수 있는 기능이다. 직접 타이핑은 불가하고 오로지 화살표 버튼 클릭을 통해서만 시간 출..

[HTML] 2021.05.14

[html/javascript] 모달 팝업창 구현

진행하고 있는 프로젝트 중에서 웹페이지 내부에 '알림창'을 띄울 수 있는 방법이 있는지 찾아보던 중 이라는 기능을 발견했다. 크롬 알람과는 달리 서버가 필요없이 웹페이지 내부에서 원할때 띄운다는 점, 새창이 아니라는 점이 내가 원하는 기능과 부합했다. 1. 구현 [HTML] 바른 자세란? close 양쪽 어깨와 얼굴이 화면에 모두 위치하도록 자세를 조정해주세요. 가슴과 어깨를 펴고, 턱을 가볍게 안쪽으로 당겨주세요! 모니터와 화면 사이의 거리는 40cm 이상으로 두고, 눈이 모니터의 2/3지점을 바라보게 해주세요! 버튼을 누르면 이미지와 글씨가 나오도록 하는 코드이다. [CSS] button { flex-grow: 1; height: 3.5rem; min-width: 2rem; border: none; ..

[HTML] 2021.05.14