https://html2canvas.hertzen.com/ html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com 이곳에 가셔서 자신이 원하는 방식으로 다운로드하시면 됩니다. https://github.com/niklasvh/html2canvas/releases 저는 github에서 html2 canvas.min.js를 다운로드하여서 불러왔습니다. 다운로드하면 html 파일에 이런 식으로 넣어서 사용하면 됩니다. 아무튼 저 사이트에 들어가면 다운로드하는 방법이 잘 작성되..
오브제 광고를 보다가 제가 스크롤을 내리면 동그라미에 내린 높이만큼 퍼센트가 채워지는 것을 보고 이 기능에 대해 알아보면 재밌겠다고 생각해서 글을 쓰게 되었습니다. 스크롤 시 퍼센트 바 기능 추가 #progressBar { position: fixed; top: 0; left: 0; width: 0; /* 초기 너비는 0으로 설정 */ height: 5px; /* 퍼센트 바의 높이 설정 */ background-color: blue; /* 퍼센트 바의 배경색 설정 */ z-index: 9999; /* 다른 요소 위에 표시하기 위해 z-index 설정 */ } var windowHeight = window.innerHeight; var pageHeight = Math.max(document.body.scr..
HTTP referrer document.referrer는 현재 페이지로 유입된 트래픽의 이전 페이지의 URL을 나타내는 JavaScript의 속성입니다. 이 속성은 HTTP Referer 헤더를 기반으로 하며, 사용자가 링크를 클릭하거나 페이지를 요청할 때 브라우저가 자동으로 설정합니다. 개발자 도구 네트워크 창에 들어가서 네트워크 통신한 것을 확인해 보면, 이런 식으로 요청 header에 저장되게 됩니다. 글로만 보면 이해하기가 조금 애매하니 그림으로 어떤 상황에 사용하면 좋을지 설명해 보겠습니다. 예시 및 설명 A 사이트에서 html 파일로 연결했을 때와 B 사이트에서 html을 연결했을 때 다른 결과 값이 나오게 하기 위해서 document.referrer를 사용하면 됩니다. if(document..
웹 개발을 하면서 확인해야 하는 것이 바로 PC에서의 동작과 Mobile에서의 동작을 확인해야 합니다. 당연히 크기도 변해야 하지만 기능도 동작해야만 개발이 되었다고 할 수 있는데요. 개발을 하다 보니 PC에서는 눌리는데 모바일에서는 터치가 안 되는 현상을 발견하여 이것에 관하여 알아보려고 합니다. 모바일 터치 HTML 속성 값 ontouchstart 터치가 시작되었을 때 발생하는 이벤트입니다. Touch me! ontouchmove 터치한 상태에서 움직일 때 발생하는 이벤트입니다. Drag me! ontouchend 터치가 종료되었을 때 발생하는 이벤트입니다. Touch end! ontouchcancel 터치 이벤트가 취소될 때 발생하는 이벤트입니다. Touch canceled! ontouchenter..
Echats를 사용하여 그래프를 그리고 있는데, 저희가 그래프를 표현하는 곳의 디자인이 굉장히 작아서 그래프도 최대한 크게 만들어 보고, 그래프의 라벨이 작아서 툴팁도 만들어 보았습니다. 어떻게 생성하는지 알아볼까요? 먼저 제가 작성한 글을 읽으면서 echart 사용법을 알아본 후 조건 설정을 해보면 좋겠습니다. https://pabeba.tistory.com/238 JavaScript - ECharts 사용하는 법 그래프를 직접 만들어서 사용하는 것은 대단하다고 생각합니다. 하지만 일을 더욱 효율적으로 하기 위해서 다른 사람들이 만들어 놓은 좋은 소프트웨어를 가지고 일을 진행하면 업무 속도도 빠 pabeba.tistory.com 잘 숙지하셨다면 https://echarts.apache.org/examp..
예전에도 달력 구현을 한 적이 있는데, 에러가 나서 아쉬웠던 적이 있습니다. https://pabeba.tistory.com/12 Javascript - 달력 구현 Javascript를 이용해서 웹 페이지에 달력 구현을 해보았습니다. 개인적으로 너무 어렵기 떄문에 더 자세히 분석을 해봐야겠습니다. 또한, 구현은 했지만 오류가 있는 달이 있어... 우울합니다. 부족 pabeba.tistory.com 이번에는 조금 더 간단?하고 에러가 나지 않게 구현해보려고 합니다. 달력 구현하기(Version. 02) 1. HTML 코드 작성 일 월 화 수 목 금 토 1. jquery를 이용하여 script 함수를 만들었기 때문에 CDN으로 jquery를 다운로드합니다. 2. 월(month)을 변경하는 헤더 부분과..
