진행중인 withIT 프로젝트에 모바일 대응을 진행하고 있는데 모바일 메뉴 디자인과 열고 닫는 부분에서 굉장히 많은 시간이 소요됐다. 물론 처음 만드는 거기도 하지만 정말 너무하다 싶을 정도로 삽질이 심했다. 그 중 두 가지가 제일 괴롭혔는데 첫째가 우측에서 메뉴가 나오게 만들 경우, 하단 스크롤이 생기는 문제였고, 둘째가 호출된 메뉴 이외의 영역을 클릭했을 경우 메뉴를 닫는 이벤트 구현이었다. 끙끙댄 삽질에 비해선 갑자기 해결이 되어 글을 남긴다. 우측에서 나올 때 스크롤이 생기는 문제는 메뉴를 왼쪽에서 나오게 함으로써 해결(또는 회피..) 했다..;; 다른 사이트의 구현방식을 보다가 왼쪽에서 나오는 건 스크롤이 안 나오길래 해봤더니 ;;; 왼쪽에서 튀어나올 땐 스크롤바가 생기지 않아서 왼쪽으로 그냥 ..
진작... 진작 사용할 걸 그랬다... 앞으론 무언가 만들려고 할 때 라이브러리를 먼저 찾아보도록 해야겠다.. 꼭... 꼭... ㅠㅠ 너무 많은 시간을 허비했다.
1 2 3 4 5 let text = "ztz@efe.et"; let pattern = /(\w+)@(\w+)\.(\w+)/; console.log(pattern.test(text)); cs 검증할 텍스트 text 선언. 검증 기준이 될 패턴 pattern 선언. test 메소드를 이용하여 text가 pattern을 만족하는지 T/F로 리턴. 정규식의 기본적인 문법만 배우고 혼자 생각해서 만든 거라서 아마 아주 허술한 검증이겠지만 배운걸 응용해서 뭔갈 했다는 게 기쁘다. 아마 여기에 좀 더 정교한 문법이 사용되지 않을까 싶다. 정규식에 대해 더 공부하려 하니 너무 양이 방대해서 우선 이런식으로 사용하는구나 이해하고 넘어가고자 한다. 관련하여 모질라의 정규식 공식 문서와 정규식을 입력하면 시각화해주는 사이..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 clear(); (function getTotalHours() { var totalHours = 0; var ar = document.querySelectorAll("#thumbnail-container #thumbnail " + "#overlays span.style-scope.ytd-thumbnail-overlay-time-status-renderer"); var min = 0; var sec = 0; for(var i = 0; i
