반응형 웹
다양한 디바이스에서 접속했을 때 기기의 Viewport 규격에 반응하여
레이아웃이 자동으로 변경되는 웹페이지
(예시) 에어비앤비 웹페이지
ViewPort
- 웹 브라우저를 통해 웹 페이지에 접속했을 때, 주소창이나 탭 등을 제외하고
실제 웹 페이지의 컨텐츠가 차지하는 영역- 기기(Device)의 종류에 따라 다름
미디어 쿼리
Viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS 기능
(viewport의 너비 외에도 단말기 종류, 해상도 등을 기준으로 설정 가능)
/* 기본 형태 */
/* (예시) 스타일 시트 적용 조건: 스크린의 너비가 500px 이하 */
@media screen and (max-width: 500px) {
}
screen : 미디어 타입 (해당 페이지가 screen에 노출되었을 때)
and : 미디어 쿼리의 여러 조건들을 연걸
breakPoint
- 반응형 웹페이지의 작업 기준이 되는 중단점을 의미
- PC / Tablet / Mobile 의 기준이 되는 규격 분기
- 서비스 기획 단계에서 프로젝트의 예산과 기간을 고려하여 breakPoint를 몇 단계로 나눌 것인지 결정
가장 일반적으로 사용되는 breakPoint 분기
| 크기 | breakPoint |
|---|---|
| Mobile | 0 ~ 767px |
| Tablet | 768px ~ 1023px |
| PC | 1024px ~ 1439px |
| PC | Large 1440px~ |
반응형 웹에 자주 쓰이는 속성
max-width / max-height
- 요소의 최대 크기를 지정하는 속성
- 가로 규격과 세로 규격을 한정할 수 있음
max-width : 1240px;
max-height : 100vh;min-width / min-height
- 요소의 최소 크기를 지정하는 속성
- 가로 규격과 세로 규격을 한정할 수 있음
min-width : 720px;
min-height : 30%;max( )
- 소괄호 안에 입력된 값 중 제일 높은 값을 속성값으로 출력
- 여러 개의 값을 콤마로 연결해 입력
height : max(320px, 20%)min( )
- 소괄호 안에 입력된 값 중 제일 낮은 값을 속성값으로 출력
- 여러 개의 값을 콤마로 연결해 입력
width : min(1240px, 100%)
Keep going