Development/HTML ⁄ CSS 4

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

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

reading-time.js 활용해 읽는 시간 표시해주기

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

티스토리 이미지 클릭시 원본 사이즈 모달 구현하기

티스토리 이미지 클릭시 원본 사이즈 모달 구현하기 ​ 티스토리는 기본적으로 lightbox를 지원합니다. 그런데 이게 지원하는 정도가 아니라 아에 해당 css와 js 파일을 뺄 수 없을 정도로 못 박아 두었습니다. 뭐 사용하기에만 편하면 된다 생각하는데, 문제는 제가 티스토리를 순수 markdown으로 작성하고, 첨부하는 이미지들도 Github에 올리고 링크를 연결하는 방식으로 올리다 보니, Tistory의 기본 lightbox가 작동하지 않았습니다. 그래서 저는 티스토리 블로그에서 이미지를 클릭 할 때 이미지를 크게 볼 수 있게끔 스스로 구현해야 했는데, 쉽게 될 줄 알았는데 꽤나 헤맸습니다. 처음에는 어차피 강제적으로 들어 가 있으니 lightbox를 사용 해 보려고 했는데 생각처럼 잘 되지 않았습니..

Development/HTML ⁄ CSS 2021.08.26 (4)

티스토리 마크다운 깃허브 스타일로 변경하기 ( Tistory Github Markdown)

티스토리 마크다운 Github 스타일로 변경하기 티스토리에는 데이터 백업 기능이 없기 때문에 제가 작성한 블로깅 내용들을 추후에 migration 시켜야 할 때를 대비해 markdwon 형식으로 작성 하며, 작성 내용들을 하나한 백업 해 두려고 하는데요. md로 작성하는 글들은 첨부 이미지들 또한 Github에 호스팅 하며 링크를 첨부해 작성 하고 있습니다. 그런 의미에서 얼마전 Typora로 블로그에 올릴 md 파일을 하나 작성했었습니다. Github markdown 스타일로 작성을 했는데, 그대로 마크다운으로 붙여넣었는데, 전혀 의도대로 렌더링이 되지 않습니다. 지금부터 Tistory의 마크다운 을 Github 스타일로 변경해보도록 하겠습니다. 블로그 관리 홈의 "꾸미기" - "스킨 편집" 으로 갑니..

Development/HTML ⁄ CSS 2021.07.31 (3)
반응형