오브제 광고를 보다가 제가 스크롤을 내리면 동그라미에 내린 높이만큼 퍼센트가 채워지는 것을 보고 이 기능에 대해 알아보면 재밌겠다고 생각해서 글을 쓰게 되었습니다. 스크롤 시 퍼센트 바 기능 추가 #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..
예전에도 달력 구현을 한 적이 있는데, 에러가 나서 아쉬웠던 적이 있습니다. https://pabeba.tistory.com/12 Javascript - 달력 구현 Javascript를 이용해서 웹 페이지에 달력 구현을 해보았습니다. 개인적으로 너무 어렵기 떄문에 더 자세히 분석을 해봐야겠습니다. 또한, 구현은 했지만 오류가 있는 달이 있어... 우울합니다. 부족 pabeba.tistory.com 이번에는 조금 더 간단?하고 에러가 나지 않게 구현해보려고 합니다. 달력 구현하기(Version. 02) 1. HTML 코드 작성 일 월 화 수 목 금 토 1. jquery를 이용하여 script 함수를 만들었기 때문에 CDN으로 jquery를 다운로드합니다. 2. 월(month)을 변경하는 헤더 부분과..
그래프를 직접 만들어서 사용하는 것은 대단하다고 생각합니다. 하지만 일을 더욱 효율적으로 하기 위해서 다른 사람들이 만들어 놓은 좋은 소프트웨어를 가지고 일을 진행하면 업무 속도도 빠르고 좋다고 생각합니다. ECharts 설치하기 1. 콘텐츠 전송 네트워크(Content Delivery Network, CDN)를 이용해서 설치하기 이런 식으로 script import 많이 해보셨을 겁니다. 2. NPM Install npm install echarts 제가 요새는 npm을 사용하지 않아서 이 방법은 사용하지 않았는데, node.js를 사용하시는 분들이라면 당연히 이 방법이 가장 간편하다고 생각합니다. 3. 직접 다운로드하여 사용하기 https://github.com/apache/echarts/blob/m..
DOM이란? 텍스트 파일로 만들어져 있는 웹 문서(HTML 파일, XML, SVG)를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 합니다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 합니다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM입니다. DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영됩니다. 그림을 보면 브라우저는 웹 문서(HTML 파일,XML, SVG)를 로드한 후 파싱하여 DOM을 생성합니다. 이러한 웹 문서의 동적 변경을..
Promise를 통한 비동기 코딩(복습) https://pabeba.tistory.com/84 Promise로 비동기 동작을 하는 것을 복습해 봅시다. 어떤 원격 REST API를 호출을 하여 게시물 작성자의 이름을 리턴하는 함수를 작성하고 그 함수를 호출해보았습니다. function fetchAuthorName(postId) { return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) .then((response) => response.json()) .then((post) => post.userId) .then((userId) => { return fetch(`https://jsonplaceholder.typicode.com/users/..
callback 함수를 통한 비동기 처리의 문제점 function makeCharcter(id,job,func){ let user setTimeout(function(){ console.log('1초 뒤 실행') user ={ id : id, job : job, info : id + job }; func(user) },1000) } makeCharcter('hoso','warrior',function(a){console.log('character:',a)}) 한개의 callback함수만 있다면 전혀 어지러워 보이지 않지만 저 만들어진 callback 함수 속에 또 함수를 만들고 또 함수를 만들고 하면 코드가 너무나도 길어질 것입니다. 콜백 함수를 중첩해서 연쇄적으로 호출해야하는 복잡한 코드의 경우, 계속..
