블로그에 포스팅 읽는데 걸리는 시간 표시해주기 by reading-time.js

https://shanepark.tistory.com/224 에 이어지는 글 입니다. 이번에는 블로그에서 직접 적용을 시켜보도록 하겠습니다. ​ 블로그 적용하기 전 화면입니다. 작성 일 우측에 공간이 꽤 남기 때문에 해당 공간이 넣으면 되겠습니다. 우측 상단 버튼을 눌러 블로그 관리에 들어 갑니다. ​ 그러고 나서 좌측의 꾸미기 메뉴에 보면 "스킨 편집" 버튼이 있습니다. ​ 거기에서는 html 편집 으로 들어갑니다. 이제 수정할 요소가 어느 부분에 있는지 찾아야겠죠? Mac 에서는 Command + Shift + C, 윈도우에서는 Ctrl + Shift + C 를 누르고 찾고자 하는 요소에 마우스를 올립니다. 제목이 있는 요소가 h2.title-article 입니다. ​ 금방 찾아 줍니다. ​ html..

Development/HTML ⁄ CSS 2021.09.10
reading-time.js 활용해 읽는 시간 표시해주기

Intro 요즘 해외 뉴스나 블로그 등 에서 많이 사용 되고 있는 reading time 라이브러리 입니다. 보통 글의 header 부분의 제목 바로 다음에서 해당 article을 읽는데 대략 어느 정도가 걸리는지 시간으로 알려줌으로서 독자들이 빠르게 대강 읽을 지 혹은 천천히 꼼꼼히 읽을지를 그것도 아니면 안읽고 말지에 대해 결정하게끔 도와 줍니다. 보통 이런식으로 얼마나 걸릴지를 미리 가늠할 수 있게 해줍니다. 저도 reading-time.js 를 블로그에 도입 하고자 그 기능들을 확인 해 보고 있습니다. 함께 하나씩 따라 해 보면서 기능을 익혀보겠습니다. 시작 https://github.com/michael-lynch/reading-time 일단 공식 Github repository에 들어가 정보를..

Development/HTML ⁄ CSS 2021.09.10