• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

3. html5 미디어쿼리

  • 1,094 views
Uploaded on

html5 - 미디어쿼리

html5 - 미디어쿼리

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,094
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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