You can teach older browsers to handle HTML5 correctly.
이전 브라우저에서 HTML5를 올바르게 처리하도록 교육 할 수 있습니다.
HTML5 Browser Support
HTML5 브라우저 지원
HTML5 is supported in all modern browsers.
HTML5는 모든 최신 브라우저에서 지원됩니다.
In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.
또한 모든 브라우저 (이전 및 신규)는 인식 할 수없는 요소를 인라인 요소로 자동 처리합니다.
Because of this, you can "teach" older browsers to handle "unknown" HTML elements.
이 때문에 오래된 브라우저에서 "알려지지 않은"HTML 요소를 처리하도록 "가르 칠"수 있습니다.
You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements.
IE6 (Windows XP 2001)에서 알려지지 않은 HTML 요소를 처리하는 방법을 가르 칠 수도 있습니다.
Define Semantic Elements as Block Elements
시맨틱 요소를 블록 요소로 정의
HTML5 defines eight new semantic elements. All these are block-level elements.
HTML5는 8 개의 새로운 의미 론적 요소를 정의합니다 . 이 모든 것은 블록 레벨 요소입니다.
To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block:
구형 브라우저에서 올바른 동작을 보장하려면 이러한 HTML 요소에 대한 CSS 표시 속성을 차단 하도록 설정할 수 있습니다 .
1 2 3 | header, section, footer, aside, nav, main, article, figure { display: block; } | cs |
Add New Elements to HTML
HTML에 새 요소 추가
You can also add new elements to an HTML page with a browser trick.
브라우저 트릭을 사용하여 HTML 페이지에 새 요소를 추가 할 수도 있습니다.
This example adds a new element called <myHero> to an HTML page, and defines a style for it:
이 예제는 <myHero>HTML 페이지에 호출 된 새 요소를 추가 하고 스타일을 정의합니다.
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #dddddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>A Heading</h1> <myHero>My Hero Element</myHero> </body> </html> | cs |
The JavaScript statement document.createElement("myHero") is needed to create a new element in IE 9, and earlier.
JavaScript 문 document.createElement("myHero")은 IE 9 이하의 새 요소를 만드는 데 필요합니다.
Problem With Internet Explorer 8
Internet Explorer 8 문제
You could use the solution described above for all new HTML5 elements.
모든 새로운 HTML5 요소에 대해 위에 설명 된 솔루션을 사용할 수 있습니다.
However, IE8 (and earlier) does not allow styling of unknown elements!
그러나 IE8 (및 이전 버전)에서는 알 수없는 요소의 스타일을 허용하지 않습니다!
Thankfully, Sjoerd Visscher created the HTML5Shiv!
고맙게도 Sjoerd Visscher가 HTML5Shiv를 만들었습니다!
The HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.
HTML5Shiv는 버전 9 이전의 Internet Explorer 버전에서 HTML5 요소의 스타일을 활성화하는 JavaScript 해결 방법입니다.
You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.
Internet Explorer 9보다 오래된 IE 브라우저에 대한 호환성을 제공하려면 HTML5shiv가 필요합니다.
Syntax For HTML5Shiv
구문 HTML5Shiv의 경우
The HTML5Shiv is placed within the <head> tag.
HTML5Shiv는 <head>태그 안에 배치됩니다 .
The HTML5Shiv is a javascript file that is referenced in a <script> tag.
HTML5Shiv는 <script>태그 에서 참조되는 자바 스크립트 파일입니다 .
You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>.
: 새 HTML5 요소를 사용하는 경우 당신은과 같은 HTML5Shiv를 사용한다 <article>, <section>, <aside>, <nav>, <footer>.
You can download the latest version of HTML5shiv from github or reference the CDN version at https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
당신은 할 수 GitHub의에서 HTML5shiv의 최신 버전을 다운로드 하거나 다음 CDN 버전을 참조 https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
Syntax
1 2 3 4 5 | <head> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <![endif]--> </head> | cs |
HTML5Shiv Example
HTML5Shiv 예제
If you do not want to download and store the HTML5Shiv on your site, you could reference the version found on the CDN site.
사이트에 HTML5Shiv를 다운로드하고 저장하지 않으려면 CDN 사이트에있는 버전을 참조하십시오.
The HTML5Shiv script must be placed in the <head> element, after any stylesheets:
HTML5Shiv 스크립트는 <head>스타일 시트 다음에 요소 에 있어야합니다 .
Example
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 32 33 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]--> </head> <body> <section> <h1>Famous Cities</h1> <article> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </article> <article> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </article> <article> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </article> </section> </body> </html> | cs |
'HTML' 카테고리의 다른 글
| HTML5 의미 론적 요소(HTML5 Semantic Elements) (0) | 2018.07.09 |
|---|---|
| HTML5 새 요소(HTML5 New Elements) (1) | 2018.07.08 |
| HTML5 소개(HTML5 Introduction) (0) | 2018.07.06 |
| [R]HTML 입력 속성(HTML Input Attributes) (0) | 2018.07.05 |
| [R]HTML 입력 유형(HTML Input Types) (0) | 2018.07.04 |
