<input type="search" autocomplete="on" />
검색창의 인풋 타입이 search 입니다.

<input type="url" autocomplete="on" />
댓글 쓰기 창에서 웹 사이트 주소 입력 인풋 타입이 url 입니다.

• input type="search"
• input type="tel"
• input type="url"
• input type="email"
• input type="number"
• input type="datetime"
• input type="datetime-local"
• input type="date"
• input type="time"
• input type="month"
• input type="week"
• input type="range"
• input type="color"

HTML5의 인풋 타입을 적절하게 사용하면 아이폰 사용자에게 다음과 같이 문맥에 알맞는 자판을 보여줄 수 있습니다. 입력 커서가 인풋에 들어갔을 때 인풋 타입을 인식해서 최적화된 자판 배열을 표시합니다

input type="search" 일 때 아이폰은 자판에 Search 키를 보여줍니다. 아이폰으로 input type="search" 테스트 해보기.

input type="tel" 일 때 아이폰은 자판에 숫자와 + * # 키를 보여줍니다. 아이폰으로 input type="tel" 테스트 해보기.

input type="url" 일 때 아이폰은 자판에 .com과 Go 키를 보여줍니다. 아이폰으로 input type="url" 테스트 해보기.

CSS3 Media Queries

CSS3에는 Media Query 라는 명세가 있고 최신 브라우저들(IE9, Chrome, Safari, Firefox, Opera)과 아이폰용 모바일 사파리 브라우저도 이를 지원하고 있습니다. 다음은 모바일 뷰포트를 설정해서 적당히 확대한 다음 Media Query를 이용해서 레이아웃을 알맞게 정돈한 제 블로그의 모바일 화면 입니다. 아름답지요.

미디어 쿼리 문법을 간단하게 살펴보죠. 제 블로그는 모바일 환경이든 아니든 불문하고 브라우저의 너비가 980px 이하로 작아지면 화면 우측에 있는 글로벌 네비게이션이 화면 아래쪽으로 뚝 떨어집니다. 지금 브라우저의 폭을 조절해서 한번 확인해 보세요.

@media all and (min-width:980px) { /* 화면 너비가 980px 이상이고 미디어쿼리를 지원하는 브라우저라면 아래 코드를 해석함 */
.content{ float:left; width:600px } /* 콘텐츠 플롯하고 너비를 고정 */
.nav{ float:right; width:330px } /* 네비게이션 플롯하고 너비를 고정 */
}