본문 바로가기

모바일

자전거 타고 퇴근하는 날, 만난 풍경들을 핸드폰 사진으로 담아봅니다... 센치했던 날... 일년에 몇번밖에 못하는 자전거 타고 출퇴근 하던 때였습니다. 바로 요날 퇴근 할 때 괜히 감성적이 되어서는 조금 가다가 서서 사진 찍고, 조금 더 가다가 또 사진 찍고 하면서 퇴근했었네요. ^^; 무슨 부귀영화를 누리려고, 이리 정신없이 바쁘게 살아가는지...라는 생각이 드는 하루였습니다...ㅎㅎ... 2017.4.19.
다음에서 제공하는 모바일기기별 Mobile Device, 해상도별 Resolution 미리보기 서비스, 트로이 Troy 포털사이트 다음에서 제공하는 기기별 미리보기 서비스 다음에서 이 서비스가 나온지는 언제인지는 모르겠으나 저는 꽤나 시간이 지난 후에나 알게 되었습니다.^^; 유용한 것 같아 스크랩 하려고 포스팅합니다. 화면의 왼쪽을 보시면 현재 나와있는 모바일 기기들의 제조사별 해상도가 있으며, 확인하고 싶은 기기를 선택 후 오른쪽 상단에 있는 URL에 웹사이트 주소를 기입하면 됩니다.ㅎ 주의사항은 버그 및 특성은 기기에서 직접보아야 한다는 점~! 해상도 확인 할때는 정말 유용하네요 ㅋ 아마 디자이너들이나 코더들이 좋아할 것 같습니당 ㅎ 또 하나의 Tip http://sunpig.com/martin/code/2012/androidzoom/devicewidth.html 확인하고 싶은 디바이스에서 위 URL를 호출하면 아래..
[자바스트립트, Javascript] 디바이스 Device 별 체크 스크립트 [자바스트립트, Javascript] 디바이스 Device 별 (모바일, PC) 체크 스크립트 출처 - http://rahm.tistory.com/21
[HTML5+CSS3]모바일에서 터치, 슬라이드 모션 구현에 유용한 자바스크립트 라이브러리 터치, 슬라이드 모션을 위한 자바스크립트 라이브러리 모바일에서 터치라는 액션을 통해 슬라이드 모션을 적용할 수 있도록 하는 자바스크립트 라이브러이 제공 사이트입니다. 아래 파일은 해당 URL 에서 다운 받으실 수도 있습니다. 꼭, 터치 모션이 되는 디바이스에서 열어야, 슬라이드 모션이 확인디 됩니다. 바로가기 - http://swipejs.com
누구나 모바일 슬라이드 포토갤러리 구현할 수 있다 텍 기존의 클릭 방식이 아닌, 손가락으로 쓸어 넘기면 마치 앱 처럼 부드럽게 다음 슬라이드로 넘어가는 것이 이 소스가 가지는 가장 큰 특징입니다. 관련 사이트 및 링크 공식웹 사이트 : http://www.photoswipe.com/ 미리보기 : http://www.photoswipe.com/latest/examples/04-jquery-mobile.html 다운로드 : http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-2.1.6.zip 출처 - http://mjuzhj23.blog.me/140141533634
RWD, Responsive Web Design 반응형 웹에 대해서 반응형 웹(Responsive Web)의 등장배경 최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 데스크탑 / 모바일 폰 / 타블렛 PC 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web)이다. 반응형 웹(Responsive Web)이란? 사용자의 사용환경과 행동패턴에 유기적이고 적절하게..
모바일 웹사이트 주소창 자동 숨기기 스크립트 모바일 웹사이트 주소창 자동 숨기기 스크립트 아래 코드를 해당 페이지에 삽입하시면 됩니다.
안드로이드 개발시 주의점 중 dp, dpi, px 의 개념 대해 dp란 어쩔때 사용하는 것일까? 단순히 px을 dp로 변환하고자 한다면 dp = px * 0.66625로 계산한다.(해상도480*800 기준) 480*800 px => 320*533 dp이다. dp (dip, density independent pixel) 은 안드로이드에서 여러 화면 크기를 서포트 해주기 위해서 만든 유닛이다. 만약 많은 화면에서 내가 만든 레이아웃이 제대로 보이길 원한다면 dp를 써서 화면을 만드는 것이 좋다. 우선 주의할 것은 안드로이드는 160dpi를 기본으로 생각한다. 이것은 (320 x 480) 스크린의 density를 나다내는 것이다. 그러므로 480 x 800 (240dpi)의 스크린을 dp로 나타낸다면 320 x 533 (480 / 1.5, 800 / 1.5) 이 된다. ..
이열~~^^; 드디어 안드로이드에서 티스토리에 글쓰기 기능이 추가되다!! 정말 역사적인 순간임~! 이제 드뎌 폰으루 글쓰기가되는구나^^;; 좋다쿠나ㅋㅋ 기념으루다가ㅎㅎ 어제새벽 내컴에 SSD 드라이브를 설치하는 중간에 찍었던 사진ㅎㅎ 폰으루 포스팅하니까...처음이라그런지 약간 어색하구아잉ㅋㅋ 뭐..금방익숙해 지겠지요ㅎㅎ 그나저나 완전 졸리네... 오늘은 하나끝내고자야되는데...
Customize Android Browser Scaling with target-densityDpi Customize Android Browser Scaling with target-densityDpi Webkit 사용 브라우저들 이미지 뭉개지는게 DPI 조정 때문이었구나. 메타 태그를 쓸 때 target-densityDpi를 device-dpi로 지정해주면 된다. 물론 이후의 가변폭을 위한 스케일링 같은건 자기가 알아서 해야한다. 자세한건 링크 참조.출처 : http://khrislog.net/post/3873961648/customize-android-browser-scaling-with
아이폰 관련 가로,세로 모드시에 선택적 CSS파일 가져올수 있도록 하는 자바스크립트 아이팟터치/아이폰 ( 4세대 미만 ) 에서는 보통 가로 320 px, 세로 480 px 입니다. 그러므로 CSS파일 2개를 제작해주셔야합니다. 하나는 가로 320 px 로 지정하셔서 헤더,미들,푸터 제작후 가로 480 px 로 지정하신후 제작하셔서 2개의 CSS로 다음,네이버,파란,트위터,구글 처럼 애플모바일기기 호환성을 높힐수 있습니다. 소스 상에서는 다음과 같은 자바스크립트로 인식하게 할수있습니다. 위처럼 작성하시면 문제가 될것은 없습니다. 나머지는 여러분들의 몫 입니다.
모바일 웹 사이트 개발 시 기본적 선언부분 출처 - http://w-rn.tistory.com/23 모바일환경을 위해 html,php 페이지 에 작업을 해주셔야할것이 있습니다. 선언시에는 PC와는 다르게 으로 선언해주셔야합니다. 동적인 HTML 페이지를 만들기 위해서 이죠. ^^* 선언 하셨다면 그 아랫줄에 이렇게 작성해주시기 바랍니다. 그다음부터는 HEAD, BODY를 작성하셔야 합니다. 다만 문제가 될것은 사이에는 반드시 가 추가되어야 합니다. 그리고 아이팟터치/아이폰 환경의 사용자들은 홈화면에 바로가기를 추가할수 있고, 아이콘을 나타내려면 와 같이 표시하셔야합니다. 정도의 사이즈로 나타내주시면됩니다. 자, 이제 body부분을 작성해야합니다. 가로,세로 모드를 구분하기 위해서는 새로바뀐 형식으로 작성하셔야합니다. 이제, 기초적인 페이지 준비는..
모바일 웹디자인 시 png에서 8bit, 24bit 차이와 용량을 줄이는 방법 출처 - http://blog.naver.com/khihaho?Redirect=Log&logNo=50003988002
[모바일웹] 모바일 UX 디자인에 대한 명쾌한 요약본 출처 - http://naebon.blog.me/150095762460 모바일UX디자인 실무 - Juan Sanchez 모바일 웹을 준비하려먼 개발도구도 잘 알아야되겠지만, 그 보다 먼저, 기획의 일련의 과정으로 사용자를 전적으로 배려한 UX디자인에 대한 의견이 정해져야 하겠습니다. 앱을 만들고 유튜브에 홍보 동영상을 올린다던지, 홍보용 트위터를 만드는 것도 좋지만 가장 큰 앱 홍보는 앱UX 가 아닐까 생각합니다. 윈도폰7의 UI특성을 반영한 UX디자인 폼입니다. 아이폰 등이 각각의 페이지를 슬라이드식으로 전환하는 반면, 윈도폰7은 옆으로 긴 화면을 좌우로 스크롤하는 페이지형태(Metro Design Concept - HUB style)를 지향합니다. HTML5이후 웹에서는 거의 사용되지 않는 Layer..
[Mobile] 모바일 웹 개발, 화면 확대 방지 viewport 출처 : http://htglss.tistory.com/66 모바일 웹을 개발하기 위해서는 일반 컴퓨터 환경과는 약간 다르기 때문에 고려해야 할 사항들이 몇가지 있습니다. 오늘은 처음으로 모바일 웹에 대해 이야기 하고자 하는데요. 모바일 웹이 일반 웹과 다른 것 중 가장 중요한 것은 접속하는 환경적인 차이가 너무 확연하게 크다는 것입니다. 이미 웹 표준이 대두되면서 크로스브라우징 문제가 많이 있었는데요. 우리나라의 인터넷 익스플로러 기반으로 개발된 많은 웹페이지가 다른 브라우져(파이어폭스, 사파리, 크롬, 오페라 등)에서 많이 깨지게 되는 현상입니다. 그래도 그나마 그것은 비슷한 컴퓨터 환경인데 모바일 환경은 그 차원이 달라집니다. 우선 OS부터에서 매우 다양하고, 마우스가 없으며 키보드가 제한적입니다...
모바일 사이트 제작 시 참고할 만한 사이트 http://www.mobileawesomeness.com/