오브제 광고를 보다가 제가 스크롤을 내리면 동그라미에 내린 높이만큼 퍼센트가 채워지는 것을 보고 이 기능에 대해 알아보면 재밌겠다고 생각해서 글을 쓰게 되었습니다. 스크롤 시 퍼센트 바 기능 추가 #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..
CSS를 배우기 전 HTML 기본을 보고 오시면 더 좋다고 생각합니다. https://pabeba.tistory.com/147 HTML 기본 문법 HTML 이란? HyperText Markup Language 로 웹을 이루는 가장 기초적인 구성요소입니다. 웹사이트를 인간으로 치면 뼈대라고 할까요? CSS는 살과 옷 이라고 하면 JavaScript는 행동이라고 하면 좋겠습니다. 그 pabeba.tistory.com CSS 사용이유 HTML에서 태그를 사용할 때 각 태그에 있는 속성 값을 넣어서 결과를 변경하기도 하였는데, 그 속성값을 HTML 태그에서 하나하나 관리하기 힘들고 어렵기 때문에 하나로 묶기 위해서 CSS를 사용합니다. 예시를 보여드릴게요. 예시 css 선택자 연습 html: web docume..
이틀동안 HTML&CSS Repl.it 문제를 풀면서 배운 내용을 정리해보려고 합니다. 이전에도 html과 css에 대하여 정리하였지만... 망각의 동물인 저는 다 까먹어 버렸답니다. 그래서 다시 복습을 위해 펜을 꺼내들었습니다. HTML의 정의와 기능 HTML은 웹 페이지를 만들기 위한 언어입니다. HTML로 웹페이지의 구조를 잡을 수 있습니다. HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있습니다. 브라우저(safari, chrome, ie..)는 HTML파일을 가지고 뭘 어떻게 그려주면 되는지 파악한 후에 웹 페이지를 생성합니다. HTML tag HTML 요소(element)에는 opening tag, content, closing tag 가 있습니다. HT..
