사파리

iOS의 사파리에선 100vh 속성 값이 다소 다르게 작동한다. 데스크탑 크롬에서 100vh는 현재 화면에 보여지는 뷰포트를 기준으로 하지만, iOS의 사파리에선 하단 주소창 영역까지 포함한다. 뷰포트를 기준으로 아래 비율로 화면을 나눴다면 아이폰 사파리에선 footer 일부분은 하단 주소창 때문에 가려진다.header : 15%main : 70%footer : 15% 해결 방법다행히 이 문제는 순수 CSS만으로 해결할 수 있다. -webkit-fill-available 속성을 이용하는 방법이다. 기능 쿼리(@supports) 인자에 명시한 -webkit-touch-callout은 iOS에서만 지원하는 속성이다. 따라서 아이폰 사파리에서 접속할 땐 -webkit-fill-available 스타일 값이 적..

오늘은 아이폰(아이패드)의 기본 브라우저인 사파리에 추가해두면 유용하게 쓰일 책갈피 몇 가지를 소개해볼까 합니다. 사파리 기본 공유 항목엔 페이스북, 트위터, 중국산 SNS인 Weibo 등 밖에 없기 때문에 이미 많은 분들이 사용하는 에버노트나 구글플러스 등의 유저분들에겐 살짝 아쉽습니다. 사파리 브라우저를 이용해 현재 보고 있는 페이지를 Evernote로 저장하거나 Pocket 읽기 목록에 추가하고 싶으실 때 아래 북마크를 추가해두시면 간편하게 공유할 수 있습니다. 잘 알려진 서비스의 공유와 관련된 유용한 북마크가 더 있으시다면 댓글로 일러주세요. (2편 보러가기) 스크립트 형식의 북마크 추가 방법 사파리에서 아무 페이지(네이버 등)를 즐겨찾기(책갈피)에 추가합니다. 책갈피 > 편집을 눌러 원하는 서비..