[HTML/CSS]반응형 페이지 브레이크 포인트 정리

안녕하세요 :) 무택입니다🧔

오늘 알아볼 내용은 반응형 페이지 작업 시 필요한 미디어쿼리 브레이크 포인트에 대한 내용입니다. 먼저 브레이크 포인트란 사용자들의 스크린 가로 사이즈가 몇 px인지에 따라 보여줄 내용을 변경시키는 지점을 말합니다. 보통 실무에서는 반응형 페이지를 작업한다고 하면 pc, 태블릿, 모바일 세 가지로 나누게 됩니다.

저는 보통 브레이크 포인트를 아래처럼 설정합니다.

/* 테블릿 (해상도 768px ~ 1199px)*/ 
@media all and (min-width:768px) and (max-width:1199px) {
  ...
} 

/* 모바일 (해상도 360px ~ 767px)*/ 
@media all and (min-width:360px) and (max-width:767px) {
  ...
}

브레이크 포인트를 설정하기 위해서는 해상도 사용 비율을 알아야 좋은 브레이크 포인트를 설정할 수 있습니다.

 

아래사이트는 해상도를 잘 정리해 놓은 사이트입니다.

https://gs.statcounter.com/

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

 

01. PC 해상도

이미지 출처 : https://gs.statcounter.com/

사용 비율을 봤을 때 1920x1080이 대부분이고 가장 작은 사이즈는 1280이므로 1280px사이즈 위로는 pc용 css를 작성해서 보여주면 과반수 이상의 pc이용자들의 편의성을 지켜줄 수 있습니다.

 

 

02. Tablet 해상도

태블릿의 경우 pc와 다르게 사이즈가 다양합니다. 수많은 태블릿 제품들이 있기 때문인데 사용율을 보면 601이 가장 많고 나머지는 다 768px 이상입니다.

(601 사이즈의 제품이 최근에 사용율이 늘었길래 어떤 제품인지 찾으려고 했는데 안 나와서 일단은 601 사이즈는 배제하고 가려고 합니다. 혹시라도 아시는 분 있으시면 댓글 부탁드립니다.😭)

그래서 태블릿은 768px ~ 1199px로 설정하면 대다수의 사용자들 편의성을 고려할 수 있습니다.

 

 

03. Mobile

모바일의 경우도 디바이스가 무수히 많기 때문에 사이즈가 다양한데 차트를 보면 360 사이즈가 가장 작다는 걸 알 수 있습니다. 그래서 가장 작은 사이즈는 360, 그리고 태블릿 브레이크 포인트 전인 767까지, 360px ~ 767px를 브레이크 포인트로 설정하면 대다수의 모바일 사용자들을 생각할 수 있습니다.

 

이런 이유들로 저는 브레이크포인트를 설정합니다. 요즘에는 디바이스들이 다양하게 나오기 때문에 반응형 대응하기가 힘들어지고 있는데 퍼블리싱의 난이도가 점점 높아지는 것 같습니다ㅜ

 

조금이나마 도움이 되셨다면 아래의 공감 버튼을 한 번씩 눌러주세요😊

 

위 기준들은 한국 기준, 2022.03 ~ 2023.02 기간 기준입니다.