뷰포트와 미디어 쿼리

반응형 웹이란? 

PC,TV,내비게이션,스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를

제공해주는 것을 말합니다.

 

 

뷰포트(Viewport)

 화면에 보이는 영역을 제어하는 기술로, 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 꼭 필요합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1, user-scalable=no">

속성값	설명
width=device-width	페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다.
initial-scale	처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 합니다. 0~10 사이의 값을 가집니다.
minimum-scale	줄일 수 있는 최소 크기를 지정합니다. 0~10 사이의 값을 가집니다.
maximum-scale=1	늘릴 수 있는 최대 크기를 지정합니다. 0~10사이의 값을 가집니다.
user-scaleble=no	yes 또는 no값을 가지며 사용자가 화면을 확대/축소 할 수 있는지를 지정합니다.

 

 

미디어 쿼리(Media Queries)

 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나입니다. 반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환할 수 있습니다.

 

@media [only 또는 not] [미디어 유형] [and 도는 ,] (조건문) {실행문}
ex)@media screen and (min-width:1024px) {실행문}
(print(인쇄물에서 flex불가),screen,all(모든 미디어에서 똑같이 나오게)

 

미디어 쿼리 사용 시 주의 사항

1. and 이후 반드시 띄어쓰기!

2. 접두사 min/max 사용 시 작성 순서 주의하기!

 

min

작은 순서대로(이하)

max

큰 순서대로(이상)

 

미디어 쿼리 중단점(단위 : px) 중단점 = 중지점 = 브레이크 포인트(break point) =  중단되는 지점.

360	480	640	768	1024	1280	1440	1680	1920
모바일폰 넓이	미니태블릿	과거형 폰길이	테블릿 가로x세로 크기		큰 테블릿,작은노트북

모바일버전 시안크기 1080*1920(인트로)