모바일 사이즈 720 - mobail saijeu 720

해상도 및 브라우저 사용지표: http://gs.statcounter.com/

https://brunch.co.kr/@plusx/6

​

====================================================

PC

====================================================

1920 X 1080px (유저수 42%)

- 실제 사이즈 : 1904 X 975px

​

1366 X 768px (유저수 9%)

- 실제 사이즈 : 1350 X 683px

​

====================================================

모바일

====================================================

★ 안드로이드

360 X 640px (유저수 17.29%)

- 포토샵 작업 : 720 X 1280px (@2x)

안드로이드(360*640)를 먼저 작업하는 경우에는 안드로이드 기준으로 먼저 제작하고,

iOS(375*664)의 늘어난 여백(375-360=15)만큼 우측과 하단으로 늘려서 대응

​

720 x 1280 (웹)

720x1280px(@2x) (앱)

1080x1920px(@3x) (앱)

​

​

★ ISO

375 X 667px (유저수 7%)

- 포토샵 작업 : 아이폰6, 아이폰8 기준

750 X 1334px (@2x)

​

아이폰7 - 1125 X 2001(@3x) (앱)

아이폰 XS MAX - 1242 X 2688 (@3x) (앱)

​

- 포토샵작업 : 아이폰X 기준

1125 X 2436px (@3x)

​

▶ 모바일 양쪽마진 (1x 기준) - 8의 배수 사용

- 16 / 20 / 24

​

★ 모바일 psd 사이즈 기준

​

앱디자인 가이드

http://devstory.ibksplatform.com/2017/09/blog-post_25.html

​

★ 태블릿 가로 사이즈 기준

- 1024X768 화면사이즈 기준 (갤럭시 탭S3)

- 포토샵 작업 : 갤럭시 탭S3 기준

2048px X 1536px(@2x)

​

====================================================

반응형 웹 대응

====================================================

▶ 720, 1024, 1334, 1600 네 가지 분기 처리(Breakpoint)를 기본

360 / 640 / 720 / 1024 / 1334 / 1600 / 1920

​

- PC

@media all and (max-width:1500px) {}

@media all and (max-width:1280px) {}

@media all and (max-width:1180px) {}

- 태블릿, 모바일

@media all and (max-width:981px) {}

@media all and (max-width:768px) {}

@media all and (max-width:640px) {}

​

반응형 웹 화면사이즈 대응 그리드

https://spec.fm/specifics/8-pt-grid

==================================

​

무료 psd

https://kr.365psd.com/

​

​

​

출처 https://m.blog.naver.com/yangwonder/221095277739

♡ 작업사이즈 해상도

PC 웹 -> 1920×2560

1024 -> 본문사이즈 960

1280 -> 본문사이즈 1140

본문사이즈 : 960 / 1100 / 1140 / 1280 참고 : https://inmoon99.tistory.com/34

​

모바일 안드로이드

- hdpi : 480×800

- xhdpi : 720×1280(2x 시안작업)

- xxhdpi : 1080×1920

​

모바일 아이폰

- 아이폰4 : 640×960

- 아이폰5 : 640×1136

- 아이폰6, 아이폰8 : 750×1344 (2x 앱 시안작업)

- 아이폰6+, 아이폰8+ : 1242×2208

- iPhone Xr : 828 x 1792

- iPhone Xs : 1125 x 2436 (3x 앱 시안작업)

- iPhone Xs Max : 1242 x 2688

​

해상도사이트 : http://iosres.com/

​

♡ 모바일앱 기본 단위

안드로이드 : DP(density independent pixels)

IOS : PT (point)

참고 : https://brunch.co.kr/@eeasily/17

https://material.io/resources/devices/

​

♡ dpi,dp 변환식

px = dp × (dpi/160)

dp = px * (160/dpi)

160 dpi 화면기준 1 픽셀 = 1 dp

​

- 1 dp 값 = 배율

​

♡ 폰트사이즈 계산방법 (%)

브라우저 기본값 1em = 16px(body 지정된 사리즈)

- em계산법 : 12(사용하고 싶은 px) / 16(기준크기 px) = 0.75em

- %변환 : 12(사용하고 싶은 px) / 16(기준크기 px) × 100 = 75%

사이즈 계산사이트 : http://pxtoem.com/

​

♡ 이미지사이즈 계산법 (%)

내가 원하는 크기 또는 여백(20px) × 디바이스크기 또는 디자인크기(640px)

20px / 640px × 100 = 3.125%

​

♡ 박스사이즈 계산법 (%)

박스 가로너비 960px, 가변크기로 만들 박스 가로너비 300px

(300px / 960px) × 100 = 32.25%

​

♡ 상단높이 계산법 (%)

높이 ÷ 폭 × 100

padding-top: 66.666%; /* 500px÷750px×100=66.666...% */