[CSS] 미디어 쿼리, 뷰포트

1. 미디어 쿼리

[ 기본 문법 ]

@media [only 또는 not][미디어 유형][and 또는 ,] (조건문){실행문}

👉 and 구문 뒤 공백 필수!

 

[ 적용 방법 ]

<link rel="stylesheet" href="mediaqueries.css">

 

[ min/max ]

• 해상도별로 웹사이트를 다양하게 표현 가능
• min : 크기가 작은 순서대로 작성
• max : 크기가 큰 순서대로 작성
• 미디어 쿼리로 크기 감지할 때는 뷰포트 기준으로 감지

 

2. 뷰포트

• 화면에서 실제 내용이 표시되는 영역
• Desktop : 설정한 해상도
• Device : 기본으로 설정되어 있는 값

[ 속성 ]

width	device-width, 양수	뷰포트의 너비
height	device-height, 양수	뷰포트의 높이
initial-scale	양수	뷰포트의 초기 배율, 기본값=1
user-scalable	yes, no	뷰포트의 확대/축소 여부 지정
minimum-scale	양수	뷰포트의 최소 축소 비율, 기본값=0.25
maximum-scale	양수	뷰포트의 최대 확대 비율, 기본값=5.0

 

 

 

 

 

 

 

참고

- 김운아, 『Do it! 반응형 웹페이지 만들기』, 이지스퍼블리싱(2021), p.80~94