Intro 부트스트랩을 사용 하고 있는데, 전체적으로 기본 폰트를 변경 하려고 하니 --bs-body-font-family가 적용 되어 있어서 변경하는데 까다로운 상황이 있었습니다. 물론 css를 덮어 쓰며 !important; 를 붙이는 방법이 있기는 하지만 애초에 important 는 css 작성 시 권장되지 않는 방법이기도 하고, 그렇게 한번 해 버리면 하위 요소들의 세부적인 폰트 설정이 어려워집니다. 이 문제 상황을 해결 해 보도록 하겠습니다. bootstrap.min.css 인 경우와 scss 인 경우 모두 해결 방법을 작성 해 두었습니다. 문제상황 main.ts import { createApp } from "vue"; import { createPinia } from "pinia"; impo..

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

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

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

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