본문 바로가기

Local Oriented/HTML CSS JS

(99)
Axios post 시 파라미터 설정 (스프링 쪽 설정) https://sumni.tistory.com/152
input file accept 와 사진/동영상/안드로이드 input 태그에 type 이 file 인 경우, 찾아보기 대상을 조정할 수 있는데.. accept 속성이 이런 일을 함. 그런데, 짧게 기술한다고 accept="image/*" 라고 기술하면.. 애플의 경우 '사진 보관함', '사진 또는 동영상 찍기', '파일 선택', 안드로이드의 경우 '카메라', '카메라/캠코더', '파일' 등을 선택할 수 있게 된다. 여기서, '동영상' 이나 '캠코더' 기능을 없애려면.. 'image/*' 를 없애고, 필요한 이미지의 확장자를 기술하면 된다. accept=".jpg, .png" 애플의 경우 '사진 보관함', '사진 찍기', '파일 선택', 안드로이드의 경우 '카메라', '찾아보기' 등을 선택할 수 있게 된다. 물론, os 버전에 따라 상이할 수는 있다.. Andro..
sly.js 슬라이딩, 현재 몇 번째 슬라이드인지 숫자로 표시 원문 : https://darsa.in/sly/ 'sly' 는 PC 뿐만 아니라 모바일에서 (터치로도) 잘 작동한다.. 그런데... 슬라이딩 하단에 몇 번째인지 표시해 주는 것은 되는데, 숫자로 몇 번째인지 표시해 주려면.. 아무리 원문을 뒤져봐도, 구글링 해도 안 보여서.. 이리저리 해 보다가 결국 아래와 같이 해결. document 의 event 에 보면 'active' 이벤트에서 itemIndex 가 딱인듯 한데. 아니다, 항상 '0' 이라고 세팅된다. ㅎㅎ 찾아낸 답은, pos.dest 가 화면에 표시할 위치값 이고, 각 요소의 폭(rel.frameSize)이 일정할 때 이를 나눠 주면 몇 번째 인지 알 수 있는 것. 이를테면, 각 요소의 폭이 300pixel 이라면, pos.dest 는 0, 3..
table 상하좌우 스크롤(슬라이딩)시 특정 부분 위치 고정 원문 : https://www.codingfactory.net/13033 예전에는 자바스크립트로 프로그래밍 해 주던 영역인데, position:sticky 속성을 지원하는 CSS 에서는 간단하게 구현이 됩니다. 원문에서는 하나의 테이블에 대해서만 다루었는데, 위 아래로 여러 테이블이 있는 경우에는 id 가 아니라 class 방식으로 바꾸면 정상 작동합니다. 그러면, 이제 응용편을 하나 예로 들어 봅니다. 좌우 스크롤이 되는 table 인데.. (물론, table 을 감싸는 div 에 overflow-y:hidden 적용) 상단 칼럼은 colspan 으로 셀병합(엑셀 용어.. ㅋ)되어 있고, 칼럼이 많아서 좌우 스크롤 해야 하는데.. 상단 칼럼의 내용이 스크롤 할 때 계속 보여져야 한다면...? 간소하게 ..
(모바일)웹 화면에서 서명을 받아 서버에 업로드.. 일단, 미션이 떨어지고 서명받는 방법을 찾아 보았다. canvas 라는 html 태그를 사용하여 서명받는 방법은 쉽게 찾았다.. https://szimek.github.io/signature_pad/ 그런데, 서명 받은 이미지를 서버에 업로드 해야 하는데, 상기 url 은 로컬에 다운로드 받는 내용.. 로컬에 서명한 이미지를 저장하고, 이걸 다시 찾아서 input.type="file" 에 넣는 식이면 불편. 그래서, 이리저리 찾아 보다가 서버에 업로드 하는 방법도 찾았다. http://hacks.mozilla.or.kr/2011/01/html5-이미지-업로더-개발-방법 그런데, multipart/form-data 를 이용한 방법을 고집해서, form 태그의 input type="file" 에 넣으려고 하..
자바스크립트 최적화 (성능 개선) https://velog.io/@wishtree/Javascript-성능-최적화를-둘러싼-고민들 https://velog.io/@godori/JavaScript-프로그램-성능-향상
동일 사이트 내에서의 SameSite 문제 유감 동일 사이트 내부를 통해, https 에서 http 로 전환할 때는 쿠키와 세션 관계가 유지, http 에서 https 로 전환할 때는 쿠키와 세션 관계가 끊김(동일 사이트 내에서 이러고 있음). (2021.06.04 현재 기준. 향후 또 어떻게 바뀔지 누가 알랴..) 예를들어 http://abc.com/a.jsp 가 https://abc.com/b.jsp 호출시, a.jsp 에서 세팅한 세션 정보가 b.jsp 에서 참조되지 않음. 만약, https://abc.com/a.jsp 가 http://abc.com/b.jsp 호출시, a.jsp 에서 세팅한 세션 정보는 b.jsp 에서 참조할 수 있음. 동일 사이트 내에서의 http 와 https 전환임에도 이런 문제가 발생하는 것은, 크롬이나 동일 소스코드를 ..
iOS 에서 alert 와 confirm 작동 오류..? iOS 의 사파리 웹브라우저에서는 alert 와 confirm 이 modal 로 작동하는데, iOS 에 설치된 특정 앱에서는 alert 와 confirm 이 modaless 로 작동하기도 하네요.. 무슨 말이냐 하면, alert 나 confirm 이 실행되면 화면이 멈추고(block) 사용자가 확인이나 취소를 터치한 후에 다음 코드가 실행되는 것이 기존 프로그래밍의 흐름인데, 마지막 코드까지 모두 실행되고 화면에는 거꾸로 표시가 되는... 마치, 영화 테넷을 보는 듯한.. ㅠ. 아직도 감이 안 잡히신 분이라면.. alert(1); alert(2); 이라고 순서대로 자바스크립트가 세팅되면.. 1이 세팅된 알림창이 먼저 열리고 (확인 버튼을 누르면 1 알림창은 닫히고), 2가 세팅된 알림창이 나중 열리는 (..