개발 메모장 개발 메모장

Safari

• React에서 스크롤을 하단에 고정하는 방법(feat. css)

  Tip 2024. 9. 7. 14:22

  채팅 등의 서비스를 만들 경우 스크롤을 하단에 고정해야 되는 경우가 있습니다.간단하게 스크롤을 하단에 고정하는 방법에 대한 구현에 대해 알아보겠습니다.1. React 사용import { useEffect, useRef } from 'react';const Chat = ({ messages }) => { const endOfMessagesRef = useRef(null); useEffect(() => { endOfMessagesRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); return ( {messages.map((msg, idx) => ( {msg} ))} )..

  Read More
• vh 버그 해결 방법(feat. safari)

  Tip 2024. 3. 19. 13:45

  웹 디자인의 세계에서 요소의 크기와 크기 조정은 웹 사이트가 다양한 장치에서 반응하고 시각적으로 매력적 이도록 하는 데 중추적인 역할을 합니다. 반응형 디자인에서 중요한 역할을 하는 두 가지 측정 단위는 vh(뷰포트 높이)와 vw(뷰포트 너비)입니다. 이러한 단위는 디스플레이 장치에서 웹 페이지의 표시 영역인 뷰포트의 크기에 따라 조정되는 동적입니다. 하지만 언제나 그렇듯이 모바일 safari에서 문제가 있습니다. 요소의 높이를 100vh로 설정하면 브라우저의 vh 계산에서는 주소 표시줄과 같이 동적으로 크기 조정이 가능한 UI 요소를 고려하지 않습니다. 결과적으로 vh로 설정된 높이가 실제 표시되는 뷰포트 높이를 초과하는 콘텐츠 오버플로가 발생할 수 있습니다. 1. 동적 vh 계산을 위한 JavaScr..

  Read More
• IOS Safari WebView 화면 확대 막기

  Tip 2023. 2. 9. 15:08

  IOS10 이하 버전에서는 간단하게 user-scalble를 꺼주는 것 만으로 확대를 막을 수 있었습니다. 하지만 이후 버전부터는 해당 내용으로는 막아지지 않습니다. 이제 적용할 수 있는 방법은 css에서 확대하는 동작 자체를 막아주는 겁니다. touch-action: pan-y; 가로 터치를 막아주어 화면 확대를 못하게 막아주는 방법입니다. 이제 사용자 임의로 확대 축소를 할 수 없기 때문에 모든 게 끝이라고 생각되겠지만 또 변수가 있습니다. 사용자가 설정한 최소 폰트 이하(default 16px)의 input, select를 선택 시 자동으로 확대되는 문제가 있습니다. 이 문제의 경우 input, select의 font-size를 무조건 16px 이상으로 설정하면 되지만 사용자가 임의로 최소 폰트 크..

  Read More