모바일부터 대형 모니터까지 다양한 화면에 대응하려면 뷰포트 크기를 이해해야 합니다. 브레이크포인트 설정의 기초를 알아보겠습니다.
뷰포트란
브라우저에서 웹 페이지가 표시되는 영역입니다. 기기 화면 크기와 다를 수 있으며, 브라우저 창 크기를 조절하면 뷰포트도 변합니다.
브레이크포인트 설정
CSS 미디어 쿼리로 특정 너비에서 레이아웃을 변경합니다. 일반적으로 576px(모바일), 768px(태블릿), 992px(데스크톱) 등을 기준으로 합니다.
현재 화면 크기 확인
개발 중 브라우저 뷰포트 크기를 실시간으로 확인하면 디버깅에 도움이 됩니다. koreaeu.kr에서 현재 화면 크기를 바로 확인할 수 있습니다.
다양한 기기에서 테스트하며 최적의 반응형 경험을 제공하세요.