Mark Up/Html HTML 기본 구조 / HTML5 기본구조
    Dexter_-   2018. 10. 3. 14:50
  • 728x90
    반응형


    HTML 기초


    HTML 이란 ?


    HTML은 HyperText Markup Language의 약자이다.

    웹 페이지는 HTML 문서라고도 불리며 HTML 태그들로 구성된다.

    각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용된다.



    HTML 버전


    버전

    년도

    DOCTYPE 및 설명

    HTML 1.0

    1991

    팀 버나스리(Tim Berners-Lee)가 발표한 최초의 HTML

    HTML 2.0

    1995

    국제 표준의 제정된 최초의 HTML

    HTML 3.2

    1997

    W3C에 의해 제정된 최초의 HTML

    HTML 4.01

    1999

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

    "http://www.w3.org/TR/html4/DTD/strict.dtd">

    XHTML 1.0

    2000

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    HTML 5

    2014

    <!DOCTYPE html>









    W3C


    W3C는 World Wide Web Consortium의 약자이다.

    W3C는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관이다.

    이러한 W3C가 관리하는 대표적인 웹 표준은 다음과 같다.


    1. HTML
    2. CSS
    3. DOM
    4. SVG
    5. XTHML
    6. XML

    HTML 기본 구조


     <!DOCTYPE html>  : 현재 문서가 HTML5 문서임을 명시한다.


     <html>  : HTML 문서의 루트(root) 요소를 정의한다.


     <head>  : HTML 문서의 메타데이터(metadata)를 정의한다.

    - 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 

    직접적으로 표현되지 않는 정보를 의미한다.

    - 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있다.


     <body>  : 웹 브라우저를 통해 보이는 내용(content) 부분이다.


     <h1>~<h6>  : 제목(heading)을 나타낸다.


     <p>  : 단락(paragraph)을 나타낸다.



    HTML5 개요


    HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안이다.

    HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준이다.


    HTML5는 XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처한다.

    따라서 다음과 같은 사항들을 모두 문법적으로 허용한다.


    • 태그 이름에 대문자 사용
    • 속성값에 따옴표 생략
    • 속성값 생략
    • 빈 태그의 종료 태그(/) 생략

    HTML5에서 변경된 사항들에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문.


    W3C HTML5



    HTML5 문서의 기본 구조


    HTML5에서는 DOCTYPE 선언이 매우 간편해짐.


    문법
    <!DOCTYPE html>


    또한, 문자셋(character set)의 선언도 매우 간단해짐.

    HTML5에서의 기본 문자 인코딩(character encoding)방식은 UTF-8 이다.


    HTML5 이전

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">


    HTML5

    <meta charset="UTF-8">



    HTML5 에서 추가된 요소 및 타입


    • 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>
    • 멀티미디어 요소 : <video>, <audio>
    • 그래픽 요소 : <canvas>, <svg>
    • input 요소의 타입 : number, date, time, calendar, range


    HTML5에서 추가된 자바스크립트 API


    • Geolocation
    • Drag and Drop
    • Web Storage
    • Application Cache
    • Web Worker
    • Server Sent Events

    HTML5에서 삭제된 기존 요소


    삭제된 기존 요소

    설명

    <acronym>

    <addr>태그로 대체

    <applet>

    <object>태그로 대체

    <basefont>

    CSS로 적용

    <big>

    CSS로 적용

    <center>

    CSS로 적용

    <dir>

    <ul>태그로

    <font>

    CSS로 적용

    <frame>

    삭제

    <frameset>

    삭제

    <noframes>

    삭제

    <strike>

    CSS로 적용

    <tt>

    CSS로 적용


    HTML5에서 변경된 사항들에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문하여 확인



    웹브라우저의 HTML5 지원


    현재 최신 버전의 주요 웹 브라우저들은 모두 HTML5를 지원하고 있다.

    하지만 HTML5의 새로운 요소들이 구형 버전의 웹 브라우저에서는 제대로 표현되지 못할 수도 있다.

    따라서 구형 버전의 웹 브라우저에 자신이 알지 못하는 새로운 HTML 요소를 다루는 방법을 알려줘야 한다.


    다음 예제는 웹브라우저가 알지 못하는 새로운 HTML 요소를 어떻게 다뤄야 하는지 알려주는 방법을 보여 준다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Changes</title>
        <script>document.createElement("newPara")</script>
        <style>
            newPara {
                background-color: #F0F0F0;
                display: block;
                padding: 10px;
                font-size: 14px;
            } 
       </style> 
    </head>
     
    <body>
     
        <h1>새로운 HTML 요소의 정의</h1>
        <h2>제목 2입니다.</h2>
        <p>단락입니다.</p>
        <newPara>우리 수업에서만 사용하는 단락입니다!</newPara>
     
    </body>
     
    </html>
    		cs


    실행결과 :


    새로운 HTML 요소의 정의

    제목 2입니다.

    단락입니다.

    우리 수업에서만 사용하는 단락입니다!


    위와 같은 방법을 사용하면 모든 새로운 요소를 웹 브라우저에 설명할 수 있다.


    하지만 익스플로러 8과 그 이전 버전에서는 위와 같이 HTML 요소를 새롭게 정의하는 것을 허용하지 않는다.

    따라서 위와 같은 방법이 아닌 HTML Shiv 방법을 사용해야 한다.



    HTML Shiv 방법


    우선 아래의 주석 코드를 <head>태그 내에 삽입한다.

    그러면 익스플로러 8과 그 이전 버전의 브라우저만이 이 자바 스크립트 파일을 읽고 적용할 것이다.

    이와 같은 방법으로 익스플로러 8과 그 이전 버전에서도 HTML5의 새로운 요소들을 자유롭게 사용할 수 있다.

    이러한 방법을 HTML Shiv 방법이라고 하며, Sjoerd Visscher에 의해 개발되었다.


    예제

    1
    2
    3
    4
    5
    6
    7
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
    		cs



    HTML5에서 추가된 의미(semantic) 요소


    의미 요소

    설명

    <header>

    HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함. 

    <nav>

    HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함.

    <main>

    HTML 문서의 주요 콘텐츠(content)를 정의함.

    <section>

    HTML 문서에서 섹션(section) 부분을 정의함. 

    <article>

    HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의함. 

    <aside>

    HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. 

    <figure>

    HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함. 

    <figcaption>

    figure 요소를 위한 캡션을 정의함. 

    <footer>

    HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함. 

    <bdi>

    기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의함. 

    <mark>

    하이라이팅된 텍스트를 정의함. 

    <details>

    사용자가 보거나 숨실 수 있는 추가적인 설명문을 정의함. 

    <summary>

    details 요소에 나타날 내용을 정의함. 

    <dialog>

    다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함. 

    <menuitem>

    사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 정의함. 

    <meter>

    정해진 범위 내의 스칼라 치수를 정의함. 

    <progress>

    작업에 대한 진행 정도를 정의함. 

    <ruby>

    루비(ruby) 문자를 선언함. 

    <rt>

    본문 위에 나타날 문자를 정의함. 

    <time>

    날짜와 시간을 정의함. 

    <wbr>

    br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의함. 



    HTML5에서 추가된 input 요소의 타입


    • number
    • range

    • color

    • date

    • time

    • datetime-local

    • month

    • email

    • tel

    • url

    • search



    HTML5에 추가된 form 요소의 속성


    • autocomplete
    • novalidate



    HTML5에서 추가된 input 요소의 속성


    • autocomplete
    • autofocus
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • height and width
    • list
    • min and max
    • multiple
    • pattern
    • placeholder
    • required
    • step


    HTML5에서 추가된 그래픽 요소


     그래픽 요소

    설명 

    <canvas>

    자바 스크립트를 이용한 그래픽 작업을 정의함. 

    <svg>

    SVG를 이용한 그래픽 작업을 정의함. 



    HTML5에서 추가된 멀티미디어 요소


    멀티미디어 요소

    설명

    <audio>

    오디오와 음악 등 오디오 파일을 명시함. 

    <video>

    비디오와 영화 등 비디오 파일을 명시함. 

    <embed>

    플러그인(plug-in)과 같은 HTML 문서에 삽입할 객체(object)를 명시함.

    <track>

    비디오 플레이어에 대한 텍스트 자막을 명시함. 




    728x90
    반응형
    저작자표시 비영리 변경금지

    'Mark Up > Html' 카테고리의 다른 글

    블록과 인라인  (0) 2018.10.04
    HTML 색  (0) 2018.10.03
    문자셋(Character set)  (0) 2018.10.03
    엔티티(Entity)  (0) 2018.10.03
    Html 기초 (TAG)  (0) 2018.07.10

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바