해상도 사이즈 및 브레이크 포인트

서비스 페이지의 해상도는 사용자 경험과 웹사이트 성능에 큰 영향을 미치기 때문에, 다양한 기기와 화면 크기를 고려하여 최적의 해상도를 선택해야 합니다. 

 

웹 페이지의 해상도를 결정할 때 고려해야 할 사항은 다음과 같습니다. 

 

• 모니터의 비율: 2021년 기준으로 23인치 이상의 와이드 모니터가 보편화되고 있습니다.
• 브라우저 환경: Chrome, IE, Firefox 등의 브라우저 이용률이 높으며, 브라우저 버전 업그레이드에 따라 상세 사이즈가 변경될 수 있습니다.
• 화면 비율: 5:4 비율은 세로가 높아 문서 폼에 적합하며, 16:9 비율은 가로가 넓은 와이드 형태입니다.
• 반응형 웹: 콘텐츠 영역에서 Left & Right 영역은 항상 고정값을 유지하고, Contents 영역은 최소 해상도 기준으로 최적화해야 합니다.

모바일 웹 디자인의 경우, 안드로이드는 360 X 740px, iOS는 375 X 812px를 기준으로 작업하면 다른 해상도에 대응하기 수월합니다. 

 

 

해상도
- PC 1440~ (대표 1440)
- 큰 태블릿 1024~1439 (대표 1024)
- 작은 태블릿 600~1023 (대표 768)
- 모바일 ~599

브레이크 포인트
- 4k - 2560px
- laptop l - 1440px
- laptop - 1024px
- tablet - 768px
- mobile l - 425px
- mobile m - 375px
- mobile s - 320px