본문 바로가기
Publishing/HTML

HTML5의 새로운 태그

by 오다다 코드 오다다 Code 2020. 2. 13.

HTML5의 새로운 기능

HTML5에 대한 DOCTYPE 선언은 매우 간단합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title of the document</title>
</head>

<body>
	Content of the document......
</body>

</html>
HTML5의 기본 문자 인코딩은 UTF-8입니다.

 

의미 요소를 블록 요소로 정의

HTML5는 8 개의 새로운 의미 요소를 정의합니다 . 이들은 모두 블록 레벨 요소입니다.

이전 브라우저에서 올바른 동작을 보장하기 위해 이러한 HTML 요소 의 CSS 표시 속성을 설정하여 차단할 수 있습니다 .

header, section, footer, aside, nav, main, article, figure {
  display: block;
}

 

Internet Explorer 8 문제

모든 새로운 HTML5 요소에 대해 위에서 설명한 솔루션을 사용할 수 있습니다.

그러나 IE8 (및 이전)에서는 알 수없는 요소의 스타일을 허용하지 않습니다!

고맙게도 Sjoerd Visscher는 HTML5Shiv를 만들었습니다! HTML5Shiv는 버전 9 이전의 Internet Explorer 버전에서 HTML5 요소를 스타일링 할 수있는 JavaScript 해결 방법입니다.

IE 9 이전의 IE 브라우저에 호환성을 제공하려면 HTML5Shiv가 필요합니다.

 

HTML5Shiv 구문

HTML5Shiv는 <head>태그 내에 배치됩니다 .

HTML5Shiv는 <script>태그 에서 참조되는 자바 스크립트 파일입니다 .

당신과 같은 새로운 HTML5 요소를 사용하는 경우 당신은 HTML5Shiv를 사용한다 : <article>, <section>, <aside>, <nav>, <footer>.

당신은 할 수 GitHub의에서 HTML5shiv의 최신 버전을 다운로드 하거나 다음 CDN 버전을 참조 https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

<head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head>

 

HTML5의 새로운 요소

새로운 Semantic/Structural 요소

<article> 문서에서 기사를 정의합니다
<aside> 페이지 컨텐츠를 제외하고 컨텐츠를 정의합니다
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

 

새로운 Form 요소

<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

Read all about old and new form elements in HTML Form Elements.

 

새로운 Input Types

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

HTML 입력 유형 에서 이전 입력 유형과 새로운 입력 유형에 대해 자세히 알아보십시오 .

HTML 입력 속성의 입력 속성에 대해 자세히 알아보십시오 .

 

HTML5-새로운 속성 구문

HTML5는 속성에 대해 4 가지 다른 구문을 허용합니다.

이 예는 <input>태그에 사용 된 다양한 구문을 보여줍니다 .

Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>

HTML5에서는 속성에 필요한 내용에 따라 네 가지 구문을 모두 사용할 수 있습니다.

 

HTML5 그래픽

<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<picture> Defines a container for multiple image resources
<svg> Draw scalable vector graphics

HTML5 Canvas 에 대해 자세히 알아보십시오 .

HTML5 SVG 에 대해 자세히 알아보십시오 .

 

새로운 미디어 요소

<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<picture> Defines a container for multiple image resources
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines video or movie

HTML5 비디오 에 대해 자세히 알아보십시오 .

HTML5 오디오 에 대해 자세히 알아보십시오 .

 

https://www.w3schools.com/html/html5_new_elements.asp

 

HTML5 New Elements

HTML5 New Elements New Elements in HTML5 Below is a list of the new HTML5 elements, and a description of what they are used for. New Semantic/Structural Elements HTML5 offers new elements for better document structure: Tag Description Defines an article in

www.w3schools.com

'Publishing > HTML' 카테고리의 다른 글

HTML5 Video (fullpage Video)  (0) 2020.02.13
HTML5 audio  (0) 2020.02.13
HTML5의 새로운 태그  (0) 2020.02.13
HTML 기본 layout  (0) 2020.02.12
html header 정보  (0) 2020.02.12
웹접근성 준수 된 회원가입 폼  (0) 2020.02.12

댓글0