반응형 html12 [HTML/JS] 색상 선택 하는 방법, Pickr 사용법 웹에서 색상을 선택해야 하는 경우가 있다.이때, 컬러를 선택하는 방법은 2가지 방법이 있다.HTML Input 요소 활용 화면에서는 위와같은 모습으로 노출이 되고, 코드는 input 타입에 "color"이라고 선언만 해주면 끝이 난다.제이쿼리가 포함만 되어 있다면 쉽게 구현이 가능하고, 기본적으로 색상 선택가능하기 때문에 간단하게 사용하기가 좋다.하지만 브라우저마다 UI가 다르고, 커스터마이징에 어려움이 있다. Pickr 라이브러리 사용 Pickr 라이브러리를 사용하기 위해서는 일단 헤더에 pickr를 선언부터 해줘야 한다.위의 CDN을 사용하여, pickr를 사용할 수 있도록 세팅을 한다 만약 Node.js환경에서 작업 중이라면 npm을 통해 설치를 하여 사용하면 된다.// npm을 통해 설치npm .. 2024. 12. 1. [JQuery] 특정 또는 모든 이벤트 제거 하는 방법 화면을 만들다보면 등록된 이벤트를 삭제해야하는 경우가 있습니다.이때, 이벤트 등록된 이벤트를 삭제하는 방법을 알려드리겠습니다. .off()jquery에서는 이벤트 삭제를위해서는 .off()를 통해서 삭제를 도와주고 있습니다.삭제를 하는 방법에는 4가지 방법이 있는데 아래에 정리해보도록 하겠습니다. 1. 특정이벤트와 핸들러 삭제하기// 이벤트 핸들러 추가function myHandler(event) { console.log('이벤트 실행');}$('#myElement').on('click', myHandler);// 이벤트 핸들러 삭제$('#myElement').off('click', myHandler); 2. 특정이벤트 전체 삭제하기// 클릭 이벤트 삭제$('#myElement').off('clic.. 2024. 11. 28. Uncaught RangeError: Invalid string length 오류 Uncaught RangeError: Invalid string length 스크립트를 작성 중에 위와 같은 오류가 발생했다.해당 오류는 자바스크립트에서 문자열의 길이가 허용된 최대한도를 초과했을 때 발생하는 문제입니다. 즉, 과도하게 String을 길게 나열을 한 것이다.(주인장은 for문으로 너무 많이 돌림...)원인은 다양하겠지만 결론적으로는 과도하게 긴 문자열을 만들었다는 게 문제이다. 이를 해결방법은 간단하게 문자열을 분열을 하면 된다. 추가적으로, 문자열을 반복적으로 연결을 할 때에는 "+" 연산자보다는 배열과 Array.join()을 사용하는 것이 성능이 더 좋다.예를 들면 아래와 같다.let parts = [];for (let i = 0; i 2024. 11. 22. javascript로 평수 계산하는 방법 단순한 일회성으로 평수 계산을 하는 경우,네이버에 "평수 계산기"라는 명을 쳐서 간단하게 사용이 가능합니다. 하지만, 홈페이지를 제작하는 등의 따로 사용이 필요한 경우에는 스크립트로 제작을 해야 하는데, 이때, 제곱미터를 평으로, 평을 제곱미터로 변환하는 간단한 함수를 만들어 보겠습니다. 평수를 계산을 하기 전에 평과 제곱미터 간의 관계를 이해해야 합니다. 1평 = 약 3.305785㎡이를 토대로 스크립트를 만들게 되면, 아래와 같은 스크립트를 만들수 있습니다. 제곱미터를 평으로 변환하는 함수// 제곱미터를 평으로 변환하는 함수function meterToPyeong(squareMeter) { return squareMeter / 3.305785;} 평을 제곱미터로 변환하는 함수// 평을 제곱미터로 .. 2024. 10. 14. html에서 특정 div영역을 이미지로 다운 받는 방법 html을 만들다가보면 한번씩 해당 부분을 그대로 다운을 받고 싶을때가 있습니다. 물론 해당영역이 일시적으로 필요하거나한다면 캡처 프로그램을 써서 그부분만 잘라서 써도 좋겠지만그게 아닌 사이트를 만들거나 하면서 주기적으로 해당 영역을 다운로드해야한다던가 했을 때의 방법을 정리해볼까 합니다. html2canvas html의 특정 영역을 이미지로 다운을 받기위해서는 html2canvas는 브라우저에서 HTML 요소를 캡처하여 캔버스로 변환하는 JavaScript 라이브러리를 사용해야 합니다. 이를 사용하면 DOM 요소를 기반으로 한 이미지를 쉽게 생성할 수 있습니다. 특히 캡처한 이미지를 PNG 형식으로 다운로드할 수 있어, 다양한 웹 애플리케이션에 활용할 수 있습니다. 구현방법 .. 2024. 10. 7. Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob Input을 통해 이미지를 업로드하는 과정에서, 발생되는 오류이다. 이미지가 정상적으로 업로드가 된다면 문제가 없으나, 이미지를 선택하는 창 까지 띄운 상태에서 취소하게 되는 경우이미지 파일 업로드 input에 걸려 있는 함수는 그대로 작동을 하게 되나, 실제 파일이 없어서 발생하는 에러이다. 즉, 코드를 실행시에 조건을 아래와 같은 조건을 걸어준다면 문제가 없다.파일이 있는지 확인한다.이미지 파일인지 확인한다.var file = e.target.files[0];var reader = new FileReader();// 기존reader.readAsDataURL(file);// 수정if (file && file.type.match('image.*')) { reader.readAsDataURL(file);} 2024. 9. 13. 이전 1 2 다음 반응형
