본문 바로가기

모든 게시글

(25)
[CSS] 토글 ON/OFF 버튼 만들기 어플 UI에서 많이 볼 수 있는 토글버튼을 만들어보자!See the Pen Untitled by 최예림 (@kbzqsugj-the-scripter) on CodePen. 공부내용을 기록하는 블로그입니다.피드백은 언제든지 환영합니다😊
[JavaScript] 10분마다 실행되는 함수 서버 자원을 최대한 적게 사용하며 알람을 업데이트시킬 수 있는 스크립트를 구현하라는 업무를 요청받았다. 알람은 실시간으로 업데이트되지 않아도 된다고 하여 일정한 시간 간격에 따라 업데이트된 내용을 가져오는 방식을 구현해 보았다. 로직 흐름 함수가 실행되면 현재 시간을 sessionStorage에 저장 저장된 시간과 현재 시간의 밀리초 차이가 600000 (10분) 이상일 시 알람 업데이트 알람 업데이트 시간을 sessionStorage에 갱신 function FnTimeCheck() { //현재시간 var nowDate = new Date(); //세션스토리지에 저장된 시간 var saveDate = new Date(sessionStorage.getItem("saveDate")); if (nowDate...
[CSS] page-break (after, before, inside) 속성 프린트 시 요소의 분할여부를 설정할 수 있는 css page-break-after/before/inside 속성을 알아보자! page-break-after 요소의 이후 분할 여부 page-break-after: auto; //자동 page-break-after: always; //항상분할 page-break-after: avoid; //분할하지않음 See the Pen page-break-after by yelim (@yelm) on CodePen. page-break-before 요소의 이전 분할 여부 page-break-before: auto; //자동 page-break-before: always; //항상분할 page-break-before: avoid; //분할하지않음 See the Pen pa..
[JavaScript] PDF다운로드 기능 구현하기 (html2pdf) 오류 해결! 지난번 html2pdf를 사용하여 PDF다운로드 기능을 만들어봤다. 그런데 파일명이 변경되지 않는 오류가 생겼는데 이유를 알게 되어 기록하기로 한다! 다양한 예제들을 찾아보니 출력할 엘리먼트를 하나의 html에 담아 해당 요소를 가져오는 방식을 사용한다는 걸 알게 되었다. `[document.querySelectorAll()]` 을 사용하면 요소들이 배열에 담겨 출력되어서 생긴 문제였다…! 오류 수정과 함께 로딩이미지 삽입과 페이지 나누기도 추가해 보았다. 📢 수정 및 추가 내용 오류 수정 다운로드 진행 중일 때 로딩이미지 삽입 페이지 나누기 👉 css page-break 보러 가기 html, css pdf 다운로드 What is Lorem Ipsum? Lorem Ipsum is simply dummy ..
[JavaScript] PDF다운로드 기능 구현하기 ( html2pdf ) html2pdf는 html2canvas 와 jsPDF를 사용하여 웹페이지나 요소를 PDF로 변환할 수 있다. html2Pdf를 활용하여 PDF 다운로드 기능을 구현해 보자! 1. 필요한 스크립트 //기본세팅 2. html과 css .page 엘리먼트를 a4용지 크기로 설정해서 총 4장의 pdf가 출력되면 된다! pdf 다운로드 1 2 3 4 3. PDF 다운로드 스크립트 function FnPDF() { const pages = document.querySelectorAll('.page'); //.page 전부 찾기 html2PDF(pages, { jsPDF: { format: 'a4',//pdf사이즈 }, html2canvas: { scrollX: 0, scrollY: -window.scrollY, /..
[JavaScript] 전개구문(Spread syntax)이란? JavaScript 전개연구문에 대해서 알아보자! 전개구문이란? 말 그대로 전개하는 것, 객체나 배열을 펼칠 수 있다. 사용법은 아주간단하다! 배열이나 객체 앞에 점세개만 붙이면 된다. 함수에 적용하기 함수의 파라미터에 전개구문을 넣으면 개수를 초과한 모든 파라미터를 가져온다. function myFunction(a, b, c, ...arg) { console.log(a, b, c); //1 2 3 console.log(arg); //[4, 5] } const arr = [1, 2, 3, 4, 5]; myFunction(...arr); // myFunction(1, 2, 3, 4, 5);와 같음. 배열 합치기 //전개구문 없이 배열을 합치려면 .concat() 사용함. var arr1 = [1, 2]; ..
[노개북 DAY14] IT 5분 잡학사전 - 회고 2주 동안 진행된 IT 5분 잡학사전 책 읽기 챌린지가 끝이 났다. 무엇을 하던 항상 작심 3일인 경우가 대부분이었고, 매번 해야지.. 해야지.. 의 굴레에서 벗어나지 못해 자신감도 뚝뚝 떨어지고 있었다. 그런 찰나에 챌린지 마감 D-1이라는 걸 보고 홀린 듯 신청하고 e-book도 바로 구매했다. 2주면 거뜬하지! 하는 생각이 드는 반면 내가 주말에도 거르지 않고 챌린지를 할 수 있을까? 하는 걱정도 들었다. 생각이 많아지면 아무것도 못하는 내 성격을 알기 때문에 생각을 그만하기로 했다. 챌린지가 시작되었다. 전체적인 챌린지를 끝내고 난 후 생각은 수월하네였다. 평소에도 책 읽는 걸 좋아했던 것과 책 내용이 IT관련 도서라고 느껴지지 않게 쉬운 것도 한몫했다. 하지만 가장 어려웠던 건 예상했던 대로 주..
[노개북 DAY13] IT 5분 잡학사전 노개북 챌린지 day13! 드디어 마지막 챕터를 모두 읽는 날이다. 그럼 힘차게 시작해 보자! 오늘 읽은 범위 : 에피소드 39~45 책에서 기억하고 싶은 내용 인공지능 일반 인공지능(강한 인공지능) : 영화나 드라마에서 볼법한 인공지능. 대화, 게임, 판단 등이 가능 좁은 인공지능 (약한 인공지능) : 한 가지만 잘하는 인공지능. 빅스비 시리와 같은 음성인식 기술, 페이스북의 얼굴인식기능 등.. 머신러닝 인공지능을 학습시키는 방법 지도학습 : 인간이 기계에게 준 라벨을 토대로 학습해서 대답함. 비지도학습 : 라벨이 없는 다량의 데이터를 제공 후 스스로 학습. 딥러닝 : 머신러닝을 달성하기 위한 방법. REST API REST 방식으로 설계한 API HTTP메서드, 쿼리를 도입하여 url를 통일성 있게 ..