본문 바로가기

분류 전체보기

[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 의 내용에서 이야기를 했던 내용이긴 한데요. 궁금하시면 먼저 대강 살펴보시고 오시는 것도 좋을 것 같습니다. 일을 하다보면 여러가지 상황을 고려해야 하는데, 정말 상식적으로 이해가 안가는 상황까지 고려해야 하는 경우가 있습니다. 저의 이번 경우는 설문 만드는 .. 더보기
[IE6] Facebook 과 Twitter 의 IE6을 대하는 자세 정말 오랜만에 포스팅을 합니다. 요즘 갑자기 여러가지 일로 바쁘게 되고 전에는 프로젝트가 갑자기 바빠지는 바람에 블로그에는 별로 신경을 쓰지 못하였습니다. 안타까운 현실이죠. 뭐 사실 트위터와 페이스북에 빠져있어서 그랬던 것도 있습니다. ㅜㅜ 오늘은 한참 된 이야기이긴 한데 저번 마이크로소프트 인터넷익스플로러 9의 베타버젼의 발표가 있었던 같은날 있었던 트위터의 공식적인 인터넷익스플로러6 지원 포기 선언에 대한 이야기 입니다. 미국의 유력 사이트들은 과연 IE6에 대해 어떻게 대응하고 있을까요? 우리나라 같은 경우는 포털이나 에이젼시나 거의 모든 곳에서 크로스브라우징을 고려할 때 IE6을 빼놓지 않습니다. 물론 이유는 다들 아시는 것 처럼 사용자가 많이 있기 때문이지요~ 어제(2010년11월3일) 있었던.. 더보기
[jQuery] jQuery를 이용한 이미지의 마우스오버2 일전에 jQuery를 이용한 마우스오버에 대한 포스팅을 한적이 있습니다. 궁금하신 분은 여기(http://htglss.tistory.com/21)를 참조하시면 되구요. 오랜만에 블로그에 들어와서 보니 아무리 보아도 뭔가 마음에 걸리는 부분이 있어서 약간의 업그레이드를 해보았습니다. 뭐 대단한 것은 아니고 코드를 좀 줄여보았고 한가지 기능을 추가해보았습니다. 뭐 대단한 기능은 아니고 아주 간단하지만 있으면 좋을 법한 기능입니다. 일단 마우스오버 이미지를 가장 많이 사용하는 부분은 메뉴 부분이라고 할 수 있을 것 같습니다. 그런데 메뉴에서 해당페이지에 들어가 있을 때는 그 메뉴를 활성화 해놓는 것이 보기에 약간은 더 좋은 것 같으므로 그런 기능을 추가해 보았습니다. 뭐 간단한 한줄이기에 쓰지 않을 때는 없애.. 더보기
한가위와 구글 Google 메인화면 한가위 입니다. 이번 연휴의 핵심 키워드는 뭐니뭐니 해도 '수해'가 아닐까 합니다. 즐거운 명절의 시작을 엄청난 비와 함께 시작했다는 것이 "더도 말고 덜도 말고 한가위만 같아라"라는 말을 무색하게 하는데요. 항상 그때그때의 이미지로 구글의 로고를 꾸미는 구글이 이번 한가위에도 멋있는 이미지로 한가위를 맞이하였습니다. 장구를 치는 아저씨를 모델로 하여 멋진 이미지를 만들었는데요. Google 의 중간에 있는 'o'와 'g'를 빼고 그 안에 장구치는 아저씨를 넣었습니다. 매우 한국적인데요. 여기에서 제가 궁금한 점은 저는 구글의 미국 사이트를 들어갔는데 저렇게 한국의 한가위 이미지가 뜨는 것입니다. 전 세계적으로 오늘의 이벤트가 한가위만 있는 것인지 아니면 결국 한국으로 접속이 되는건지 궁금하네요. 일전에.. 더보기
[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) 이런식으로 사용하면 되는데요. 한 줄의 코드로 손쉽게 애니메이션 효과를 낼 수 있습니다.. 중앙정렬 된 컨텐츠의 우측에 붙어 창 크기가 변해도 같은 위치에 오게 하였습니다. 더보기
생각하는 사람 예상치 못하고 갑작스레 받게된 선물. 로뎅의 마우스 패드인데 참 예쁜 것 같다. 아래에 보이는 붉은 색의 "생각하는 사람"이 가장 눈에 들어온다. 그러면서 드는 생각은 "나는 얼마나 생각을 하며 살고 있는가?" 생각이란 건 많이 하면 좋지 않지만 꼭 필요한 것. 움직이기 전에 한번 더 생각해보도록 하자! 더보기
반응형

티스토리툴바