Help Center
카페24 소식
[모바일쇼핑몰] (작업전) 뉴모바일 관련 사양+디자인+모듈리스트
2012-09-03
뉴모바일웹으로 쇼핑몰 꾸미기 전에 기본적인 사양에 대해 안내해드립니다.
>> [디자인] + [모듈리스트] 는 아래의 매뉴얼을 참고해주세요
http://manual.echosting.cafe24.com/season2/mobile/guide.html
--------------------------------------------------------------------------
[디바이스 사양]
|
Device |
OS |
rowser |
해상도 |
| IPhone 3Gs | iOS | Safari | 320 * 480 (2 :3) |
| iPhone 4/4S | 640 * 960 | ||
| Android Phone | Android | Chrome | 480 * 800 |
| 320 * 480 |
[스펙]
- DocType: HTML 5
- CSS: CSS3
- charset: euc-kr
[뷰포트]
- 뷰포트란, 전체 웹 페이지 가운데 브라우저 창에 보이는 부분을 말합니다.
창 크기를 조절해서 뷰포트를 크거나 작게 만들 수 있습니다.
<head> 안에 뷰포트(viewport)를 설정합니다.
- 현재 공개된 모바일웹의 기본 설정 뷰포트는
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes, target-densitydpi=medium-dpi"> 입니다.
태그 설명 페이지가 보이는 기본 비율을 지정합니다(아이폰의 경우 스케일이 1이면 가로 320px에 맞춰집니다).
width=device-width
각 모바일 기기의 해상도에 맞춰서 보일 수 있도록 설정합니다.
initial-scale
maximum-scale
페이지가 보이는 최대 비율입니다.
minimum-scale
페이지가 보이는 최소 비율입니다.
user-scalable
모바일 기기에서 웹 페이지를 확대 가능한 지의 여부를 지정합니다.
[가로/세로 적용하기]
- 모바일에서는 사용자가 가로화면과 세로화면으로 볼 수 있습니다.
보통은 100%의 폭으로 CSS를 제작하면 크게 문제 되지 않으나
필요에 따라 미디어쿼리를 이용해 가로/세로 일때를 구분하여 사용 할 수 있습니다.
@media all and (orientation:landscape) {
.mPrdMain .inner { height:205px; }
.mPrdMain li { width:150px; left:50%; margin-left:-75px; }
.mPrdMain li span.prdImg img { height:150px; }
}
--------------------------------------------------------------------------
>> [디자인] + [모듈리스트] 는 아래의 매뉴얼을 참고해주세요
http://manual.echosting.cafe24.com/season2/mobile/guide.html