모바일 해상도 정리
모바일 2017. 3. 2. 17:51'모바일' 카테고리의 다른 글
| 모바일 해상도 테스트 (0) | 2015.12.29 |
|---|---|
| 디바이스별 해상도 (0) | 2015.07.14 |
| 화면 터치시 터치영역 제거 (0) | 2015.06.11 |
| 미디어쿼리 분기점 (0) | 2012.11.10 |
| [아이폰4 대응] css sprite, -webkit-background-size (0) | 2012.01.30 |
'모바일'에 해당되는 글 20건
모바일 해상도 테스트
모바일 2015. 12. 29. 15:22'모바일' 카테고리의 다른 글
| 모바일 해상도 정리 (0) | 2017.03.02 |
|---|---|
| 디바이스별 해상도 (0) | 2015.07.14 |
| 화면 터치시 터치영역 제거 (0) | 2015.06.11 |
| 미디어쿼리 분기점 (0) | 2012.11.10 |
| [아이폰4 대응] css sprite, -webkit-background-size (0) | 2012.01.30 |
디바이스별 해상도
모바일 2015. 7. 14. 18:34
'모바일' 카테고리의 다른 글
| 모바일 해상도 정리 (0) | 2017.03.02 |
|---|---|
| 모바일 해상도 테스트 (0) | 2015.12.29 |
| 화면 터치시 터치영역 제거 (0) | 2015.06.11 |
| 미디어쿼리 분기점 (0) | 2012.11.10 |
| [아이폰4 대응] css sprite, -webkit-background-size (0) | 2012.01.30 |
화면 터치시 터치영역 제거
모바일 2015. 6. 11. 17:17출처 : http://htglss.tistory.com/123
[Mobile] 모바일웹, 아이폰 터치 시 발생하는 탭 하이라이트 제거
Internet World/Mobile 2011/07/08 20:59오랜만에 포스팅을 많이 하게 되네요. 이런건 좋지 않은데, 주기적으로 꾸준히 하는게 더 나을텐데 그게 잘은 안되네요. 약간은 어려운 감이 있습니다. 이번에 이야기 할 이야기는 iOS 사파리에서 일어나는 이야기 인데요. 원래는 이것을 '발생하는 문제'라는 표현을 썼었는데, 잘 생각해보니 이 것은 평소에 우리에게 도움을 주는 좋은 기능입니다.
아... 서론이 너무 길었죠? 그것은 바로 터치 시에 발생하는 검은 하이라이트 입니다.
이것이 무어냐 하면, iOS 사파리로 웹브라우징 시에 링크를 제대로 클릭했는가 확인할 수 있는 좋은 기능인데요. 아래 그림에서 보실 수 있습니다. 그림에서는 '미니홈피' 버튼을 터치 했을 때 오른쪽의 그림과 같이 검은 하이라이트가 생기게 됩니다. (다들 아시는 것 처럼 사파리 브라우저에서 클릭을 오래 누르고 있으면 하단에 메뉴가 나오게 되는데 이 사이에 신속하게 캡쳐를 하기위해 몇 장을 캡쳐했는지 모르겠습니다.)
하지만 이런 기능도 어떨 때는 좀 안나왔으면 하는 경우가 있을 수 있습니다. 저의 경우에는 앱 내에 들어가는 페이지를 제작하는데, 어플리케이션의 경우 터치를 눌렀을 때 발생하는 이벤트가 따로 있어서 그 디자인을 출력해야 하는데 하이라이트가 발생하면서 그 부분을 검게 가리게 되는 사태가 발생하게 되었습니다. 저와 비슷한 경우가 많이 있으실 것이라 예상됩니다. 그렇게 되면 이렇게 좋은 기능도 문제가 되는데요. 이 문제를 해결하는 방법은 아주 간단합니다. 하이라이트를 제거하고자 하는 링크에 스타일을 적용해주기만 하면 되는데요.
a { -webkit-tap-highlight-color:transparent;}
위의 속성을 원하는 링크에 주시면 해당 링크를 터치 시에 하이라이트가 나타나지 않습니다. 참 쉽네요. 이 하이라이트 속성은 또 다르게 사용할 수 있는데요. transparent 부분을 다른 컬러를 넣어서 사용하시면 하이라이트를 원하시는 컬러로 대체해서 사용하실 수 있습니다.
아... 서론이 너무 길었죠? 그것은 바로 터치 시에 발생하는 검은 하이라이트 입니다.
이것이 무어냐 하면, iOS 사파리로 웹브라우징 시에 링크를 제대로 클릭했는가 확인할 수 있는 좋은 기능인데요. 아래 그림에서 보실 수 있습니다. 그림에서는 '미니홈피' 버튼을 터치 했을 때 오른쪽의 그림과 같이 검은 하이라이트가 생기게 됩니다. (다들 아시는 것 처럼 사파리 브라우저에서 클릭을 오래 누르고 있으면 하단에 메뉴가 나오게 되는데 이 사이에 신속하게 캡쳐를 하기위해 몇 장을 캡쳐했는지 모르겠습니다.)
하지만 이런 기능도 어떨 때는 좀 안나왔으면 하는 경우가 있을 수 있습니다. 저의 경우에는 앱 내에 들어가는 페이지를 제작하는데, 어플리케이션의 경우 터치를 눌렀을 때 발생하는 이벤트가 따로 있어서 그 디자인을 출력해야 하는데 하이라이트가 발생하면서 그 부분을 검게 가리게 되는 사태가 발생하게 되었습니다. 저와 비슷한 경우가 많이 있으실 것이라 예상됩니다. 그렇게 되면 이렇게 좋은 기능도 문제가 되는데요. 이 문제를 해결하는 방법은 아주 간단합니다. 하이라이트를 제거하고자 하는 링크에 스타일을 적용해주기만 하면 되는데요.
위의 속성을 원하는 링크에 주시면 해당 링크를 터치 시에 하이라이트가 나타나지 않습니다. 참 쉽네요. 이 하이라이트 속성은 또 다르게 사용할 수 있는데요. transparent 부분을 다른 컬러를 넣어서 사용하시면 하이라이트를 원하시는 컬러로 대체해서 사용하실 수 있습니다.
--------------------------------------------------------------------------------------------------------
안드로이드 계열에서 테스트중 터치시 파란색 불투명 영역이 백그라운드에 노출, svg로 그린 동그라미 영역에 터치영역을 같이 잡아 동그라미를 터치할때 엉뚱한곳에 영역이 표시되었다. 터치영역을 li로 바꾸자 점을 터치할때는 엉뚱한 곳에, li 를 터치할때는 li 영역이 표시되었다.
* {-webkit-tap-highlight-color:transparent;} 를 해당 페이에만 넣어서 해결.
'모바일' 카테고리의 다른 글
| 모바일 해상도 테스트 (0) | 2015.12.29 |
|---|---|
| 디바이스별 해상도 (0) | 2015.07.14 |
| 미디어쿼리 분기점 (0) | 2012.11.10 |
| [아이폰4 대응] css sprite, -webkit-background-size (0) | 2012.01.30 |
| Carousel (0) | 2011.07.05 |
미디어쿼리 분기점
모바일 2012. 11. 10. 11:34참고 사이트 : http://mediaqueri.es/
갤럭시s3 전까진 아래게 맞는거 같은데...요즘 해상도가 더 높은것들이 나와서...고민이다....
|
320픽셀 |
휴대폰과 같은 소형 스크린 기기에서 portrait 모드일 때 |
|
480픽셀 |
휴대폰과 같은 소형 스크린 기기에서 landscape 모드일 때 |
|
600픽셀 |
아마존 킨들(600x800), 반스앤노블(600x1024)과같은 소형 태블릿에서 portrait 모드일 때 |
|
768픽셀 |
아이패드(768x1024)와 같은 10인치 태블릿에서 portrait 모드일 때 |
|
1024픽셀 |
아이패드(768x1024)와 같은 태블릿에서 landscape 모드일때, 특정 노트북, 넷북, 데스크톱의 디스플레이일 때 |
|
1200픽셀 |
와이드 스크린 디스플레이, 주요 노트북, 데스크톱의 브라우저일 때 |
반응형 웹 디자인을 제작하기 위한 미디어쿼리 해상도 분기점 리스트 입니다.
resolution break point 라고도 합니다.
국내에도 다양한 해상도를 지닌 디바이스들이 존재하지만 현 디바이스 시장에서 가장 많이 사용되는 제품을 주로 하여,
해상도 분기점을 사용하는 편입니다.
꼭 위의 분기점들이 완벽하게 모든 기기들을 지원한다고 할 수는 없습니다. 그러나 css3 속성인 '미디어쿼리'를 지원하고 'viewport'를
사용한다면 현 시장에서 대중적으로 사용되는 디바이스에는 전부 지원이 가능한 분기점 리스트 입니다.
[출처] 반응형 웹 디자인을 위한 해상도 분기점 리스트|작성자 운돌이
'모바일' 카테고리의 다른 글
| 디바이스별 해상도 (0) | 2015.07.14 |
|---|---|
| 화면 터치시 터치영역 제거 (0) | 2015.06.11 |
| [아이폰4 대응] css sprite, -webkit-background-size (0) | 2012.01.30 |
| Carousel (0) | 2011.07.05 |
| 모바일 프레임워크 (0) | 2011.07.05 |
[아이폰4 대응] css sprite, -webkit-background-size
모바일 2012. 1. 30. 10:20
모바일 페이지 마크업시 이미지 작업을 하다보면 아이폰 4에서 이미지가 자글자글하게 깨지게 된다.
광고에서 흔히 들었던 바로 그 레티나 디스플레이(Retina Display) 때문인데,
대응방법(특히 이미지 스프라이트)을 웹에 아무리 찾아봐도 바로 딱!!!!! 적용할만한 예제가 없어서 직접 포스팅해본다.
한번 해보면 차암 쉬운데..
막상 예제만 보고 하려면 살짝 막막하.. ㄴ건 나뿐이겠지? ㅠㅠ 힝..
1. 일반 이미지의 경우
고해상도 이미지를 width="" height="' 값으로 제어
2. 이미지 스프라이트
======================================================================================
정확히 2배인 이미지 각각 준비.
(가급적 각각의 디자인을 전달받는게 좋음. 큰 이미지 사이즈를 축소시키면 라인구분이 뚜렷하지 못함)
구분을 편하게 하기 위해 2배 이미지에는 x2를 붙임. 파일명은 맘음대로~
spr_img.png (256*31)
spr_imgx2.png (512*62)
======================================================================================
기본 마크업은 아래와 같이..
*html*
<a href="#" class="btn_postNo">우편번호</a>
<a href="#" class="btn_cncl">취소</a>
*css*
.btn_postNo{display:block;width:65px;height:30px;background:url(spr_img.png) no-repeat}
.btn_cncl{display:block;width:51px;height:31px;background:url(spr_img.png) no-repeat -205px 0}
======================================================================================
-webkit-background-size 적용은 아래와 같이..
@medai screen and... 라인 추가. 2배 이미지 경로를 적어준다.
-webkit-background-size:값은 작은 이미지의 전체 사이즈를 적어준다.
background-position:값은 작은 해상도 기준으로 적어준다. 이미지가 정확히 2배라면 다른 설정은 필요없다.
*css*
@media screen and (-webkit-min-device-pixel-ratio:2){.btn_postNo,.btn_cncl{background-image:url(spr_imgx2.png)}}
.btn_postNo{display:block;width:65px;height:30px;background:url(spr_img.png) no-repeat;-webkit-background-size:256px 31px}
.btn_cncl{display:block;width:51px;height:31px;background:url(spr_img.png) no-repeat -205px 0;-webkit-background-size:256px 31px}
======================================================================================
위와 같이 마크업하면 아이폰3에서는 작은 해상도의 이미지가 출력되고, 4에서는 큰 해상도의 이미지가 출력된다.
아래와 같이 좀 더 정리할 수도 있다.
*html*
<a href="#" class="btn btn_postNo">우편번호</a>
<a href="#" class="btn btn_cncl">취소</a>
*css*
@media screen and (-webkit-min-device-pixel-ratio:2){.btn{background-image:url(spr_imgx2.png)}}
.btn{display:block;background:url(spr_img.png) no-repeat;-webkit-background-size:256px 31px}
.btn_postNo{width:65px;height:30px}
.btn_cncl{width:51px;height:31px;background-position:-205px 0}
======================================================================================
음..
내 수준에 맞게 쉽게 쓴다고 썼는데, 어느날 갑자기 딱 봤는데 또 이해 못하고 그러는 건 아니겠지? -_ -;;;;;;
Carousel
모바일 2011. 7. 5. 17:03출처 : http://blog.iolo.pe.kr/491
/************************************************************************/
http://cubiq.org/iscroll-4
• hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
• vScroll, same as above for vertical scroll.
• hScrollbar, set this to false to prevent the horizontal scrollbar to appear.
• vScrollbar, same as above for vertical scrollbar.
• fixedScrollbar, on iOS the scrollbar shrinks when you drag over the scroller boundaries. Setting this to true prevents the scrollbar to move outside the visible area (as per Android). Default: true on Android, false on iOS.
• fadeScrollbar, set to false to have the scrollbars just disappear without the fade effect.
• hideScrollbar, the scrollbars fade away when there’s no user interaction. You may want to have them always visible. Default: true.
• bounce, enable/disable bouncing outside of the boundaries. Default: true.
• momentum, enable/disable inertia. Default: true. Useful if you want to save resources.
• lockDirection, when you start dragging on one axis the other is locked and you can keep dragging only in two directions (up/down or left/right). You may remove the direction locking by setting this parameter to false.
/*****************************************/
JQuery 모바일 같은데 제대로 안됐다. 시간날때 다시 시도.
https://github.com/blackdynamo/jQuery-Mobile-Carousel
웹에서 아이폰스러운 Carousel 구현하기
페 이지 컨트롤(UIPageControl; Carousel; 일명 회전목마 컨트롤)은 아이폰이나 안드로이드폰을 쓰면 가장 먼저 접하게되는 UI 컨트롤이다. 일명 홈 스크린이라고 불리는 화면에서 가로 또는 세로로 플리킹(flicking)하면 이전/다음 페이지로 이동하는 그 컨트롤이다. 아이폰의 경우에는 화면 하단에 하얗고 까만 작은 동그라미가 있고, 안드로이드는 화면 상단 좌우에(폰에 따라 조금씩다르다) 작은 동그라미가 있어서, 총 몇 페이지 중에서 몇 번째 페이지를 보고 있는 지를 알려준다.
이 글에서 설명하는 방법을 안드로이드용 푸딩얼굴인식 앱을 만들면서 활용했는데, 데모 동영상에서 35초와 1분 10초 근처에 나오는 화면이 이 컨트롤을 활용한 것이다.
백문이불여일견! 코드를 살펴보자!
$(document).ready(function() {
var iscroll = new iScroll('wrapper', {
snap: 'li',
momentum: false,
hScrollbar: false,
vScrollbar: false,
onScrollEnd: function() {
$('#indicator li').each(function(i, node) {
if(i === iscroll.currPageX) {
$(node).addClass('active');
} else {
$(node).removeClass('active');
}
});
}
});
iscroll.scrollToPage(0);
});
#wrapper {
width:200px;/*=page_width*/
height:200px;/*=page_height*/
margin:0;
padding:0;
overflow:none;
background-color:#fff;
}
#scroller {
position:relative;
top:0;
left:0;
width:600px;/*=number_of_page*page_width*/
height:200px;
float:left;
}
#scroller ul {
list-style:none;
position:relative;
display:block;
margin:0;
padding:0;
top:0;
left:0;
width:100%;
height:100%;
}
#scroller li {
display:block;
float:left;
width:200px;
height:200px;
}
/* 나는 깜찍한 CSS로 아이폰스러운 페이지 인디케이터를 구현하였으나 공간이 부족하여 생략한다 -_-; */
<div id="wrapper">
<div id="scroller">
<ul>
<li><div>1st page!</div></li>
<li><div>2nd page!</div></li>
<li><div>3rd page!</div></li>
</ul>
</div>
</div>
<div id="indicator">
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
</ul>
</div>
백문이불여일RUN! 결과를 확인하자!(위에서 생략했던 깜찍한 CSS도 포함되어 있음)
http://jsbin.com/epeci5
이 글에서는 iScroll 라이브러리를 활용하여 페이지 컨트롤을 구현하고, 덤으로 아이폰과 유사한 인디케이터 까지 구현해 보았다.
모 바일 단말은 화면이 작기 때문에 이런 유형의 컨트롤(탭/Carousel/...)들이 꽤 다양하고, 또 유용하지만, 직접 만들자면 쉽지 않다. 그렇다고 이 컨트롤 하나 때문에 Sencha나 jQueryMobile 같은 덩치 큰 프레임웍을 사용하는 것이 부담스럽다면, iScroll 라이브러리는 한 번 쯤 살펴볼 가치가 있다.
참고자료:
http://cubiq.org/iscroll-4
https://github.com/blackdynamo/jQuery-Mobile-Carousel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Carousel
http://www.winktoolkit.org/documentation/module/592/
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIPageControl_Class/Reference/Reference.html
웹에서 아이폰스러운 Carousel 구현하기
페 이지 컨트롤(UIPageControl; Carousel; 일명 회전목마 컨트롤)은 아이폰이나 안드로이드폰을 쓰면 가장 먼저 접하게되는 UI 컨트롤이다. 일명 홈 스크린이라고 불리는 화면에서 가로 또는 세로로 플리킹(flicking)하면 이전/다음 페이지로 이동하는 그 컨트롤이다. 아이폰의 경우에는 화면 하단에 하얗고 까만 작은 동그라미가 있고, 안드로이드는 화면 상단 좌우에(폰에 따라 조금씩다르다) 작은 동그라미가 있어서, 총 몇 페이지 중에서 몇 번째 페이지를 보고 있는 지를 알려준다.
이 글에서 설명하는 방법을 안드로이드용 푸딩얼굴인식 앱을 만들면서 활용했는데, 데모 동영상에서 35초와 1분 10초 근처에 나오는 화면이 이 컨트롤을 활용한 것이다.
백문이불여일견! 코드를 살펴보자!
| $(document).ready(function() { var iscroll = new iScroll('wrapper', { snap: 'li', momentum: false, hScrollbar: false, vScrollbar: false, onScrollEnd: function() { $('#indicator li').each(function(i, node) { if(i === iscroll.currPageX) { $(node).addClass('active'); } else { $(node).removeClass('active'); } }); } }); iscroll.scrollToPage(0); }); |
| #wrapper { width:200px;/*=page_width*/ height:200px;/*=page_height*/ margin:0; padding:0; overflow:none; background-color:#fff; } #scroller { position:relative; top:0; left:0; width:600px;/*=number_of_page*page_width*/ height:200px; float:left; } #scroller ul { list-style:none; position:relative; display:block; margin:0; padding:0; top:0; left:0; width:100%; height:100%; } #scroller li { display:block; float:left; width:200px; height:200px; } /* 나는 깜찍한 CSS로 아이폰스러운 페이지 인디케이터를 구현하였으나 공간이 부족하여 생략한다 -_-; */ |
| <div id="wrapper"> <div id="scroller"> <ul> <li><div>1st page!</div></li> <li><div>2nd page!</div></li> <li><div>3rd page!</div></li> </ul> </div> </div> <div id="indicator"> <ul> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> </ul> </div> |
백문이불여일RUN! 결과를 확인하자!(위에서 생략했던 깜찍한 CSS도 포함되어 있음)
| http://jsbin.com/epeci5 |
이 글에서는 iScroll 라이브러리를 활용하여 페이지 컨트롤을 구현하고, 덤으로 아이폰과 유사한 인디케이터 까지 구현해 보았다.
모 바일 단말은 화면이 작기 때문에 이런 유형의 컨트롤(탭/Carousel/...)들이 꽤 다양하고, 또 유용하지만, 직접 만들자면 쉽지 않다. 그렇다고 이 컨트롤 하나 때문에 Sencha나 jQueryMobile 같은 덩치 큰 프레임웍을 사용하는 것이 부담스럽다면, iScroll 라이브러리는 한 번 쯤 살펴볼 가치가 있다.
참고자료:
http://cubiq.org/iscroll-4
https://github.com/blackdynamo/jQuery-Mobile-Carousel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Carousel
http://www.winktoolkit.org/documentation/module/592/
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIPageControl_Class/Reference/Reference.html
/************************************************************************/
http://cubiq.org/iscroll-4
• hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
• vScroll, same as above for vertical scroll.
• hScrollbar, set this to false to prevent the horizontal scrollbar to appear.
• vScrollbar, same as above for vertical scrollbar.
• fixedScrollbar, on iOS the scrollbar shrinks when you drag over the scroller boundaries. Setting this to true prevents the scrollbar to move outside the visible area (as per Android). Default: true on Android, false on iOS.
• fadeScrollbar, set to false to have the scrollbars just disappear without the fade effect.
• hideScrollbar, the scrollbars fade away when there’s no user interaction. You may want to have them always visible. Default: true.
• bounce, enable/disable bouncing outside of the boundaries. Default: true.
• momentum, enable/disable inertia. Default: true. Useful if you want to save resources.
• lockDirection, when you start dragging on one axis the other is locked and you can keep dragging only in two directions (up/down or left/right). You may remove the direction locking by setting this parameter to false.
/*****************************************/
JQuery 모바일 같은데 제대로 안됐다. 시간날때 다시 시도.
https://github.com/blackdynamo/jQuery-Mobile-Carousel
'모바일' 카테고리의 다른 글
| 미디어쿼리 분기점 (0) | 2012.11.10 |
|---|---|
| [아이폰4 대응] css sprite, -webkit-background-size (0) | 2012.01.30 |
| 모바일 프레임워크 (0) | 2011.07.05 |
| 아이폰 시뮬레이터 (0) | 2011.06.21 |
| [팁/테크] 윈도우 7 폰을 위한 UI 디자인 툴 - 위트 스튜디오 코디네이터 (0) | 2011.06.20 |
모바일 프레임워크
모바일 2011. 7. 5. 16:37
SENCHA TOUCH - 네이티브처럼 보이는 웹앱 프래임워크
http://www.sencha.com/products/touch/
http://dev.sencha.com/deploy/touch/examples/kitchensink/ (크롬, 사파리)
장점 : 다양한 UI와 훌륭한 성능과 기능을 보입니다. 하단 탭바 형태를 기본으로 지원합니다.
특정영역 스크롤 기능을 내장합니다(iscroll과 같이). zoom, pinch 기능을 제공합니다.
단점 : 아이폰에서 돌린다해도 기본 로딩시간이 깁니다. 모두 JS를 돌아가기 때문에 브라우저의 back 버튼을 지원하지 않습니다.
안드로이드에서 화면전환 번쩍거림이 있습니다. ExtJS 라이브러리 중심으로 구성되어 EXTJS를 능통자가 아니면 매우 어렵다고 합니다.
라이센는 소스를 공개할 경우 상업적으로 이용가능하다고 합니다.
Android/iOS계열/블랙베리 지원
Sencha Touch - ExtJS를 기반으로 jQTouch, Raphael이 결합된 프레임워크
- ExtJS는 대화명 웹 어플리케이션 제작을 위한 자바스크립트 라이브러리로 AJAX, DHTML, DOM 등을 사용한다.
- jQTouch는 오픈 소스 jQuery 플러그인의 하나로 HTML, CSS, Javascript 등을 사용하여 Touch UI를 강화하는 기능을 한다.
- Raphael은 SVG(Scalable Vector Graphic, 2D 벡터 그래픽 지원을 위한 XML 기반의 파일 형식)를 지원한다.
- 자료를 주고 받는 방식으로는 key와 Value 구조를 가진 JSON(JavaScript Object Notation)을 사용한다.
JQUERY MOBILE - 터치에 최적화된 웹 프래임워크
http://jquerymobile.com/
http://jquerymobile.com/demos/1.0b1pre/ (익스, 크롬, 사파리, 오페라, 파폭)
장점 : HTML 중심의 마크업 언어라서 기존에 개발하던대로 바로 개발할 수 있습니다. 그럭저럭 괜찮은 기능들을 제공합니다(아이폰만).
단점 : 하단 탭바를 지원하지 않습니다. 특정영역 스크롤 기능이 없습니다. 아직까진 알파버전이라 버그가 많고 정식 공개되지 않았습니다. (베타 출시예정) 안드로이드에서 깜빡임 현상이 있습니다.
게시판용이나 화면뷰만을 위한것으로는 추천하고 가장 많이 쓰인다고 합니다.
Android/iOS계열/블랙베리/심비안/Palm WebOS/Windows Mobile/Opera Mobile/Firefox Mobile 지원
(베타 버전에서는 Window Phone7까지도 지원하겠다고 하고, 삼성의 bada또한 테스트계획이 있다고 합니다.)
http://brooky.cc/2011/04/23/jquery-mobile-cheat-sheet/ - jQuery mobile cheat sheet
JQUERY MOBILE과 SENCHA 둘다 아이폰은 어떤 프레임웍을 사용해도 모두 잘 돌아가는데 안드로이드에서는 문제가 많다고합니다..
대체로 아이폰을 위한것이고 안드로이드를 위한 하이브리드 프레임웍은 제대로 나온 것이 없다고합니다.
프레임워크 없이 그냥 html5, css3로만 사용해도 안드로이드에서는 문제가 많이 발생하고 폰마다 차이가 심합니다.
jqtouch - SENCHA에 인수되서 개발중단되었습니다.
http://www.jqtouch.com/
http://www.jqtouch.com/preview/demos/main/ (크롭, 사파리, 오페라, 파폭)
장점 : jQuery의 모바일용 플러그인으로 SENCHA와 JQM 보다는 가볍습니다. 참고자료가 가장 다양합니다.
단점 : 개발중단. 가볍다고는 해도 역시 안드로이드에선 버그가 많다고..
jquery, 제이슨 등의 자바스크립트 라이브러리는 무겁고 지원하는 라이브러리가 폰의 브라우저 마다 상이하기 때문에 사용을 지양합니다.
필요한js는 가급적 그때그때 코딩하는 편이 사용자 측면에서 유리하고 불필요한 UI 용 js 는 지양해야 합니다. DOM 객체를 이용한 표준 스크립트 사용을 권장합니다.
table 코딩시 마크업페이지 용량이 증가하며, 비표준이므로 지양합니다. 가급적 맞는 태그 사용을 하셔야 렌더링 속도가 빨라지며 용량 감소 및 유지관리가 편해 집니다.
==참고 페이지========================================================================================
http://openweb.or.kr/?p=1703 웹앱 추천게시글 _ 09년 12월 게시
http://lifehack.kr/90097555023 디자인 포인트 7 _ 10년 10월 게시
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=36538 마소 센차터치 소개칼럼 _ 10년 12월 게시
http://w3labs.kr/?p=326 jQuery Mobile 과 Sencha Touch 비교 게시글 _ 11년 3월 게시
http://www.w3c.or.kr/Translation/mwbp_flip_cards/ 모바일화를 위한 10가지 가이드
http://www.slideshare.net/guruguru/html5-on-mobile HTML5 on Mobile _ 10년 7월 게시
http://www.slideshare.net/guruguru/2011-web-technologies 웹&모바일 기술전망 2011 _ 11년 2월 게시
== 정의 ============================================================================================
모바일 웹
브라우저에서만 실행이 되고 가장 일반적인 웹
네이티브앱
응용프로그램을 폰으로 다운받아서 설치하여 사용하는 어플
웹앱
웹앱은 만드는것은 모바일 웹과 같다고 보시면 됩니다. 여기에서 웹을 실행하는 방법이 다르다고 생각하시면 될듯합니다.
예를 들어 아이폰 같은 경우 브라우저에서 웹을 보시면서 홈으로 가기 버튼을 만들수 있습니다.
거기서 홈으로 가기 버튼을 누르고 바로가기 버튼을 만들게 되면, 실제로 만들어진 것은 웹이지만 실행하는 것은 앱과 같은 방식이 되게 됩니다.
여기서 일반 앱(네이티브 앱)과 다른 점이 연락처, 메일, 문자보내기등 Device의 기능을 사용하지 못하는 것이 가장 큰 차이점입니다.
하이브리드 앱 (적용 사이트 m.gsshop.com)
웹표준을 준수한 모바일 웹을 만든 이후에 앱에 연동하는 형태로,
어플을 다운받거나 도메인을 입력해 접속해도 동일한 형태의 모바일 페이지를 볼 수 있습니다.
Javascript, CSS, Html로 개발을 하지만 웹앱의 단점인 Device의 기능을 Appspresso의 프레임 워크를 이용하여 사용합니다.
꼭 앱내에 폰갭이나 에스프레스를 이용하여 html, css, js를 심으실 필요는 없고 앱에 웹뷰를 설치하고 디폴트 주소설정을 원하는 url로 해도된다고 합니다.
1. 앱내에 심을 경우
- 이미지, HTML, CSS등이 자체내에 심어져 있어 로딩속도가 빠릅니다.
- 수정변경 사항이 발생시 앱 업데이트를 통해 진행해야 하므로 즉시성이 떨어진다.
- 확장성이 약하다.(앱내 삽입이므로)
2. 서버호출의 경우
- 3G망이 점점더 과부하 상태가 지속되는 상황에서 로딩속도가 느리다.
- 수정변경 사항 발생시 앱 업데이트 없이 자체 html등 수정으로 즉시 처리가 가능하다.
- 앱과 별도로 서버에서 수정이 가능하므로 확장성이 강하다.
출처: http://blog.naver.com/rasany/40130027896
'모바일' 카테고리의 다른 글
| [아이폰4 대응] css sprite, -webkit-background-size (0) | 2012.01.30 |
|---|---|
| Carousel (0) | 2011.07.05 |
| 아이폰 시뮬레이터 (0) | 2011.06.21 |
| [팁/테크] 윈도우 7 폰을 위한 UI 디자인 툴 - 위트 스튜디오 코디네이터 (0) | 2011.06.20 |
| max-width: 100%; 에 대한 고찰 (0) | 2011.06.08 |
아이폰 시뮬레이터
모바일 2011. 6. 21. 13:19'모바일' 카테고리의 다른 글
| Carousel (0) | 2011.07.05 |
|---|---|
| 모바일 프레임워크 (0) | 2011.07.05 |
| [팁/테크] 윈도우 7 폰을 위한 UI 디자인 툴 - 위트 스튜디오 코디네이터 (0) | 2011.06.20 |
| max-width: 100%; 에 대한 고찰 (0) | 2011.06.08 |
| 디바이스별 미디어쿼리 정리 (0) | 2011.06.08 |
[팁/테크] 윈도우 7 폰을 위한 UI 디자인 툴 - 위트 스튜디오 코디네이터
모바일 2011. 6. 20. 17:53
http://www.ilovepc.co.kr/bbs/tb.php/software/603/7ede72fea18a5799f5d3c660a2f7899a
재배포 금지 -ㅅ-???
점점 사람이 덜 필요한 방향으로 진화하는듯...
'모바일' 카테고리의 다른 글
| 모바일 프레임워크 (0) | 2011.07.05 |
|---|---|
| 아이폰 시뮬레이터 (0) | 2011.06.21 |
| max-width: 100%; 에 대한 고찰 (0) | 2011.06.08 |
| 디바이스별 미디어쿼리 정리 (0) | 2011.06.08 |
| 모바일 웹, 아이폰 사파리에서 화면회전시 폰트 확대방지 (0) | 2011.06.08 |