Loading... 0px

(고정 max-width) breakpoint 테스트

반응형 Container 동작 및 미디어 쿼리 확인

현재 Container 상태

화면 너비 -
브레이크포인트 -
Container Max Width -
실제 Container 너비 -
좌우 Padding -
Font Size -

브레이크포인트 가이드

Mobile
~639px
14px / 1rem padding
Mobile Large
640-767px
16px / 1.5rem padding
Tablet
768-1023px
16px / 2rem padding
Desktop
1024px~
18px+ / 2.5rem+ padding
Desktop Large
1280-1535px
18px / 3rem padding
Desktop XLarge
1536px~
20px / 3rem padding

샘플 컨텐츠

이 텍스트의 크기는 브레이크포인트에 따라 자동으로 조정됩니다.

현재 보이는 이 Container는 흰색 배경을 가지고 있으며, 외부 여백은 회색(#e5e7eb)입니다. 브라우저 창의 크기를 조절하면서 Container의 max-width, padding, font-size가 어떻게 변하는지 확인해보세요.

반응형 그리드 레이아웃

카드 1

그리드 아이템

카드 2

그리드 아이템

카드 3

그리드 아이템

카드 4

그리드 아이템

💡 브라우저 창 크기를 조절하여 각 브레이크포인트별 Container 동작을 확인해보세요

개발자 도구(F12)를 열어 반응형 모드로 테스트할 수 있습니다