Internet World/Mobile 썸네일형 리스트형 [Mobile] 모바일웹, 아이폰 터치 시 발생하는 탭 하이라이트 제거 오랜만에 포스팅을 많이 하게 되네요. 이런건 좋지 않은데, 주기적으로 꾸준히 하는게 더 나을텐데 그게 잘은 안되네요. 약간은 어려운 감이 있습니다. 이번에 이야기 할 이야기는 iOS 사파리에서 일어나는 이야기 인데요. 원래는 이것을 '발생하는 문제'라는 표현을 썼었는데, 잘 생각해보니 이 것은 평소에 우리에게 도움을 주는 좋은 기능입니다. 아... 서론이 너무 길었죠? 그것은 바로 터치 시에 발생하는 검은 하이라이트 입니다. 이것이 무어냐 하면, iOS 사파리로 웹브라우징 시에 링크를 제대로 클릭했는가 확인할 수 있는 좋은 기능인데요. 아래 그림에서 보실 수 있습니다. 그림에서는 '미니홈피' 버튼을 터치 했을 때 오른쪽의 그림과 같이 검은 하이라이트가 생기게 됩니다. (다들 아시는 것 처럼 사파리 브라우.. 더보기 [Mobile] 모바일웹, Device Orientation (가로보기, 세로보기) 또 정말 오랜만에 쓰게 되는 포스팅입니다. 오늘 할 이야기는 모바일 브라우져에서 CSS를 불러오는 이야기 인데요. 세로로 볼 때랑 가로로 볼 때에 다른 레이아웃을 사용하려면 어떻게 해야할까 하는 이야기 입니다. 모바일 쪽 작업을 하다보면 가로보기와 세로보기의 레이아웃을 다른게 해야할 일이 있을 때도 있습니다. 세세한 width 값을 맞춘다던가, 가로보기를 할 때 넓어진 width 에 무언가를 넣을 경우도 생길 수 있을 것입니다. 이럴때 여러가지로 고민을 하게 되는데, 여러가지 방법들 중에 CSS를 다르게 불러와 보는 것도 하나의 좋은 방법일 수도 있습니다. 위와 같은 방식으로 사용하면 디바이스를 세로로 볼 때는 portrait.css 를 불러오고, 가로로 볼 때는 landscape.css 를 불러오게 됩.. 더보기 [Mobile] iOS 사파리의 배경 이미지 렌더링 버그 (iOS Safari 의 background image rendering Bug) 얼마전입니다. apple 에서 iPad 2 를 내놓았습니다. 이전 버전에 비해 엄청난 혁신은 없지만 전/후면부 카메라와 2배의 성능향상, 9배의 그래픽성능 향상이 있고, 무엇보다 많이 가벼워진 무게가 구매하고픈 욕구를 매우 많이 충족시켜주고 있습니다. 이제 한국에도 4월중에 발표한다고 하는데요. iPad2 를 통해 국내 타블렛 시장도 좀 더 활성화 될 것을 예상하고 있습니다. 그런 측면에서 오늘은 모바일 브라우져의 대명사인 iOS의 사파리에 대해서 이야기 해보도록 하겠습니다. 그 중에서도 모바일 사파리의 배경 이미지 렌더링에 대해서 이야기를 할 것인데요. CSS 스타일을 할 때 CSS - IR 기법을 많이 사용하게 됩니다. (IR:Images Replacement, 배경 이미지의 위치를 조정해서 이미지를.. 더보기 [Mobile] userAgent 에이전트를 이용한 모바일 페이지로 자동 이동 일전에 에이전트를 알아볼 수 있는 스크립트를 포스팅한적이 있는데요. "navigator.userAgent" 말이죠. 그렇다면 오늘은 이것을 이용하여 모바일 기기가 접속을 했을 때, 모바일 사이트로 바로 이동하게 하는 것을 해보도록 하겠습니다. 모든 일들이 마찬가지겠지만 이 일을 잘 해결하기 위해서는 일단 필요한 것들과 일의 과정을 정리해보면 되겠는데요. 우선 작업의 과정을 살펴보면, 1. 사이트에 접속한다. 2. 브라우저를 체크한다. 3. 에이전트에 따라서 페이지를 연결한다. 대략 이렇게 세가지 단계에 의해서 일을 처리하면 될텐데요. 그렇다면 2번째의 브라우저를 체크 하는 방법은 에이전트를 검사하는 방법을 사용하면 됩니다. navigator.userAgent 그 다음에 확인된 브라우저에 따라서 페이지를 .. 더보기 [Mobile] 모바일웹, 아이폰에서 인풋박스 내 마음대로 바꾸기 webkit 기반의 iPhone은 인풋박스를 자기 마음대로 표현하는 경향이 있습니다. 스타일시트로 보더와 색상을 조정해도 마음대로 되지 않는데요, 오늘은 아이폰에서 보여지는 인풋박스를 마음대로 요리하는 방법에 대해 이야기 하겠습니다. 일단 기본적으로 style을 width:200px; height:30px; border:1px solid #00f; 정도만 주었습니다. 일반 PC에서는 스타일을 준대로 잘 나올텐데요. 아이폰의 사파리로 같은 페이지를 보았을 경우에는 이렇게 보이게 됩니다. 흠,,,,, 일단 모서리가 동그랗게 되어있고, 상단에 그림자가 있는데요. 이래가지곤 원하는 디자인을 만들 수 없겠죠? 주면의 디자인과 어울리지 않을 수도 있고요. 그렇다면 이것을 반듯하게 만들어 보겠습니다. 스타일시트에 다.. 더보기 [Mobile] 모바일웹, input type 에 따른 아이폰 키보드의 변화 아이폰으로 인터넷을 하다보면은 여러가지 폼에다가 입력을 해야 할 경우도 많습니다. 아이폰을 사용해보신 분들은 아시겠지만 상황에 따라서 다른 키보드가 뜨는데요. 오늘은 input 박스의 type에 따라 다르게 뜨는 키보드의 모양의 분석해 보겠습니다. 우선 기본적으로 나오는 type=text 일 경우에는 다음과 같은 키보드가 나옵니다. text일 경우에는 기본적인 키보트가 뜹니다. 인풋박스들이 태그에 쌓여있기 때문에 아래에는 "go" 라고 버튼이 뜹니다. 그렇다면 다음에 있는 땡땡땡 부분은 다들 아시다시피 password 부분입니다. 그 곳에 포커스가 가게 되면, 위와 같은 키보드가 돌출하게 되는데, 한가지 다른 점은 처음에 입력하는 값을 대문자로 입력하게 해주는, shift가 안눌려있습니다. 다음은 이메일.. 더보기 [Mobile] 모바일 웹, 아이폰 사파리에서 화면회전시 폰트 확대방지 요즘 아이폰의 보급으로 많은 사람들이 iPhone을 사용하고 있습니다. 그래서 iPhone의 Safari에 최적화된 웹페이지를 많이 제작하고 있는데요. 아이폰 사파리는 모바일 브라우저로 여러가지를 고려하여 개발해야 하는데요. 앞에서 포스팅한 전화번호 링크와 화면 확대되는 부분이외에 화면 확대는 막았어도 텍스트가 자동으로 확대가 되는 것을 볼 수 있습니다. 세로로 딱 맞게 작업했을 경우 가로로 보게 되면 폰트가 확대되어 있는 것을 볼 수 있는데요. 이렇게 되면 어느 환경에서나 잘 보이게 개발하기 힘들겠죠? 그래서 폰트가 확대되는 것을 막아야 합니다. 그림에서 볼 수 있듯이 세로로 잘 맞게 작업한 경우 가로로 봤을 때 두번째의 그림같이 확대가 되게 됩니다. 그래서 원래 생각했던 디자인과 다르게 나오게 될 수.. 더보기 [Mobile] 모바일 웹 개발, 화면 확대 방지 viewport 2009년 말 우리나라에도 아이폰이 출시하면서 우리나라의 인터넷 환경도 많이 바뀌게 되었는데요. 비단 아이폰 뿐만아니라 아이본과 더불어 삼성의 옴니아2, 그리고 구글의 새로운 모바일 OS 안드로이드를 탑재한 폰들이 다수 나오게 되면서 2010년 상반기는 인터넷 업계에도 많은 변화가 일어난 것 같습니다. 포털에는 모바일 웹페이지와 모바일폰용 어플리케이션 개발이 당연하게 되었구요. 앞으로는 더 다양한 분야에서, 그리고 다양한 사람들이 모바일 웹페이지를 만들고 사용하게 될것입니다. 그러기 위해선 "접근성"이라는 문제가 대두되게 되는데요. 이전에 이야기하던 장애인에 국한된 접근성이 아니라, 어떤 장애가 있든지 + 어떤 환경에 있든지 정보에 접근할 수 있고 그것을 이용할 수 있어야 할 것입니다. 모바일 웹을 개발.. 더보기 [Mobile] 아이폰 사파리에서의 전화번호 링크 요즘 아이폰을 시발점으로 맥라이프를 꿈꾸고 있다. 아이폰 사파리에서 웹 서핑을 하다보면 자기도 나름 폰이라고 전화번호와 비슷하게 생긴것에는 자동으로 링크가 걸려 그것을 누르면 전화가 걸린다. 어찌보면 똑똑하고 좋으나 웹사이트 개발하는 입장에서 보면 좀 반갑지 않은 기능인지도 모르겠다. 이런 상황을 극복하기 위한 방법!! 위와 같은 매타값을 주게 된면, 아이폰의 사파리가 자기 마음대로 링크를 만들지 않는다. 헌데, 혹시나 전화 바로거는 링크를 만들일이 있지 않을까? 물론 그럴 때를 대비해서 요런 방법이 존재한다. 전화를 거는 링크 위와 같이 태그를 걸어주면 아이폰 사파리에서 바로 전화를 거는 링크를 만들 수 있다. ^^ 쓰면 쓸수록 아이폰, 이건 참 물건인 것 같다. 허허허 더보기 이전 1 다음
