모바일, 태블릿, 데스크톱 등 다양한 기기에서 웹사이트가 잘 보이도록 하려면 반응형 디자인이 필수입니다. 핵심이 되는 브레이크포인트 설정 방법을 알아보겠습니다.
브레이크포인트란
브레이크포인트는 레이아웃이 변하는 화면 너비 기준점입니다. 예를 들어 768px 이하에서는 모바일 레이아웃, 그 이상에서는 데스크톱 레이아웃을 적용하도록 설정합니다. CSS 미디어 쿼리로 구현합니다.
일반적인 브레이크포인트
Bootstrap 프레임워크 기준으로 576px(소형 기기), 768px(태블릿), 992px(데스크톱), 1200px(대형 데스크톱)이 주로 사용됩니다. 하지만 고정된 값보다 콘텐츠가 깨지기 시작하는 지점을 기준으로 설정하는 것이 좋습니다.
실제 화면 크기 확인
내 브라우저의 현재 화면 크기가 궁금하다면 koreaeu.kr에서 확인할 수 있습니다. 브라우저 창 크기를 조절하면서 실시간으로 변화하는 값을 보면 브레이크포인트 설정에 참고할 수 있습니다.
사용자 환경을 고려한 반응형 디자인으로 모든 기기에서 좋은 경험을 제공하세요.