안녕하세요 무택입니다 :) 오늘은 스크롤에 따라 진행상태를 알려주는 바 만드는 코드에 대해 남겨보려고 합니다. 요즘 아티클 형식의 페이지는 거의 다 사용하고 있는 것 같은데 그만큼 웹사이트 사용성에 도움을 주는 기능이라고 생각합니다. 사람들이 페이지에 들어와서 글을 읽다가 어느 정도 남았는지 직관적으로 알 수 있기 때문에 적절한 페이지에 적용하면 좋은 기능이 될 것 같아요. 동작원리 저는 기능을 브런치 사이트의 아티클 페이지를 참조해서 만들었습니다. 그래서 기본적으로 동작 원리는 스크롤할 때마다 스크립트를 실행시켜서 현재 스크롤 위치를 파악 후 수치로 변환(0 ~ 100%), 그 수치를 진행바의 넓이로 넣는 원리입니다. codepen 예시 See the Pen 스크롤 위치 by TytanLee (@Tyt..