반응형 웹 만들기(2) - 미디어쿼리, 뷰포트
<Do it! 반응형 웹 페이지 만들기>, 김운아 지음
이 책으로 공부 중!03 미디어 쿼리와 뷰포트
03-1. 미디어쿼리 : 화면크기나 환경에 따라 웹사이트를 변경하는 기술
- 과거, 미디어의 종류만 감지하는 미디어 타입이라는 기술 있었으나 기기의 종류가 다양하지 않았기 때문에 거의 사용되지 않았음. CSS3의 등장으로 기기의 종류, 해상도, 비트 수, 가로 , 세로 여부 등을 감지할 수 있는 기술이 탑재되면서 미디어 쿼리로 재탄생!
1) 미디어쿼리 기본문법 : 대소문자 구별 안함
@media [only 또는 not] [미디어 유형] [and 또는 ,] (조건문) {실행문}
@media : 미디어쿼리 문법의 시작
[only 또는 not] : only는 미디어쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 함. not은 다음에 따라오는 조건을 부정. ex) 'not tv' => tv를 제외한 모든 미디어 유형에 적용
[미디어 유형] : 생략 시에는 all로 적용
>> all : 모든 장치
>> print : 인쇄장치
>> screen : 컴퓨터/스마트기기 화면(장치)
>> tv : 영상/음성 동시에 출력되는 장치
>> projection : 프로젝터 장치
>> handheld : 손에 들고다니는 소형 장치 *스마트기기는 screen을 사용
>> speech : 음성 출력 장치
>> aural : 음성 합성 장치(화면을 읽어 소리로 출력해주는 장치)
>> embossed : 점자 인쇄 장치(화면을 읽어 종이에 점자를 찍는 장치)
>> tty : 디스플레이 기능이 제한된 장치
>> braille : 점자 표시 장치
[and 또는 ,(콤마)] : and는 앞뒤 조건이 모두 사실일 때 뒤에 오는 것을 해석하라는 의미. ,(콤마)는 앞뒤 조건 중 하나만 사실이어도 뒤에 따라오는 것을 해석하라는 의미. 둘 다 생략 가능
@media A and B{실행문}
@media A, B{실행문}
(조건문) : 조건문이 사실일 때 뒤에 따라오는 것을 해석하라는 의미. and나 콤마를 이용해 두 가지 이상 작성할 수 있으면 생략가능
@media (min-width:320px){실행문}
@media (min-width:320px) and (max-width:768px){실행문}
조건문 | 설명 | 조건값 | min/max 사용 여부
width | 웹 페이지의 가로 너빗값 | width 속성에서 사용할 수 있는 모든 속성값 | 사용함
height | 웹 페이지의 세로 높잇값 | width 속성에서 사용할 수 있는 모든 속성값 | 사용함
device-width | 기기의 가로 너빗값 | width 속성에서 사용할 수 있는 모든 속성값 | 사용함
device-height | 기기의 세로 높잇값 | width 속성에서 사용할 수 있는 모든 속성값 | 사용함
orientation | 기기의 화면 방향 | portrait(세로), landscape(가로) | 사용 안 함
aspect-ratio | 화면 비율 | 브라우저 화면 비율(1), 브라우저 종횡비(16:9), 브라우저 해상도(1280/720) | 사용함
device-aspect-ratio | 단말기 화면 비율 | 기기 화면 비율(1), 기기 종횡비(16:9), 기기 해상도(640/320) | 사용함
color | 기기의 비트 수 | 8(bit 단위) | 사용함
color-index | 기기의 색상 수 | 128(색상 수 단위) | 사용함
monochrome | 기기가 흑백일 때 픽셀당 비트 수 | 1(bit 단위) | 사용함
resolution | 기기의 해상도 | 3000dpi/dpcm | 사용함
scan | TV의 스캔 방식 | progressive/interlace | 사용 안 함
grid | 기기의 그리드/비트맵 | 0(비트맵 방식)/1(그리드 방식) | 사용 안 함
{실행문} : 앞의 조건들이 모두 사실일 때 실행되는 실행문. 일반적으로 사용하는 CSS 코드 작성
@media {실행문}
2) 미디어쿼리 적용 - 링크 방식 : CSS 파일 내에 미디어쿼리를 작성해서 <link></link> 태그로 CSS파일을 연결하여 적용
<link rel="stylesheet" href="mediaqueries.css">
3) 미디어쿼리 사용 시 주의사항
- 띄어쓰기 : and 구문 뒤에는 항상 공백을 한 칸 띄어줘야.
- 접두사 min/max 사용 시 작성 순서 : min은 반드시 크기가 작은 순서대로 작성, max는 크기가 큰 순서대로 작성
- 미디어쿼리로 브라우저 크기 감지 시 주의 : 미디어쿼리를 이용해 크기를 감지할 때는 보이는 영역(뷰포트) 크기를 기준으로 감지
03-2. 뷰포트 : 화면의 보이는 영역을 다루는 기술
- 데스크탑은 사용자가 설정한 해상도가 뷰포트 영역, 스마트기기는 기본으로 설정되어 있는 값이 뷰포트 영역. 스마트기기는 기본 설정된 뷰포트 영역으로 인해 미디어쿼리가 정상작동하지 않을 수 있어 이를 방지하기 위해서 뷰포트 메타 태그를 이용해 화면크기/배율 조정 필요
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
- 뷰포트 속성
속성명 | 속성값 | 속성 설명
width | device-width, 양수 | 뷰포트의 너비를 지정
height | device-height, 양수 | 뷰포트의 높이를 지정
initial-scale | 양수 | 뷰포트의 초기 배율 지정. 기본값 1
user-scalable | yes, no | 뷰포트의 확대/축소 여부 지정. 기본값 yes
minimum-scale | 양수 | 뷰포트의 최소 축소 비율 지정. 기본값 0.25
maximum-scale | 양수 | 뷰포트의 최대 확대 비욜 지정. 기본값 5.0
뷰포트 영역 확인하기
데스크톱 : 검사도구 - 오른쪽 상단에 뷰포트 영역 확인 가능
스마트기기 : 뷰포트 영역을 확인할 목적으로 개발된 웹사이트 접속
=> http://dnsdk300.dothome.co.kr/viewport
[끝]
