ݺߣ

ݺߣShare a Scribd company logo

3. html5 미디어쿼리

•Download as PPTX, PDF•
•
은심 강
은심 강

html5 - 미디어쿼리

1 of 13
Downloaded 21 times
3. html5 미디어쿼리
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
예제 링크가기
3. html5 미디어쿼리
3. html5 미디어쿼리
3. html5 미디어쿼리
[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=“/slideshow/3-html5/16011847/css/tablet.css” rel=“stylesheet” media=“screen and (min-width:321px)”> <예> 타블렛 PC용 스타일 시트 tablet.css 파일 가져오기 <link href=“/slideshow/3-html5/16011847/css/tablet.css” rel=“stylesheet” media=“screen and (min-width:321px) and (max- width:768px)”> @import url(/slideshow/3-html5/16011847/css/tablet.css) screen and (min-width:321px) and max-width:768px);

More Related Content

3. html5 미디어쿼리

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