넘치게 채우기

블로그 스킨 작업을 하는 도중, 우측 사이드바가 허해서 무슨 기능을 쓸지 고민하다가, 페이지 내에서 fragment를 이용해서 하이퍼링크를 생성하도록 하였다. 페이지의 소제목들에게 id 부여 anchor 태그의 href에 #{fragment}를 해야 하는데, 요소의 id가 필요하다. 그러나, 매번 글을 작성 할 때마다 id를 일일히 부여하기에는 번거롭고, 기존의 글들까지도 그렇게 해야한다. 그래서, 페이지를 로딩하였을 때, id가 부여되도록 하였다. 게시글의 본문에서 h2, h3, h4태그를 불러오도록 하였다. 그리고 각각의 id를 각각의 텍스트로 하게 하였다. const header = document.getElementsByClassName('article-desc')[0].querySelectorA..

자바스크립트를 이용하여 스크롤 진행 바를 만들어보자. 스크롤의 진행을 위해서는, 지금까지 내려온 스크롤의 길이, 웹 페이지 전체의 세로길이, 화면의 길이가 필요하다. Document.body.of.offsetHeight - 웹 페이지의 태그의 총 높이를 구한다. Document.body.of.offsetWidth - 웹 페이지의 태그의 총 길이를 구한다. window.scrollY - 웹 페이지에서 스크롤해서 내려온 세로축의 길이. 맨 위에서 window의 맨 윗부분까지의 거리이다. window.scrollX - 웹 페이지에서 스크롤해서 오른쪽으로 이동한 가로축의 길이. 맨 왼쪽에서 window의 맨 왼쪽부분까지의 거리이다. window.innerHeight - 브라우저에서 웹 페이지를 보여주는 영역의 ..

블로그 스킨 작업을 하고 있는데, 현재 보고있는 카테고리를 사이드바에서 강조를 하고 싶었다. 그렇게 기능구현을 하는데, 한글이나 공백이 있는 카테고리들은 작동하지 않는 것이었다. 그래서 console.log()로 어떻게 나오는지 확인했는데, 다음과 같았다. "Clean%20Architecture" 인코딩이 되어 있는 것이었다. 인코딩이 되어 있어서 비교할 때, 같은 값이 있는지 찾지 못했던 것이다. 아래와 같이 해결하였다: target_arr.forEach((v, i, arr) => arr[i] = decodeURIComponent(arr[i])); decodeURIComponent를 이용하여 URI를 디코딩한 값을 배열에 대체하였다.