본문 바로가기

Internet World

[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, 배경 이미지의 위치를 조정해서 이미지를.. 더보기
파이어폭스의 줄바꿈 처리 Firefox line break 정말 오랜만에 쓰는 포스트이네요. 어제이지요? 어제 파이어폭스의 새로운 버전인 파이어폭스4가 세상에 나왔습니다. 출시 한지 얼마 되지 않아 엄청난 다운로드를 기록해서 이슈가 되었는데요. 더 빨라지고 더 좋아졌다고는 하는데 그것은 얼마만큼 써 봐야 알 수 있는 이야기 같습니다. 오늘 할 이야기는 최근에 있었던 파이어폭스의 줄바꿈에 대한 이슈에 대해서 입니다. 일전에 포스트 했던 [CSS] 텍스트 줄바꿈 처리 word-break, white-space 의 내용에서 이야기를 했던 내용이긴 한데요. 궁금하시면 먼저 대강 살펴보시고 오시는 것도 좋을 것 같습니다. 일을 하다보면 여러가지 상황을 고려해야 하는데, 정말 상식적으로 이해가 안가는 상황까지 고려해야 하는 경우가 있습니다. 저의 이번 경우는 설문 만드는 .. 더보기
[jQuery] jQuery를 이용한 이미지의 마우스오버2 일전에 jQuery를 이용한 마우스오버에 대한 포스팅을 한적이 있습니다. 궁금하신 분은 여기(http://htglss.tistory.com/21)를 참조하시면 되구요. 오랜만에 블로그에 들어와서 보니 아무리 보아도 뭔가 마음에 걸리는 부분이 있어서 약간의 업그레이드를 해보았습니다. 뭐 대단한 것은 아니고 코드를 좀 줄여보았고 한가지 기능을 추가해보았습니다. 뭐 대단한 기능은 아니고 아주 간단하지만 있으면 좋을 법한 기능입니다. 일단 마우스오버 이미지를 가장 많이 사용하는 부분은 메뉴 부분이라고 할 수 있을 것 같습니다. 그런데 메뉴에서 해당페이지에 들어가 있을 때는 그 메뉴를 활성화 해놓는 것이 보기에 약간은 더 좋은 것 같으므로 그런 기능을 추가해 보았습니다. 뭐 간단한 한줄이기에 쓰지 않을 때는 없애.. 더보기
[jQuery] jQuery 를 이용한 영역의 크기가 변하는 UI jQuery는 쓰면 쓸 수록 매력적인 라이브러리인 것 같습니다. 사용하면 할 수록 사용자가 사용하기가 아주 쉽고 편하게 되어있습니다. 이번에는 기회가 되어 클릭에 따라 영역의 크기가 변하는 UI를 제작해 보았습니다. jQuery의 쉬운 애니메이션 기능을 이용하여 간단하게 만들어보았습니다. 이걸 참조해서 다른 여러가지들도 잘 만들 수 있겠는데요? 우선 기본적인 내용을 보면, 클릭함에 따라 모든 영역들의 크기를 변화시키는 것인데요. jQuery의 특성상 아주 간단하게 만들 수 있었습니다. 하지만 요 안에 다른 영역이 잔쯕 들어간다면 상황은 좀 달라지긴 하겠죠? 하지만 특별한 컨텐츠가 없을 경우에는 아주 간단하게 구현할 수 있습니다. 아래와 같은 코드로 애니메이션을 표현할 수 있는 데요, 영영이 클릭이 되면 .. 더보기
Webkit 기반의 Safari나 Chrome에서 iframe의 스크롤바 제거 요즘에 국내에도 아이폰이 개통되고 또 이번에 아이폰4 또한 나오게 되면서 국내에서도 애플의 인지도가 많이 높아지고 있습니다. 또한 맥을 쓰시는 분들도 많고 그로인해 Webkit 기반의 브라우저인 사파리를 사용하시는 분들 또한 많아졌습니다. 빠르다고 소문이 나있는 사파리와 크롬을 다들 써보셨을 텐데요. iframe을 사용할 때 이상하게 크롬과 사파리에서는 스크롤바가 나오는 현상을 보실 수 있었을 것입니다. 분명히 iframe에 overflow:hidden; 이라는 속성을 주었는데도 스크롤바는 사라지지 않는 것을 볼 수 있습니다. 그래서 검색을 해보았습니다. 그랬더니 이런 결과가 나왔는데요. I have an iframe on www.mydomain.com that points to support.mydom.. 더보기
[jQuery] jQuery 를 이용한 퀵메뉴 jQuery 의 애니메이션 효과는 정말 훌륭한 것 같습니다. 아주 간단한 코드로 쉽게 애니메이션을 구현할 수 있는데요. 이 코드는 99% 회사 대리님께서 만드셨고, 제가 아주 간단한 IE6에서 안되는 문제를 해결했습니다. 여기에 올려도 이해해주시겠죠? ㅋㅋ 아무튼 사용하면 할 수록 jQuery 는 훌륭한 물건인 것 같습니다. 앞으로도 자주 사용해야겠습니다. .animate() 를 이용해서 만들었는데요. .animate({"top":100px},1000) 이런식으로 사용하면 되는데요. 한 줄의 코드로 손쉽게 애니메이션 효과를 낼 수 있습니다.. 중앙정렬 된 컨텐츠의 우측에 붙어 창 크기가 변해도 같은 위치에 오게 하였습니다. 더보기
HTML5 요즘 이슈를 일으키며 큰 주목을 받고 있는 HTML5, 웹의 새로운 전환점이 될지도 모르는 HTML5는 도대체 무엇일까요? 여기에 플래시와 HTML5를 비교하는 데이터가 나와있습니다. HTML5 와 플래시의 행보가 기대되는데요. 둘중에 어떤 것이 살아남게 될지... 개인적인 생각으로는 모션이 정말 강조된 부분에는 플래시를, 꼭 그렇지 않은 곳에는 HTML5가 주류를 이루지 않을까 싶네요. 아무튼 가장 중요한 것은 브라우저 지원현황. 으윽....... 하지만 현재의 대세는 HTML5. 계속 관심이 가는 군요. 더보기
[HTML5/CSS3] 트위터 실패 고래 요즘 많은 분들이 트위터를 사용하고 있습니다. SNS의 대표적인 서비스인데요. 일반 개인도, 유명인도, 기업도 트위터를 통해 다른 사람들과 소통하려고 하고 있습니다. 트위터는 기존의 방식과는 조금다른 완전 개방적인 구조를 가지고 있고, (보호 설정을 하지 않는다면) 팔로잉이라는 조금은 색다른 방식으로 여러 사람들이 네트워크로 연결이 되는데요. 그리고 이름을 통해 해당하는 사람을 부를 수도 있습니다. 아무튼 조금만 적응하게 되면 사용하기 쉬운 방법과 스파트폰을 통한 어플리케이션의 확대로 더 많은 사람들이 이용하고 있는데요. 그래서 그런지 트위터에 접속할 때 많이 느리거나 접속에 실패하는 경우가 종종 있습니다. 트위터를 좀 검색해야 할 때 그러면 조금은 난감한데요. 트위터에 접속이 되지 않을 때는 이런 화면.. 더보기
반응형

티스토리툴바