웹 개발을 하다보면 가장 큰 스트레스 중 하나가 브라우저이다. IE는 처리했고 남은게 사파리 ( iOS ) 그리고 떠오르는 샛별 카카오 브라우저이다. 카카오톡은 웹사이트 링크를 타고 들어가면 인웹 브라우저로 실행이 된다. 근데 요놈도 참 간혹 예상치 못한 말썽을 일으기키는 뇨속이다. 아무튼 iOS에서 발생한 문제를 하나씩 해결하면 올려보겠다. vh 아이폰에서 vh를 100으로 설정했을 때, 스크롤을 내린다던지 해서 해당 영역이 짤리는 문제가 있다. resize useEffect(() => { const setViewportHeight = () => { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh",..

IE 환경의 고민이 사라졌다고 프론트엔드 개발자는 쉽게 마음을 놓으면 안된다. 바로 사파리 환경이 있기 때문이다. ( 모든 환경의 기본 스타일이 통일되길 기원합니다... ) 크롬과 사파리의 스타일이 다른 부분은 많지만 이번에 input을 작업하면서 다른 스타일로 내가 설정한 디자인이 깨지는 것을 발견했다. 사파리에서는 input이 기본적으로 둥근 모서리와 그림자를 가지고 있다. 그래서 따로 초기화를 하지 않으면 내가 설정한 스타일에 둥근 모서리와 그림자가 추가된다.. input { -webkit-border-radius: 0; -webkit-appearance: none; } 다음과 같이 설정해주면 input의 스타일이 초기화된다. radius는 둥근 모서리에 대한 설정이며, appearance는 그림자..