.foo {

   background-size: auto 100%;
}

css3-mediaquery 보다 훨씬 빠르고 잘된다.

Respond.js

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

• Copyright 2011: Scott Jehl, scottjehl.com

• Licensed under the MIT license.

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

If you're unfamiliar with the concepts surrounding Responsive Web Design, you can read up here and also here

Demo page (the colors change to show media queries working)

Usage Instructions

1. Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop

   @media screen and (min-width: 480px){
       ...styles for 480px and up go here
   }
   

2. Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media'd content)

3. Crack open Internet Explorer and pump fists in delight

CDN/X-Domain Setup

Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.

See cross-domain/example.html for a demo:

• Upload cross-domain/respond-proxy.html to your external domain
• Upload cross-domain/respond.proxy.gif to your origin domain
• Reference the file(s) via <link /> element(s):

    <!-- Respond.js proxy on external server -->
    <link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

    <!-- Respond.js redirect location on local server -->
    <link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

    <!-- Respond.js proxy script on local server -->
    <script src="/path/to/respond.proxy.js"></script>

If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.

Note: HUGE thanks to @doctyper for the contributions in the cross-domain proxy!

Support & Caveats

Some notes to keep in mind:

• This script's focus is purposely very narrow: only min-width and max-width media queries and all media types (screen, print, etc) are translated to non-supporting browsers. I wanted to keep things simple for filesize, maintenance, and performance, so I've intentionally limited support to queries that are essential to building a (mobile-first) responsive design. In the future, I may rework things a bit to include a hook for patching-in additional media query features - stay tuned!

• Browsers that natively support CSS3 Media Queries are opted-out of running this script as quickly as possible. In testing for support, all other browsers are subjected to a quick test to determine whether they support media queries or not before proceeding to run the script. This test is now included separately at the top, and uses the window.matchMedia polyfill found here: https://github.com/paulirish/matchMedia.js . If you are already including this polyfill via Modernizr or otherwise, feel free to remove that part.

• This script relies on no other scripts or frameworks (aside from the included matchMedia polyfill), and is optimized for mobile delivery (~1kb total filesize min/gzip)

• As you might guess, this implementation is quite dumb in regards to CSS parsing rules. This is a good thing, because that allows it to run really fast, but its looseness may also cause unexpected behavior. For example: if you enclose a whole media query in a comment intending to disable its rules, you'll probably find that those rules will end up enabled in non-media-query-supporting browsers.

• Respond.js doesn't parse CSS referenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing.

• Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses xmlHttpRequest). Run it on a web server.

• If the request for the CSS file that includes MQ-specific styling is behind a redirect, Respond.js will fail silently. CSS files should respond with a 200 status.

• Currently, media attributes on link elements are supported, but only if the linked stylesheet contains no media queries. If it does contain queries, the media attribute will be ignored and the internal queries will be parsed normally. In other words, @media statements in the CSS take priority.

• Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark (BOM), they will not work with Respond.js in IE7 or IE8. Noted in issue #97

• WARNING: Including @font-face rules inside a media query will cause IE7 and IE8 to hang during load. To work around this, place @font-face rules in the wide open, as a sibling to other media queries.

• If you have more than 32 stylesheets referenced, IE will throw an error, Invalid procedure call or argument. Concatenate your CSS and the issue should go away.

• Sass/SCSS source maps are not supported; @media -sass-debug-info will break respond.js. Noted in issue #148

• Internet Explorer 9 supports css3 media queries, but not within frames when the CSS containing the media query is in an external file (this appears to be a bug in IE9 — see http://stackoverflow.com/questions/10316247/media-queries-fail-inside-ie9-iframe). See this commit for a fix if you're having this problem. https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603

• Nested Media Queries are not supported

How's it work?

Basically, the script loops through the CSS referenced in the page and runs a regular expression or two on their contents to find media queries and their associated blocks of CSS. In Internet Explorer, the content of the stylesheet is impossible to retrieve in its pre-parsed state (which in IE 8-, means its media queries are removed from the text), so Respond.js re-requests the CSS files using Ajax and parses the text response from there. Be sure to configure your CSS files' caching properly so that this re-request doesn't actually go to the server, hitting your browser cache instead.

From there, each media query block is appended to the head in order via style elements, and those style elements are enabled and disabled (read: appended and removed from the DOM) depending on how their min/max width compares with the browser width. The media attribute on the style elements will match that of the query in the CSS, so it could be "screen", "projector", or whatever you want. Any relative paths contained in the CSS will be prefixed by their stylesheet's href, so image paths will direct to their proper destination

API Options?

Sure, a couple:

• respond.update() : rerun the parser (helpful if you added a stylesheet to the page and it needs to be translated)
• respond.mediaQueriesSupported: set to true if the browser natively supports media queries.
• respond.getEmValue() : returns the pixel value of one em

Alternatives to this script

This isn't the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest.

If you're looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. In testing, I've found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)

https://github.com/louisremi/background-size-polyfill

 for IE8 that is really simple to use:

.selector {
background-size: cover;
behavior: url(/backgroundsize.min.htc);
}

구조선택자는 CSS3에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다.

1. 일반 구조 선택자

2. 형태 구조 선택자

1. 동위선택자

2. 상태선택자 : 입력양식의 상태를 선택할때 사용하는 선택자

1. 선택자[속성] , 선택자[속성=값] - 특정한 속성이 있는 태그 선택

2. 선택자[속성~=값] , 선택자[속성|=값] - 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택(띄어쓰기 포함)

3. 선택자[속성^=값] , 선택자[속성$=값] , 선택자[속성*=값]

비디오 태그는 웹페이지에서 동영상을 볼 수 있게 만들어주는 기능을 수행한다. 

원래 HTML5 시대가 오기 전에는 비디오도 윈도 미디어 플레이어 또는 플래시와 같은 플러그인을 사용해서만 볼 수 있었다. 

하지만 HTML5 시대가 오면서 웹표준만으로 동영상을 볼 수 있게 되었다.

*유튜브는 플래시를 사용해서 동영상을 재생하게 설계되었지만 http://www.youtube.com/html5  에 들어가서 HTML5 기능을 실행하면 플래시 없이 동영상을 볼 수 있다.

video 태그의 속성

 *웹브라우저에서 지원하는 비디오파일 형식

※ video.js 플러그인

웹브라우저마다 표시되는 video태그의 형태가 일관되지 않으므로 웹페이지를 디자인할 때 문제가 될 수 있다.

또한 IE8이하에서는 video 태그가 동작하지 않는다. 이러한 문제를 해결 할 수 있는 간단한 플러그인이 video.js플러그인 이다.

IE8에서는 자동으로 플래시에 담겨 동영상이 재생된다.

http://videojs.com