[반응형 웹디자인] Break points, 고정점

 

 

 

 

Break points, 고정점

브레이크 포인트는 반응형 웹에서 사이즈가 변화하는 지점을 말합니다. 브레이크 포인트를 이해하는 가장 좋은 방법은 크롬 개발자 도구를 이용해서 자주가는 사이트를 확인해보는겁니다. 자주 가는 사이트에서 마우스 오른쪽 클릭 › 검사를 클릭하면 다음과 같은 창이 나옵니다.

 

그럼 상단의 Mobile S – 320px와 주변의 구분된 영역을 눌러보며 모바일, 패드, 데스크탑 비율에서 어떻게 디자인이 변하는지 확인할 수 있습니다. 이 디바이스 툴바에서 제공하는 해상도 너비는 다음과 같습니다. 이 사이즈는 표준이므로 웹 디자인을 할 때 브레이크 포인트를 정할 때 참고하면 좋습니다.

• Mobile S – 320px
• Mobile M – 375px
• Mobile L – 425px
• Tablet – 768px
• Laptop – 1024px
• Laptop L – 1440px
• 4K – 2560px

참고로 모바일 웹 사이즈는 스케치 아트보드 템플릿에서는 mobile S사이즈인 width:320px로 되어있지만, 평균적인 모바일 디바이스 사이즈가 커졌기 때문에 mobile M 기준인 width:375px 을 기준으로 하는것도 좋습니다. 예를 들어 mobile S는 아이폰 5, mobile M은 아이폰 8 사이즈입니다.

 

https://mui.com/material-ui/customization/breakpoints/

Breakpoints - Material UI

 

https://web.dev/responsive-web-design-basics/

반응형 웹 디자인 기초