반응형이 너무 어렵다.
사실 하던것과 달라서 무서운 것이겠지 ㅠㅠㅠㅠㅠㅠㅠ
하아 어렵다...............
이글을 읽고 내가 조금이라도 이해할수 있는것인가.
HTML5 Markup – Form Controls
HTML5 Form의 위력은 아이폰을 사용하는 분들이면 쉽게 체감할 수 있습니다. 제 블로그에서는 다음과 같은 타입의 Form Control을 사용 했습니다. 제 블로그의 End-user 페이지에서 Form Control 이라고 해 봐야 검색창과 글쓰기창 뿐인데요. 적용 결과는 다음과 같습니다.
<input type="search" autocomplete="on" />
검색창의 인풋 타입이 search 입니다.<input type="url" autocomplete="on" />
댓글 쓰기 창에서 웹 사이트 주소 입력 인풋 타입이 url 입니다.
이 밖에도 HTML5에는 새롭게 추가된 다양한 input type이 있습니다. 아래 항목들은 HTML5에 새롭게 추가된 input type 입니다. 링크를 클릭하면 실제로 코딩된 페이지를 만날 수 있습니다. 현재는 오페라 브라우저만 input type을 거의 완벽하게 지원하고 있습니다. 오페라 브라우저를 통해 예제를 확인해 보세요. 다른 브라우저와는 다르게 인풋을 좀 더 편리하게 작성할 수 있도록 도울 것입니다.
HTML5의 인풋 타입을 적절하게 사용하면 아이폰 사용자에게 다음과 같이 문맥에 알맞는 자판을 보여줄 수 있습니다. 입력 커서가 인풋에 들어갔을 때 인풋 타입을 인식해서 최적화된 자판 배열을 표시합니다.
input type="search" 일 때 아이폰은 자판에 Search 키를 보여줍니다. 아이폰으로 input type="search" 테스트 해보기.
input type="tel" 일 때 아이폰은 자판에 숫자와 + * # 키를 보여줍니다. 아이폰으로 input type="tel" 테스트 해보기.
input type="url" 일 때 아이폰은 자판에 .com과 Go 키를 보여줍니다. 아이폰으로 input type="url" 테스트 해보기.
input type="email" 일 때 아이폰은 자판에 @와 . 키를 보여줍니다. 아이폰으로 input type="email" 테스트 해보기.
input type="number" 일 때 아이폰은 자판에 숫자와 특수문자 키를 보여줍니다. 아이폰으로 input type="number" 테스트 해보기.
Responsive Web Design
사용자가 어떤 해상도의 단말을 사용하든 그에 알맞는 뷰를 보여줄 수 있는 유연한 레이아웃 설계 기법입니다. 이름은 정말 근사하지만 막상 내용 뜯어보면 참 볼것 없습니다.
Mobile Viewport Declaration
모바일 단말기는 기본적으로 PC용 화면 전체를 작은 화면 안에서 모두 보여줍니다. 작은 화면에 전체를 담으려니 다음과 같이 글씨가 깨알만해져서 확대하지 않고는 보기가 어렵겠지요.(물론 아이폰4는 그냥 봐도 보입니다. 326dpi & 640*960px을 자랑하는 레티나 디스플레이잖아요.) 적당히 확대한 다음 수직 수평 스크롤을 해 가면서 어렵게 읽을 수 밖에 없습니다.
모바일 뷰포트를 선언하면 모바일 단말에 탑재된 웹 브라우저(Safari Mobile for the iPhone, Android browser, webOS browser in Palm Pre and Pixi devices, Opera Mini, Opera Mobile and BlackBerry browsers)는 웹 페이지를 적절히 크게 확대해서 보여줍니다.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes" />
meta 태그의 각 속성에 대한 자세한 설명
그러나 콘텐츠의 너비가 크기 때문에 당연히 수평 스크롤이 필요합니다. 아래 이미지를 보면 아시겠지만 오른쪽에 내용이 더 있는데 잘려서 보이지 않습니다. 사용자는 여전히 수직 수평 스크롤을 모두 해야만 하는데 이것은 여간 짜증스러운 일이 아닙니다.
그래서 필요한 것이 바로 Responsive Web Design 입니다. 사용자가 어떤 해상도의 단말기를 가지고 있더라도 알아서 유연하게 콘텐츠를 정돈해서 보여주는 기술이 필요합니다. 한때는 320px의 화면 너비가 모바일 화면 크기의 대세가 될 줄 알았지만 지금은 그렇지 않습니다. 매우 다양한 해상도를 지닌 디바이스들이 쏟아져 나오고 있지요. 그렇게 새로운 단말기가 등장할 때마다 그 해상도에 맞는 웹 페이지 화면을 추가로 개발하시겠습니까? 세상에 그런 삽질을.