웹사이트를 만들 때 모바일, 태블릿, 데스크탑 각각 다르게 보여야 합니다. 이걸 반응형 웹이라고 하는데, 어느 크기에서 레이아웃을 바꿔야 할지 기준을 정하는 게 중요합니다.
브레이크포인트란?
화면 너비가 특정 크기를 넘어가면 CSS가 달라지도록 설정하는 지점을 브레이크포인트라고 합니다. 예를 들어 768px 미만이면 모바일 레이아웃, 이상이면 데스크탑 레이아웃을 적용합니다.
일반적인 브레이크포인트
- 320px~480px: 스마트폰 세로
- 481px~768px: 태블릿 세로, 스마트폰 가로
- 769px~1024px: 태블릿 가로, 소형 노트북
- 1025px~1200px: 데스크탑
- 1201px 이상: 대형 모니터
내 화면 크기 확인하기
개발할 때 현재 브라우저 창 크기를 정확히 알아야 합니다. 화면 크기 확인 도구를 열어두면 창 크기를 조절할 때마다 실시간으로 가로/세로 픽셀을 확인할 수 있습니다.
CSS 미디어 쿼리 작성법
/* 모바일 (768px 미만) */
@media (max-width: 767px) {
.container { width: 100%; }
}
/* 태블릿 (768px ~ 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
.container { width: 750px; }
}
/* 데스크탑 (1025px 이상) */
@media (min-width: 1025px) {
.container { width: 1200px; }
}뷰포트와 해상도의 차이
4K 모니터(3840×2160)라도 브라우저 창을 작게 열면 뷰포트는 작아집니다. 반응형 웹에서 중요한 건 모니터 해상도가 아니라 뷰포트 크기입니다. 뷰포트 확인 도구로 실제 CSS가 적용되는 영역을 확인하세요.
모바일 퍼스트 vs 데스크탑 퍼스트
모바일 퍼스트는 작은 화면용 CSS를 먼저 작성하고, min-width로 큰 화면 스타일을 추가합니다. 요즘은 모바일 트래픽이 더 많아서 이 방식을 권장합니다.
테스트 시 유의사항
크롬 개발자 도구의 기기 시뮬레이션은 실제 기기와 다를 수 있습니다. 가능하면 실제 화면 크기를 여러 기기에서 확인해보세요. 특히 아이폰과 안드로이드의 뷰포트 처리 방식이 다를 수 있습니다.