07-1 뷰포트와 미디어 쿼리 알아보기

뷰포트

뷰포트 : 스마트폰에서 실제 콘텐츠가 표시되는 부분

설정하지 않을 경우, 데스크탑과 스마트폰의 1px가 같지 않기에 스마트폰의 글씨가 pc 대비 작아짐

사용하는 태그 <meta>

뷰포트 설정 소스

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- content="width=device-width 문서를 현재 기기의 너비에 맞춘다 -->
<!-- initial-scale=1 문서를 불러와 표시할 때 기본 배율을 1로 지정한다 -->

<meta> 속성

width	뷰포트의 너비 - 기본값 device-width
height	뷰포트의 높이 - 기본값 device-height
inital-scale	초기 배율 - 기본값 1 (1보다 작은 값이면 축소 페이지, 크면 확대페이지를 표시)
user-scalable	사용자가 페이지를 확대/축소할 수 있는지 여부 지정 - 기본값 yes
minimum-scale	확대/축소할 수 있는 최솟값(가로기준) - 기본값 0.25
maximum-scale	확대/축소할 수 있는 최댓값(가로기준) - 기본값 5.0
target-dendityDpi	고해상도 단말기의 화면 해상도에 맞출 수 있도록 페이지 확대 - 기본값 device-dpi

미디어 쿼리 구문

미디어 쿼리를 사용하기 위해서는 CSS를 정의하는 <style> 태그 안에 구문을 삽입해야 함

@media [only/not] 미디어 유형 [and 조건] * [and 조건]

@media : 스타일 시트 안에서 미디어 쿼리를 시작하는 속성
only/not : 미디어 쿼리를 적용할 유형을 지정할 떄 사용하는 접두어
- only를 사용하면 only 다음의 미디어 유형에만 적용된다
- not을 사용하면 not 다음의 미디어 유형을 제외한 나머지 유형에만 적용된다
미디어 유형 : 화면인지 프린터인지 tv인지 등 미디어 쿼리를 적용할 기기를 지정하는 부분 쉼표를 사용해 여러가지 미디어 유형을 나열할 수 있다
조건 : 미디어 유형 외에 기기와 관련된 조건을 지정한 후 해당 조건에 맞는 경우에만 CSS가 적용되도록 지정할 수 있다 조건은 () 로 묶어서 표현하며 두개 이상의 조건을 나열할 경우 and 연산자를 사용한다

미디어 유형

all	모든 미디어
screen	화면이 달려있는 기기, 스마트폰 pc 모두 해당
print	인쇄 장치
tv	음성과 영상이 동시 송출되는 tv
aural	음성합성장치

기타 등등

07-1 뷰포트와 미디어 쿼리 알아보기

뷰포트

뷰포트 설정 소스

<meta> 속성

미디어 쿼리 구문

미디어 유형

조건 - 디스플레이