티스토리 뷰
Section #1
안드로이드의 웹 브라우저는 모두 같은 브라우저인가?
No. 아닙니다. 안드로이드 OS(운영체제)마다 버전 같아도 브라우저는 다룰 수 있습니다.
쉽게 말해서 어떤 스마트폰에는 지원하는 브라우저가 있는 반면 어떤 스마트폰에는 지원하지 않는 브라우저도 있습니다.
Section #2
그러면 이제 대표적인 스마트폰 웹 페이지를 만들때 주의해야할 점에 대해 말씀드리겠습니다.
1. overflow 속성을 사용해 스크롤(scroll)을 넣을 수 없습니다.
- 스마트폰 웹 브라우저는 대부분 overflow 속성에 scroll을 적용할 수 없습니다.
(물론 가능한 스마트폰 웹 브라우저도 존재합니다.)
2. 상태 선택자를 사용할때 주의를 해야합니다.
- 스마트폰은 터치를 사용하므로 화면을 누르는 순간 바로 클릭이 적용됩니다.
그러므로 스마트폰 웹 브라우저에서는 hover 상태 선택자와 active 상태 선택자를 사용할때 주의를 해야합니다.
3. 동위 선택자에 제한이 있습니다.
- 대부분의 스마트폰 웹 브라우저는 ~선택자를 지원하지 않습니다.
(현재 지원하는 브라우저가 많이 나오가있는 추세입니다.)
4. iOS(아이폰)의 웹 브라우저는 <label>태그에 버그가 존재합니다.
- iOS 브라우저인 safari(사파리)는 <label>태그를 터치해도 아무런 반응이 없습니다.
이를 해결하는 방법은
<body>
<label for="name" onclick="">Name</label>
<input id="name" type="text" />
</body>
이렇게 해주어야 합니다.
5. 안드로이드의 웹 브라우저는 대부분 CSS3 그레이디언트를 적용하지 못합니다.
'허접한 프로그래밍 > HTML5+CSS3' 카테고리의 다른 글
| [스마트폰]스마트폰 레이아웃 구성 #2(스프라이트 이미지) (0) | 2014.01.27 |
|---|---|
| [스마트폰]스마트폰 레이아웃 구성 #1(초기화 및 헤더 구조 작성) (0) | 2014.01.24 |
| HTML5와 CSS3를 이용한 간단한 Web페이지 만들기[컨텐츠 작성하기] -part6- (1) | 2014.01.01 |
| HTML5와 CSS3를 이용한 간단한 Web페이지 만들기[헤더 폰트변경&꾸미기] -part5- (0) | 2014.01.01 |
| HTML5와 CSS3를 이용한 간단한 Web페이지 만들기[헤더 구조 꾸미기] -part4- (4) | 2014.01.01 |
