뷰포트

1. 소개

• 디바이스의 화면 너비를 조정해 준다
• 코드

<meta name='viewport' content='width=device-width, initial-scale=1'>

2. 사용되는 속성=값 키

• width
  width=device-width : (기본값)문서 너비를 현재 기기의 너비에 맞춤
• height
  height=device-height : (기본값)문서 너비를 현재 기기의 높이에 맞춤
• initial-scale
  initial-scale=1: (기본값)문서를 불러와 화면에 표시할 때 기본 배율을 1로 맞춤
• user-scale
  user-scale=yes: (기본값)사용자가 페이지를 확대/축소할 수 있는지 여부 지정
• minimum-scale
  minimum-scale=0.25: (기본값)사용자가 페이지를 확대/축소할 수 있는 최솟값(가로기준)
• maximum-scale
  user-scale=5.0: (기본값)사용자가 페이지를 확대/축소할 수 있는 최댓값(가로기준)
• target-densityDpi=device-dpi: 고해상도 단말기의 화면 해상도에 맞출 수 있도록 페이지 확대

미디어 쿼리

1. 기본 형식

• @media [only | not] 미디어 유형 [and 조건] [and 조건]

• @media: 스타일 시트 안에서 미디어 쿼리 시작하는 속성
• only | not: 어떤 미디어 유형에서 적용될지 결정
• 미디어 유헝: 화면, 프린터, tv 등 설정
• 조건: 기기와 관련된 조건 지정