MaKeYOurOwN mkyoon

자주 쓰는 모바일용 CSS3 기억하기

Posted at 2010/12/22 11:37
Filed under CSS & Browsers/Mobile Safari

box-shadow: 3px 3px red, 2px 2px #eee; 
-webkit-box-shadow: 3px 3px red, 2px 2px #eee;
-moz-box-shadow: 3px 3px red, 2px 2px #eee;

border-radius: 20px/10px;
-webkit-border-radius: 20px/10px;
-moz-border-radius: 20px/10px;

background: url(gradient.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));
background: -moz-linear-gradient(top, #00abeb, #fff);

border-width: 0 20px 0 10px; 
border-image: url(http://shared.starpl.com/images2/mobile/btn_reply.gif) 0 20 0 10 stretch stretch;
-webkit-border-image: url(http://shared.starpl.com/images2/mobile/btn_reply.gif) 0 20 0 10 stretch stretch;
-moz-border-image: url(http://shared.starpl.com/images2/mobile/btn_reply.gif) 0 20 0 10 stretch stretch;

PS.

<link rel="apple-touch-icon-precomposed" href="http://shared.starpl.com/images2/mobile/img_home_add.png" />

iphone - 57 * 57

ipad - 72 * 72

iphone4 - 114 * 114

참고 : http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

Posted by mkyoon

Tag: css, 모바일
Response: No Trackback , No Comment
RSS :: http://mkyoon.com/rss/response/137

Trackback URL : http://mkyoon.com/trackback/137

안드로이드용 천지인 키보드의 이상현상

Posted at 2010/10/07 13:58
Filed under CSS & Browsers/Mobile Safari

스타플 모바일 서비스(http://m.starpl.com)는 꽤 오래전부터 있었습니다만,

어제 안드로이드에서 갑자기 새로운 문제점이 발견되었습니다.

기존폰의 자판에 익숙하던 분들이 안드로이드를 쓰면서

Qwerty 자판에 익숙하지 않아 천지인 키보드를 쓰는 경우가 많은데요.

위와 같은 INPUT 입력창에서 천지인 키보드로 한글을 2자 이상을 입력하면

입력창이 웹페이지에서 사라지는 현상을 발견했습니다.

(영문, 숫자입력은 문제 없었습니다.)

autocapitalize와 placeholder 속성을 제거하니 위의 현상은 사라졌습니다.

둘 중 하나라도 들어가있으면 이상현상이 나타났습니다.

autocapitalize, placeholder가 하는 역할은 Safari Reference에 설명이 되어있습니다.

autocapitalize 속성에 대한 설명 :

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/html/attribute/autocapitalize

placeholder 속성에 대한 설명 :

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/html/attribute/placeholder

천지인 키보드와 위의 속성에 대한 자세한 내막은 잘 모르겠습니다만

기기에서 이루어지는 한글 입력이 웹페이지에 직접적인 영향을 미칠 수가 있다니 놀랍습니다.

Posted by mkyoon

Tag: Android, autocapitalize, iPhone, placeholder, Webkit, 갤럭시s, 모바일, 천지인, 한글입력
Response: No Trackback , No Comment
RSS :: http://mkyoon.com/rss/response/136

Trackback URL : http://mkyoon.com/trackback/136

모바일 웹페이지 Tip - Webkit 브라우저를 중심으로

Posted at 2010/08/23 02:01
Filed under CSS & Browsers/Mobile Safari

모바일 웹페이지를 만들면서 느꼈던 점과 기록하고 싶은 것들을
PPT로 정리해보았습니다.

http://mkyoon.tomeii.com/docs/iphone(webkit)mobile_mkyoon.pdf

모바일의 한계
- 정말 중요한 컨텐츠만
- 팝업은 최소한으로
- 이미지는 최소한으로
- 1px 차이는 여유롭게
XHTML
- 2.1 DTD
  - 국내외 모바일 서비스의 DTD
- 2.2 해상도와 Viewport
  - 해상도의 차이
  - Viewport
  - 가로 세로 모드
- 2.3 바로가기 아이콘
  - 홈 화면에 추가
  - Apple Touch Icon
- 2.4 <link>
- 2.5 <table>
- 2.6 Link(anchor)
  - 전화번호
  - 메일주소
CSS
- 3.1 문서 너비는 100%로
- 3.2 Image 최소화
  - CSS Sprite
  - CSS Sprite 부작용
  - 둥근 모서리
  - 그림자
- 3.3 숨겼다 나타내기
  - visibility: hidden;
- 3.4 텍스트
  - 텍스트 크기
Javascript
- 주소창 숨기기
유용한 도구
- 시뮬레이터
- 프레임워크

Posted by mkyoon

Tag: 모바일, 아이폰, 안드로이드, 웹
Response: No Trackback , 2 Comments
RSS :: http://mkyoon.com/rss/response/135

Trackback URL : http://mkyoon.com/trackback/135

Comments List

비밀방문자 2011/01/07 10:39 # M/D Reply Permalink

관리자만 볼 수 있는 댓글입니다.
1. mkyoon 2011/01/12 15:32 # M/D Permalink
  
  답변 보내드렸습니다.^^

내가 만든 HTML 파일을 iPhone/iPod touch에서 보자.

Posted at 2009/05/21 01:20
Filed under CSS & Browsers/Mobile Safari

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

1. Introducing the iPhone and iPod touch Development Platform

앞서 소개한 Mobile Safari의 제한과 한계 표에도 나와있듯이
아이폰/아이팟터치의 로컬파일 시스템은 접근 불가능합니다.

따라서 다른 컴퓨터에서 웹페이지를 작업할 수 밖에는 없는데요.
만들어낸 웹페이지를 아이팟터치에서 보려고
매번 수정할 때 마다 웹 호스팅 계정에 FTP로 올려서 본다면 골치아파지겠죠>_<.
이런 경우, 무선공유기를 이용하고 있다면 모든 것은 OK~

PC사용자라면 APM이나 Aptana 등을 설치하여 웹서버를 만들거나,
MAC사용자라면 간단한 클릭 몇 번으로 아이팟터치에서 접근할 수 있는 웹서버를 만들 수 있습니다.

시스템 환경설정 / 인터넷 & 네트워크 - 공유 / 웹 공유 항목에 체크

이렇게 같은 공유기 안에 있는 외부 기기로부터 내 컴퓨터에 접근할 수 있는 주소가 만들어졌습니다.

실제로 아이팟터치로 위의 주소를 들어가보니 다음과 같은 페이지가 열렸습니다.

http://192.168.0.7/

http://192.168.0.7/~mkyoon/

위의 페이지가 실제로 위치하고 있는 곳은 다음과 같습니다.

사용자 컴퓨터의 웹사이트 (http://192.168.0.7/) : /라이브러리/WebServer/Documents
개인 웹 사이트 (http://192.168.0.7/~mkyoon/) : /사용자/맥계정이름(mkyoon)/사이트

테스트로 맥북에 (/사용자/계정이름/사이트) 테스트 페이지를 만들어 보았습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
   <title>테스트입니다</title>
   <link type="text/css" rel="stylesheet" href="lib/iui.css" />
   <style type="text/css">
      body { font: x-large Applegothic; text-align: center; }
   </style>
</head>
<body>
   테스트입니다.
</body>
</html>

Posted by mkyoon

Tag: iPhone, ipod touch, Macintosh, Mobile Safari, 맥, 아파치, 웹서버
Response: No Trackback , No Comment
RSS :: http://mkyoon.com/rss/response/127

Trackback URL : http://mkyoon.com/trackback/127

Mobile Safari의 제약과 한계

Posted at 2009/05/20 23:45
Filed under CSS & Browsers/Mobile Safari

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

1. Introducing the iPhone and iPod touch Development Platform

[표] 자원의 제약 (Resource Constraints)

자원(Resource)	한계(Limitation)
다운로드 된 텍스트 자원(HTML, CSS, Javascript 파일)	10MB
JPEG 이미지	128MB (all JPEG images over 2MB are subsampled - decoding the image to 16x fewer pixels)
PNG, GIF, TIFF	8MB
움직이는 GIF	2MB를 넘지 않을 경우에만 움직임. 넘는 경우 첫 프레임만 보임.
스트리밍되지 않는 미디어 파일	10MB
PDF, Word, Excel 문서	30MB (넘는 경우 굉장히 느려짐)
자바스크립트 계층과 객체 할당(stack & object allocation)	10MB
자바스크립트 실행	5초 (최상위 함수의 실행 시간이 5초가 넘어갈 경우 try/catch 에서 catch가 호출됨)
Mobile Safari 새창열림	8페이지

[표] 지원되지 않는 기술 (Technologies not Supported by iPhone/iPod touch)

영역(Area)	지원되지 않는 기술
웹 기술	플래시, 자바 애플릿, SOAP, XSLT, SVG, 기타 플러그인 설치 등
모바일 기술	WML
파일 접근	로컬 파일 시스템 접근
텍스트 상호작용	텍스트 선택, 잘라내기, 복사, 붙여넣기(OS 3.0 에서는 가능)
embedded video	In-place video (tapping and embedded element will put iPhone/iPod touch into video playback mode)
보안	Diffie-Hellman protocol, DSA keys, self-signed certifications, custom x.509 certificates
자바스크립트 이벤트	마우스와 키보드에 관련된 몇가지 이벤트
자바스크립트 명령어	showModalDialog(), print()
북마크 아이콘	.ico 파일
HTML	input type="file", tool tips
CSS	Hover 스타일, position: fixed

처음 들어보거나 모르는 기술들이 많네요.
지원되지 않는 마우스와 키보드에 관련된 이벤트는 Chapter 5에서 계속됩니다.

Posted by mkyoon

Tag: iPhone, Mobile Safari, 모바일 사파리, 아이팟터치, 아이폰, 제한, 한계
Response: No Trackback , No Comment
RSS :: http://mkyoon.com/rss/response/126

Trackback URL : http://mkyoon.com/trackback/126

MaKeYOurOwN mkyoon

Search Results for 'CSS & Browsers/Mobile Safari'

7 POSTS

자주 쓰는 모바일용 CSS3 기억하기

안드로이드용 천지인 키보드의 이상현상

모바일 웹페이지 Tip - Webkit 브라우저를 중심으로

Comments List

내가 만든 HTML 파일을 iPhone/iPod touch에서 보자.

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

Mobile Safari의 제약과 한계

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

[표] 자원의 제약 (Resource Constraints)

[표] 지원되지 않는 기술 (Technologies not Supported by iPhone/iPod touch)

Notices

Categories

Tag Cloud

Recent Posts

Site Stats