Notice
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

interactive

반응형 웹 - 뷰포트와 미디어쿼리 (viewport , mediaquery) 본문

Design

반응형 웹 - 뷰포트와 미디어쿼리 (viewport , mediaquery)

동그란우주 2015. 2. 27. 17:39


1.뷰포트 Viewport

<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. 양수 

뷰포트의 높이를 지정합니다.

inital-scale

양수 

뷰포트의 초기 배율을 지정합니다.
기본값은 1입니다. 1보다 작은 값을 사용하여 축소된 페이지를 표시하고,
1보다 큰 값을 사용하여 확대된 페이지를 표시합니다.

user-scalable

yes, no 

뷰포트의 확대/축소 여부를 지정합니다.
기본값은 yes이며 no로 설정하면 사용자가 페이지를 확대 할 수 없습니다.

minimum-scale

양수 

뷰포트의 최소 축소 비율을 지정합니다.
기본값은 0.25입니다. 

maximum-scale

양수 

뷰포트의 최대 확대 비율을 지정합니다.
기본값은 5.0입니다. 


※minimum-scale과 maximum-scale 속성은 각각 값을 1.0으로 지정할 경우 user-scalable를 yes로 지정하더라도 사용자가 화면을 확대 축소 할 수 없습니다.


2. 미디어쿼리 MedaiQuery


미디어쿼리의 기본문법

@media [only 또는 not] [미디어유형] [and 또는 ,콤마] (조건문) {실행문}

ex) @media only screen and (max-width:786px){width:100%}


[only 또는 not]

only 키워드는 미디어쿼리를 지원 하는 브라우저에서만 해석하게 해주는 키워드입니다.

not은 다음에 오는 조건을 부정하는 키워드 입니다. 예를 들어 not tv일 경우 tv를 제외한 모든 미디어유옇에만 적용됩니다.

※ie 6, 7, 8은 미디어 쿼리를 지원하지 않기 때문에 only 키워드는 작성하지 않습니다.


[미디어유형]

기기명

설명

all

모든 장치

print

인쇄 장치

screen

컴퓨터 화면 장치 또는 스마트 기기의 화면

tv

영상과 음성이 동시에 출력되는 장치

projection

프로젝터 장치

handheld

손에 들고 다니는 소형장치

speech

음성 출력 장치

aural

음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)

embossed

점자 인쇄 장치(화면을 읽어 종이에 점지를 찍어내는 장치)

tty

디스플레이 기능이 제한된 장치

braille

점자 표시 장치


[and 또는 ,콤마]

@media A and B{실행문} - A,B 가 모두 사실일때 실행합니다.

@media A , B{실행문} - A, B중 하나만 사실이더라도 실행합니다.

※생략가능합니다.


(조건문)

@media (min-width:320px){실행문}

@media (min-width:320px) and (max-width:768px){실행문}


조건문

설명 

조건값 

min/max 사용 여부 

width

웹페이지의 가로 너비값

width속성에서 사용할 수 있는 모든 속성값

사용함

height

웹페이지의 세로 높이값 

device-width

기기의 가로 너비값 

device-height

기기의 세로 높이값 

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

기기의 해상력 

300dpi/dpcm 

scan

TV의 스캔 방식 

progressive/interlace 

사용안함

grid

기기의 그리드/비트맵 

0(비트맵 방식) / 1(그리드 방식) 


미디어쿼리 적용방법

1. <link rel="stylesheet" href="style.css" />

2. <link rel="stylesheet" media="all and (min-width:320px)" href="style.css" />

3. @import url(style.css) all and (min-width:320px);


미디어쿼리 작성시 주의사항

1. min을 사용할때는 반드시 작은 순서대로 작성 (min은 최소 또는 그이상이라 는 뜻으로, 점차 커지는 것을 의미하기 때문에)

@media (min-width:320px){실행문}

@media (min-width:768px){실행문}

@media (min-width:1024px){실행문}


2. max 사용시 큰순서대로 작성 (max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에)

@media (max-width:1600px){실행문}

@media (max-width:1024px){실행문}

@media (max-width:768px){실행문}









'Design' 카테고리의 다른 글

[CSS3] background 중첩 사용  (0) 2012.12.10
CSS3 구조선택자  (0) 2012.12.06
CSS 동위선택자, 상태선택자  (0) 2012.12.06
CSS 속성선택자  (0) 2012.12.06
HTML5 비디오태그 <video></video>  (1) 2012.12.05
Comments