Intro 웹 어플리케이션을 사용하면서 웹 브라우저에 보이는 화면을 그대로 프린트 하는 일은 사실 흔하지 않다. 연구데이터에 관련된 도메인으로 몇몇 프로젝트를 진행하다보니, 브라우저에서 보이는 화면 프린트 했을 때의 인쇄 결과물에 대한 요구사항이 종종 들어올 때가 있는데, 화면에 보여지는 것과 최대한 비슷하게 해달라는 고객도 있고 특정 포맷으로 보기좋게 인쇄되기를 원하는 클라이언트도 있었다. 사실 브라우저에서 인쇄물에 대해서도 css를 지원하기 때문에 어느정도의 css에 대한 이해가 있다면 어렵지 않게 해낼 수 있지만, 자주하는 일이 아니기 때문에 매번 할 때마다 다시 기억을 더듬어야 하고, 검색했을때 그렇게 쉽게 나오는 정보도 아니기 때문에 이번 기회에 한번 정리를 해두려고 한다. 특히 브라우저에서 바..

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=..

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