728x90
반응형
1. 모바일 퍼스트
- 먼저 모바일을 위한 디자인을 하고 더 큰 화면에 맞게 확장
2. 유연한 그리드
- 레이아웃에 고정 단위 대신 백분율 사용
3. 미디어 쿼리
- 모바일(소형)
- 브레이크 포인트 (최대 320px)
- iPhone5 시대의 스마트폰
- 모바일(중형)
- 브레이크 포인트 (321px ~ 480px)
- 대부분의 스마트폰
ex) iPhone 15 Pro(393x852), iPhone 15 Pro Max(430x932), Samsung Galaxy S9+(360x740)
- 모바일(대형)/태블릿
- 브레이크 포인트 (481px ~ 768px)
- 큰 스마트폰 및 소형 태블릿
ex) iPad Mini(768x1024)
- 태블릿
- 브레이크 포인트 (769px ~ 1024px)
- 표준 태블릿
ex) iPad Pro(1024 x 1366)
- 데스트톱
- 브레이크 포인트 (1025px 이상)
참고
반응형
'Web' 카테고리의 다른 글
| [Next.js] - Pages Router 기반 SSR (1) | 2024.10.15 |
|---|---|
| [TS] - 함수 오버로딩(Overloading) (0) | 2024.10.06 |
| SOP, CORS 개념 (0) | 2023.03.02 |
| [React] Redux(리덕스) Concept (1) | 2022.12.31 |
| [CSS] Selector 정리 (0) | 2022.12.18 |