IntroiOS Safari에서 텍스트 입력 필드(input text)에 텍스트를 입력하려고 클릭하니, 화면이 강제로 확대(zoom)되는 현상이 있었다.Safari에서 이런 zoom 현상은 기본적으로 font-size가 16px 미만인 input 필드에서 발생한다고 한다. 작은 텍스트 필드를 강조해 사용성을 높이기 위해 확대를 적용한다는 의도지만 개발자에게는 골칫거리가 된다.UI가 깨지거나 모달창이 비정상적으로 작동하게 만들어서 디자인과 사용자 경험을 크게 해칠 수 있다.본 글에서는 이 문제를 해결하기 위해 사용한 한 가지 사례를 소개한다.문제 상황검색창에 텍스트를 입력하면 모바일 Safari에서 화면이 확대되면서 UI가 깨지는 문제보편적으로 아래의 두가지 방법에 제시된다.input font-size 1..

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