3. html5 미디어쿼리
DESCRIPTION
html5 - 미디어쿼리TRANSCRIPT
N스크린(N-screen)이란,하나의멀티미디어콘텐츠(영화, 음악등)를 N개의기기에서 '연속적으로' 즐길수있는기술(또는서비스)를말합니다. 또한 N은네트워크(Network)를의미하기도합니다. (자세한설명은이곳을참고하세요.)
화면너비에따라유동적으로변하는유동형레이아웃(fluid layout)과유연한이미지(flexible image), 그리고미디어쿼리(media queries)가
어우러져서특정환경에 '최적화'된방법이아니라 환경에
반응하여스스로적응하는방법
http://mediaqueri.es/
http://hyeonseok.com/soojung/webstandards/2011/02/05/638.html
[ONLY | NOT] 미디어 유형 [ AND 조건 ] * [AND 조건]
• 대소문자를 구별하지 않는다.
• 기본으로 미디어 유형이 지정되어야 한다.
• 필요할 경우에 AND 연산자로 조건을 추가한다.
• 쉼표를 사용해서 새로운 미디어 유형과 조건을 추가할 수 있다.
• ONLY : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 한다.
(ONLY 키워드는 사용하더라도 크게 의미는 없다 )
• NOT : 지정한 미디어 유형을 제외한 다른 미디어 유형에만 적용한다.
<예> 데스크탑
<예> iPad (가로)
@media screen and (min-width:1224px) {
/* styles */
}
@media screen and (min-device-width:768px)
and (max-device-width:1024px) and
(orentation:landscape) {
/ * styles */
}
all 모든 미디어 유형
print 인쇄 장치
screen 컴퓨터 스크린. 스마트폰의 스크린도 포함
tv 음성과 영상이 동시 출력되는 TV
width 웹 페이지 가로 너비
height 웹 페이지 세로 높이
min-width / min-height 최소 너비 / 최소 높이
max-width / max-height 최대 너비 / 최대 높이
단, height 값은 미디어에 따라 달라지기 때문에 주의해야 한다.
단, height 값은 미디어에 따라 달라지기 때문에 주의해야 한다.
device-width,
device-height
단말기의 가로 너비,
세로 높이
min-device-width,
min-device-height
단말기의 최소 너비,
최소 높이
max-device-width,
max-device-height
단말기의 최대 너비,
최대 높이
<link href=“css/tablet.css” rel=“stylesheet”
media=“screen and (min-width:321px)”>
<예> 타블렛 PC용 스타일 시트 tablet.css 파일 가져오기
<link href=“css/tablet.css” rel=“stylesheet”
media=“screen and (min-width:321px) and (max-
width:768px)”>
@import url(css/tablet.css) screen and (min-width:321px)
and max-width:768px);