오브제 광고를 보다가 제가 스크롤을 내리면 동그라미에 내린 높이만큼 퍼센트가 채워지는 것을 보고 이 기능에 대해 알아보면 재밌겠다고 생각해서 글을 쓰게 되었습니다. 스크롤 시 퍼센트 바 기능 추가 #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..
HTML 이란? HyperText Markup Language 로 웹을 이루는 가장 기초적인 구성요소입니다. 웹사이트를 인간으로 치면 뼈대라고 할까요? CSS는 살과 옷 이라고 하면 JavaScript는 행동이라고 하면 좋겠습니다. 그래서 이러한 뼈대를 어떻게 만들 것인가를 알아보도록 하겠습니다. 배운 것 위주로 간단하게만 설명하고 예제를 보여드리겠습니다. 기본 문법 1. HTML 문서의 2. 웹페이지 내용을 보여주는 정보를 담는 태그입니다. ~ 문서의 제목을 만드는 데 사용됩니다. 이 제목 태그를 잘 이용하면 검색 엔진이 문서의 내용을 이해하는 데 도움이 됩니다.(페이지를 만들 때 중요합니다.) HTML Tag 연습 링크를 만드는 데 사용됩니다. 링크는 문서의 다른 부분이나 다른 웹사이트로 연결할 수 ..
이틀동안 HTML&CSS Repl.it 문제를 풀면서 배운 내용을 정리해보려고 합니다. 이전에도 html과 css에 대하여 정리하였지만... 망각의 동물인 저는 다 까먹어 버렸답니다. 그래서 다시 복습을 위해 펜을 꺼내들었습니다. HTML의 정의와 기능 HTML은 웹 페이지를 만들기 위한 언어입니다. HTML로 웹페이지의 구조를 잡을 수 있습니다. HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있습니다. 브라우저(safari, chrome, ie..)는 HTML파일을 가지고 뭘 어떻게 그려주면 되는지 파악한 후에 웹 페이지를 생성합니다. HTML tag HTML 요소(element)에는 opening tag, content, closing tag 가 있습니다. HT..
