뷰포트와 미디어 쿼리

뷰포트 설정

• 스마트폰에서 실제 콘텐츠가 표시되는 부분
• 웹 문서의 글자나 이미지 같은 콘텐츠를 스마트폰 화면에서 잘 보이는 크기로 표시하려면 스마트폰 화면을 웹 문서 너비에 맞추는 것이 아니라 문서의 콘텐츠를 스마트폰 화면 너비에 맞춰 표시해야 한다.
• 뷰포트 설정 소스

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

① width=device-width : 문서 너비를 현재 기기의 너비에 맞춥니다.

② initial-scale=1 : 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정합니다.

 

• <meta> 태그에서 뷰포트를 설정하기 위해 사용하는 속성

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

 

 

미디어 쿼리 구문

• 미디어 쿼리를 사용하기 위해서는 CSS를 정의하는 <style> 태그 안에 다음과 같은 구문을 삽입. 대소문자 구별하지 않습니다.

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

• @media : 스타일 시트 안에서 미디어 쿼리를 시작하는 속성
• only | not : 미디어 쿼리를 적용할 유형을 지정할 때 사용하는 접두어, only 접두어를 사용하면 only 다음의 미디어 유형에만 적용되고 not을 사용하면 not 다음의 미디어 유형을 제외한 나머지 유형에만 적용됨
• 미디어 유형 : 화면인지 프린터인지, TV인지 등 미디어 쿼리를 적용할 기기를 지정하는 부분. 쉼표(,)를 사용해 여러 가지 미디어 유형을 나열할 수 있다. 미디어 유형을 적용하지 않으면 접속하는 모든 기기에 미디어 쿼리가 적용된다.

미디어 유형	설명
all	모든 미딭어, 기본값
screen	화면이 달려있는 기기, 스마트폰과 PC 모두 해당
print	인쇄장치
tv	음성과 영상이 동시 출력되는 tv
aural	음성 합성 장치
braille	점자 표시 장치
handheld	손에 들고 다니는 장치
projection	프로젝터
tty	화면이 없는 장치
embossed	페이지에 인쇄된 점자 표시 장치

• 조건 : 미디어 유형 외에 기기와 관련된 조건을 지정한 후 해당 조건에 맞는 경우에만 CSS가 적용되도록 지정할 수 있다. 조건은 괄호( )로 묶어서 표현하며 둘 이상의 조건을 나열할 경투 and 연산자를 사용. orientation을 제외하면 각 속성의 앞에 min- 이나 max- 접두어를 붙여 최소값이나 최대값을 표현할 수 있다. 더 많은 조건 속성은 www.w3.org/TR/mediaqueries-p4에서 확인할 수 있다.

디스플레이	width	웹 문서의 너비
	height	웹 문서의 높이
	device-width	기기의 너비
	device-height	기기의 높이
	orientation	화면의 방향. landscape(가로), portrait(세로) 중 선택
	aspect-ratio	화면 비율
	device-aspect-ratio	기기의 화면 비율
	resolution	기기의 해상도
색상	color	기기의 비트 수
	color-index	기기의 색상 수

 

 

미디어 쿼리 중단점

• 미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 CSS를 적용할 분기점을 중단점(Break Point)이라고 한다.
• 대부분 기기의 화면 크기를 기준으로 한다. 주로 작은 화면, 중간 화면, 큰 화면으로 구분
• 모바일 퍼스트 디자인 : 모바일을 먼저 고려하여 미디어 쿼리를 작성. 그러고 나서 화면이 큰 태블릿과 데스크톱에 맞춰 더 많은 기능과 스타일을 추가
• 중단점을 정할 때는 콘텐츠를 기준으로 하는 것이 좋다. 작은 화면을 기준으로 콘텐츠를 제작하고 화면을 점점 늘려가다가 콘텐츠 배치를 다르게 해야 할 크기가 되면 중단점을 추가한다.
• 모바일 기기별 더 자세한 중단점을 할고 싶다면 css-tricks.com/snippets/css/media-queries-for-standard-devices 를 참고

- 익스플로러 브라우저 6~8 버전을 비롯해 미디어 쿼리를 지원하지 않는 브라우저에서도 반응형 웹이 동작하도록 설계하려면 respond.js 자바스크립트 라이브러리를 다운로드해서 링크하면 된다.
- respond.js를 다운로드하려면 github.com/scottjehl/Respond 페이지로 들어가서 화면 오른쪽 위에 있는 'Clone or download - Download ZIP'을 클릭해서 전체 파일을 다운로드. 파일 압축을 푼 후 src/respond.js 파일을 원하는 폴더로 복사.
-  CSS의 조건 주석문을 사용해 인터넷 익스플로러 9 이하 버전일 경우 respond.js 파일을 가져오는 소스를 작성한다.

 

 

[출처 : 프런트엔드 웹 디자인 입문 p.105~p.110]