Development/HTML ⁄ CSS 6

HTML) href 속성의 html 링크 절대 경로로 강제하기

Intro 얼마전 프로젝트를 진행 하던 중에 하나 난관에 부딪친 일이 있었습니다. 유저가 URL을 입력 하면, DB에 저장 해 두었다가, 필요 할 때 해당 URL 주소로 연결되는 링크를 만들어 주는 기능을 만들고 있었는데.. 테스트를 진행 하다가 주소로 제대로 연결이 되지 않는 문제가 있었습니다. https:// 라고 프로토콜을 정확하게 입력 하면 연결에 문제가 없었지만, 프로토콜을 생략하고 www.naver.com 과 같은 값을 넣었을 때는 절대경로가 아닌 상대경로로 연결을 시도 하는 문제가 있었습니다. 간단하게 해결 하는 문제지만 생각보다 검색했을 때 해결방법이 나오지 않아 고생을 조금 했지만 결국 고칠 수 있었습니다. 문제 재연 먼저 해당 문제를 똑같이 재연 해 보겠습니다. 이를 위해 아주 간단한 ..

Development/HTML ⁄ CSS 2022.01.30 (1)

HTML) details 와 summary 태그활용해 접기와 펼치기 간단 구현

Intro 요즘에는 페이지에 표시할 내용이 너무 많을 때에는 중요한 정보를 한 페이지에 들어오도록 하면서, 간단한 클릭 한번으로 숨겨져 있는 정보들도 확인할 수 있도록 하기 위해 접기/펼치기를 많이 사용 하고 있습니다. www.naver.com 거의 매일 접속하는 naver 페이지만 보더라도 메인에 접기/펼치기 버튼 두개가 바로 보입니다. 검색 히스토리 서비스 전체보기 물론 네이버에서 details 태그를 사용해서 접기와 펼치기를 구현한 것은 아닙니다. 시간적 여유가 있으며 접고 펼칠때에 상황에 맞는 여러가지 이벤트들을 넣고, 맘에 드는 css 를 적용하는 등 예전처럼 접고 펼치기를 구현 해 내려면 자바스크립트 코드를 작성하는 방법 밖에 없었습니다. 네이버의 접기 펼치기 코드를 보니 a 태그에 href=..

블로그에 포스팅 읽는데 걸리는 시간 표시해주기 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 (6)

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

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

Development/HTML ⁄ CSS 2021.07.31 (3)