본문 바로가기

사파리

[Mobile] 모바일웹, 아이폰 터치 시 발생하는 탭 하이라이트 제거 오랜만에 포스팅을 많이 하게 되네요. 이런건 좋지 않은데, 주기적으로 꾸준히 하는게 더 나을텐데 그게 잘은 안되네요. 약간은 어려운 감이 있습니다. 이번에 이야기 할 이야기는 iOS 사파리에서 일어나는 이야기 인데요. 원래는 이것을 '발생하는 문제'라는 표현을 썼었는데, 잘 생각해보니 이 것은 평소에 우리에게 도움을 주는 좋은 기능입니다. 아... 서론이 너무 길었죠? 그것은 바로 터치 시에 발생하는 검은 하이라이트 입니다. 이것이 무어냐 하면, iOS 사파리로 웹브라우징 시에 링크를 제대로 클릭했는가 확인할 수 있는 좋은 기능인데요. 아래 그림에서 보실 수 있습니다. 그림에서는 '미니홈피' 버튼을 터치 했을 때 오른쪽의 그림과 같이 검은 하이라이트가 생기게 됩니다. (다들 아시는 것 처럼 사파리 브라우.. 더보기
[Mobile] iOS 사파리의 배경 이미지 렌더링 버그 (iOS Safari 의 background image rendering Bug) 얼마전입니다. apple 에서 iPad 2 를 내놓았습니다. 이전 버전에 비해 엄청난 혁신은 없지만 전/후면부 카메라와 2배의 성능향상, 9배의 그래픽성능 향상이 있고, 무엇보다 많이 가벼워진 무게가 구매하고픈 욕구를 매우 많이 충족시켜주고 있습니다. 이제 한국에도 4월중에 발표한다고 하는데요. iPad2 를 통해 국내 타블렛 시장도 좀 더 활성화 될 것을 예상하고 있습니다. 그런 측면에서 오늘은 모바일 브라우져의 대명사인 iOS의 사파리에 대해서 이야기 해보도록 하겠습니다. 그 중에서도 모바일 사파리의 배경 이미지 렌더링에 대해서 이야기를 할 것인데요. CSS 스타일을 할 때 CSS - IR 기법을 많이 사용하게 됩니다. (IR:Images Replacement, 배경 이미지의 위치를 조정해서 이미지를.. 더보기
Webkit 기반의 Safari나 Chrome에서 iframe의 스크롤바 제거 요즘에 국내에도 아이폰이 개통되고 또 이번에 아이폰4 또한 나오게 되면서 국내에서도 애플의 인지도가 많이 높아지고 있습니다. 또한 맥을 쓰시는 분들도 많고 그로인해 Webkit 기반의 브라우저인 사파리를 사용하시는 분들 또한 많아졌습니다. 빠르다고 소문이 나있는 사파리와 크롬을 다들 써보셨을 텐데요. iframe을 사용할 때 이상하게 크롬과 사파리에서는 스크롤바가 나오는 현상을 보실 수 있었을 것입니다. 분명히 iframe에 overflow:hidden; 이라는 속성을 주었는데도 스크롤바는 사라지지 않는 것을 볼 수 있습니다. 그래서 검색을 해보았습니다. 그랬더니 이런 결과가 나왔는데요. I have an iframe on www.mydomain.com that points to support.mydom.. 더보기
사파리5의 새기능 Reader, Safari 5 Reader 이번 WWDC 2010 통해 여러가지 일들이 있었습니다. 무엇보다 많은 사람들의 관심과 주목을 받고 이슈화 되었던 일은 iPhone 4 인데, 이번 WWDC 2010 에 나오기까지 말도 많고 탈도 많았습니다. 스티브 잡스의 키노트를 통해 잘 등장했습니다. 모든 사람이 아이폰에 열광하고 있을 때, 물론 그것도 기대는 되었지만 저는 다른 것도 기대하고 있었습니다. 그것은 바로 사파리의 새로운 버전인데요. HTML5와 CSS3를 좀 더 잘 지원하고 더 빠른 브라우져가 나왔으면 하는 기대가 있었습니다. 그런데 그에 잘 부합하는 브라우저가 나왔는데요. 이번 사파리에서는 좀 새로운 기능이 있어서 소개해볼까 합니다. 그것은 바로 "reader" 인데요. 인터넷에서 블로그나 뉴스등의 글을 읽을 때에는 여러가지 광고가 .. 더보기
맥 OSX 의 발로 만든 플래시 플러그인, 아이맥 플래시 플러그인 요즘 어도비와 애플은 사이가 좋지 않습니다. 스티브 잡스가 자사의 모바일 디바이스인 아이폰과 아이패드에 플래시를 지원하지 않을 것이라고 못박아 놓았고 어도비도 애플을 상대로 광고를 통해 대항하였습니다. 뭐 광고에서 우리는 모두를 사랑한다고 했는데 (특히, 애플도 사랑한다고) 그것이 정말 사랑이란 얘기는 아니겠지요. 아무튼 현재 애플과 어도비의 관계는 그다지 좋지 않습니다. 스티브 잡스는 어도비의 플래시가 모바일에서는 잘 돌아가지 않고 CPU와 배터리를 너무 많이 소모한다고 이야기 하였습니다. 이번에 iMac을 구매하면서 맥OSX로 갈아타게된 저로서는, 그리고 아이폰을 사용하고 있는 저로서는 또 웹에 관련된 일을 하는 저로서는 이 이야기를 그냥 넘어갈 수 는 없었습니다. 일전에 소문으로 어도비가 플래시의 .. 더보기
[Mobile] 모바일웹, 아이폰에서 인풋박스 내 마음대로 바꾸기 webkit 기반의 iPhone은 인풋박스를 자기 마음대로 표현하는 경향이 있습니다. 스타일시트로 보더와 색상을 조정해도 마음대로 되지 않는데요, 오늘은 아이폰에서 보여지는 인풋박스를 마음대로 요리하는 방법에 대해 이야기 하겠습니다. 일단 기본적으로 style을 width:200px; height:30px; border:1px solid #00f; 정도만 주었습니다. 일반 PC에서는 스타일을 준대로 잘 나올텐데요. 아이폰의 사파리로 같은 페이지를 보았을 경우에는 이렇게 보이게 됩니다. 흠,,,,, 일단 모서리가 동그랗게 되어있고, 상단에 그림자가 있는데요. 이래가지곤 원하는 디자인을 만들 수 없겠죠? 주면의 디자인과 어울리지 않을 수도 있고요. 그렇다면 이것을 반듯하게 만들어 보겠습니다. 스타일시트에 다.. 더보기
[Mobile] 모바일 웹, 아이폰 사파리에서 화면회전시 폰트 확대방지 요즘 아이폰의 보급으로 많은 사람들이 iPhone을 사용하고 있습니다. 그래서 iPhone의 Safari에 최적화된 웹페이지를 많이 제작하고 있는데요. 아이폰 사파리는 모바일 브라우저로 여러가지를 고려하여 개발해야 하는데요. 앞에서 포스팅한 전화번호 링크와 화면 확대되는 부분이외에 화면 확대는 막았어도 텍스트가 자동으로 확대가 되는 것을 볼 수 있습니다. 세로로 딱 맞게 작업했을 경우 가로로 보게 되면 폰트가 확대되어 있는 것을 볼 수 있는데요. 이렇게 되면 어느 환경에서나 잘 보이게 개발하기 힘들겠죠? 그래서 폰트가 확대되는 것을 막아야 합니다. 그림에서 볼 수 있듯이 세로로 잘 맞게 작업한 경우 가로로 봤을 때 두번째의 그림같이 확대가 되게 됩니다. 그래서 원래 생각했던 디자인과 다르게 나오게 될 수.. 더보기
다음, Daum에서 제공하는, 빠르고 안전한 '인터넷 익스플로러8'을 만나 보세요! 마이크로소프트에서 인터넷 익스플로러 6의 시장점유율을 0으로 만들겠다고 발표한 가운데 다음에서도 인터넷 익스플로러 업그레이드 프로모션을 벌이고 있습니다. 다음은 좀 더 세게 나오는데요? 30일동안, 매일 100명에게 영화예매권을 준다는데요. 흠,,, 가격으로 환산해보면 영화한편이 8000원인데 예매권이라 작게잡아 한 5000원이라고 가정했을 때 하루에 100명이면 500,000원(50만원), 그게 30일이면 15,000,000원(천오백만원)이 됩니다. 뭐 계산해보니 그렇게 많이 많지는 않네요 ㅋㅋ 아무튼 이러한 노력을 한다는 자체가 너무 반갑습니다. 웹표준에 준하지도 않고 자기만의 렌더링 스타일을 가진 IE6은 이제 그만 써야 할때도 되지 않았나 싶습니다. 더 좋은 도구를 가지고 있으면 더 좋은 것을 경.. 더보기
[HTML5] HTML5 Canvas and Audio Experiment 애플의 CEO 스티브잡스가 강조하던 HTML5 를 이용하여 제작된 페이지 이다. http://9elements.com/io/projects/html5/canvas/ 인터넷 익스플로러를 제외한 파이어폭스, 사파리, 오페라, 크롬 등의 최신버전에서 모두 지원한다. 이런 것 들을 보면 정말 플래시의 설자리는 좁아지는 것 같다. 더보기
[Mobile] 아이폰 사파리에서의 전화번호 링크 요즘 아이폰을 시발점으로 맥라이프를 꿈꾸고 있다. 아이폰 사파리에서 웹 서핑을 하다보면 자기도 나름 폰이라고 전화번호와 비슷하게 생긴것에는 자동으로 링크가 걸려 그것을 누르면 전화가 걸린다. 어찌보면 똑똑하고 좋으나 웹사이트 개발하는 입장에서 보면 좀 반갑지 않은 기능인지도 모르겠다. 이런 상황을 극복하기 위한 방법!! 위와 같은 매타값을 주게 된면, 아이폰의 사파리가 자기 마음대로 링크를 만들지 않는다. 헌데, 혹시나 전화 바로거는 링크를 만들일이 있지 않을까? 물론 그럴 때를 대비해서 요런 방법이 존재한다. 전화를 거는 링크 위와 같이 태그를 걸어주면 아이폰 사파리에서 바로 전화를 거는 링크를 만들 수 있다. ^^ 쓰면 쓸수록 아이폰, 이건 참 물건인 것 같다. 허허허 더보기
반응형

티스토리툴바