[HTML] About Mobile Web..

1 . 모바일 해상도

iPhone 320 * 480
iPhone4 960 * 640
모토로이 해상도 854 * 480
HTC 디자이어(넥서스원) 800 * 480
옵티머스Q 800 * 480
갤럭시A 800 * 480
갤럭시S 800 * 480
시리우스 800 * 480
베가 800 * 480

아이패드 / 1024×768

2. 화면 확대비율 고정

<meta name=”viewport” content=”width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no” />

2-1. webkit 기반의 브라우저에서 텍스트 사이즈가 들쑥날쑥 하지 않도록 하기.

body {
-webkit-text-size-adjust: none;
}

3. 사이트 아이콘 제공

아이폰 3g/s

<link rel=”apple-touch-icon-precomposed” media=”screen and (resolution: 163dpi)” href=”/iOS-57.png” />

아이패드

<link rel=”apple-touch-icon-precomposed” media=”screen and (resolution: 132dpi)” href=”/iOS-72.png” />

아이폰 4

<link rel=”apple-touch-icon-precomposed” media=”screen and (resolution: 326dpi)” href=”/iOS-114.png” />

4. 레티나 디스플레이

.myImage {
height: 40px;
width: 100px;
-webkit-background-size: 100px 40px;
background: url(“images/myImage.jpg”);
}

@media screen and (-webkit-device-pixel-ratio: 2) {
.myImage {
background: url(“images/myImage@2x.jpg”);
}
}

리사이징 – <img src=width=”100%” or style=”width:100%;”/>

추천 Web Design 사이트 링크 : http://www.cssiphone.com/

추천 iPhone App Desgin Stie Link : http://www.designussion.com/the-best-iphone-app-websites-of-2009/

아이콘 추천 사이트 링크 : http://www.iconfinder.com/search

[HTML5] Tutorial

the following Supported Site

  • html5doctor.com
  • html5gallery.com
  • html5test.com
  • Modernizr
  • html5demos.com
  • html5rocks.com < google >
  • hacks.mozilla.or.kr
  • webstandards.or.kr/html5

[CSS] 가운대로 정렬하기

Div를 이용하여 화면 중앙에 Content를 정렬하는 방법입니다.

<style type=”text/css”>

#center {
width: 200px; // 박스의 크기가 200×200이라고 가정합시다.

height: 200px;

position: absolute;

top: 50%; // 50프로의 의미는 현재 화면/2 지점에 놓는다는 의미입니다.

left: 50%; // 이렇게 되면 중앙을 약간 빗나가게 되는데 그 처리를 -margin값을 주어 해결하고 있습니다.

margin: -100px 0 0 -100px;

}

</style>

…..

<body>

<div id=”center”>가운데 정렬</div>

</body>