ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • DCOTYPE와 HTML5에 대해서
      Coding 2022. 5. 29. 09:58

      개요

      HTML5의 등장으로 웹표준이 정착해가고 잇으나 아직 HTML4.01이나 XHTML1.0을 사용하는 경우도 있다.

       

      초기 HTML은 단순 텍스트위주의 표현을 위하였지만 점차 다양한 요소를 표현하고 디자인적인 태그들도 생겼다. IE에 독주로 ActiveX 사용등 특정 브라우저에서만 볼 수 있는 기술들이 생겼다.

      점점 다양한 플랫폼 다양한 브라우저 사용이 늘려 웹 표준이 필요하게 되었다.

      웹 표준을 만들기 위해 HTML4.01, XHTML의 등장의 과정을 겪고 현재 HTML5가 탄생했다.

      웹 표준은 HTML에서는 구조만 짜고 디자인적인 표현요소는 CSS로 분리했다.

       

      현재 HTML5는 다양한 브라우저에서 다 호환이 되고 HTML과 CSS를 분리하면서 기존 HTML의 디자인태그를 삭제했다. 

       

      1. HTML 4.01

      버전  :  HTML 4.01 Strict



선언부  :  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



설명  :  strict 단어 뜻대로 웹 표준을 엄격하게 지키는 버전.
center, font를 포함한 14가지 태그를 사용하지 않습니다.
      버전 : HTML 4.01 Transitional



선언부  :  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

설명 : 아직까지도 많이 쓰이며 프레임을 제외한 모든 태그 사용이 가능
      버전  : HTML 4.01 Frameset



선언부  :  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

설명  :  프레임 관련 태그까지 모두 사용 가능

       

      2. XHTML1.0

      버전  :  XHTML 1.0 Strict



선언부  :  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


설명  :   웹 표준을 엄격히 지키는 버전
      버전  :  XHTML 1.0 Transitional



선언부  :  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


설명  :  역시 여전히 쓰이며 기존 웹 페이지와의 호환성을 위해 쓰인다
      버전  :  XHTML 1.0 Frameset



선언부  :  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">



설명  : 마찬가지 프레임 관련 태그 사용가능

       

      3. HTML5

      버전 :  HTML5


선언부  :   <!DOCTYPE HTML>



설명  :  선언부가 매우 간단해졌다. 웹표준을 지키며 디자인을 위한 14개의 태그가 삭제되었다. 
대형 웹사이트 들은 대부분 HTML5로 갈아탔다.

       

      4.HTML5 기능

      • 2014년 10월 28일 확정된 차세대 웹 표준으로 기능들이 추가됨
      • 멀티미디어 : 플래시 같은 플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원함
      • 그래픽 : SVG, Canvas를 사용한 2차원 그래픽과 CSS#, WebGL을 사용한 3차원 그래픽을 지원함
      • 통신 : 단방향통신에서 버서와의 소켓 통신을 지원하며 서버와의 양방향 통신이 가능함
      • 디바이스 접근 : 카메라, 동작센서 등의 하드웨어 기능을 직접 제어할 수 있음
      • 오프라인 및 저장소 : 오프라인 상태에서도 애플리케이션을 동작시킬 수 있음, 플랫폼으로서 사용될 수 있음
      • 시맨틱 태그 : 브라우저, 검색엔진, 개발자 모두 콘텐츠의 의미를 명확히 설명할 수 있다. 이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있다.
      • CSS3 : HTML5는 완벽하게 지원함

      시멘틱웹

      인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보로 이런 정보들이 웹사이트의 HTML코드이다. 검색엔진은 HTML코드 만으로 그 의미를 인지하여여 하고 이때 시맨틱 요소를 해석하게 된다.

      웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 데이터 집합에 의미와 관련성을 가지는 데이터베이스로 구축하고자 하는 발상에서 생겨남

      <div class="header"></div> 방식에서 벗어나 <header></header> 방식으로 의미를 명확히 나타낼 수 있는 태그들을 사용해 사이트의 구조를 파악하기 쉽도록 만듦

       

      HTML5에 새로 추가된 시맨틱 태그

      • header : 헤더 의미
      • nav : 메뉴와 같은 네비게이션 태그 의미
      • aside : 사이드에 위치하는 공간
      • section : 본문의 여러 내용을 포함하는 공간
      • article : 본문의 주내용이 들어가는 공간
      • footer : 문서나 특정구역의 바닥글, 문서 작성자, 저작권, 연락처 등

      HTML5에 새로 추가된 시맨틱 태그

      details : 사용자가 필요에 따라 보거나 숨길 수 있는 세부정보 지정

      summary : 디테일 요소 안에 보이는 머리글을 정의, summary를 클릭하여 세부정보를 보거나 숨길 수 있음

      dialog : 다이얼로그 박스(창)을 정의

      figcaption : <figure>와 함께 사용, 이미지에 대한 캡션 설명

      figure : 이미지에 시각적인 설명을 추가하기 위해 그룹화할 때 사용

      main : 문서의 중요내용을 지정, 고유한  내용이어야 함(하나 이상의 main 태그가 있으면 안됨)

      mark : 텍스트 부문을 강조

      meter : 알려진 범위 또는 분수값내에서 스칼라 측정을 정의 (디스크 사용량, <meter value="0.6">60%</meter>)

      progress : 진행바

      section : 문서의 섹션, 제목과 함께 내용의 주제별 그룹

      time : 일자, 시간 정의 태그

      wbr : 텍스트에서 줄 바꿈을 추가할 수 있는 위치 지정 <br>처럼 무조건 줄바꿈 하는게 아니라 공간이 충분한 경우는 줄바꿈 하지 않음

       

      form input attribute

      신규 input type

      예시) <input type="date">

      color

      date

      datetime

      datetime-local

      email

      month

      number

      range

      search

      tel

      time

      url

      week

       

      input 속성

      예시) <input type="text" autofocus>

      autocomplete

      autofocus

      form

      formaction

      formenctype

      formmethod

      formnovalidate

      formtarget

      height and width

      list

      min and max

      multiple

      pattern(regexp)

      placeholder

      required

      step

       

      HTML5 API

      HTML Geolocation : 사용자의 지리적 위치를 가져오는데 사용(사용자가 승인해야 함)

      <script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
}
</script>

      HTML Drag and Drop : 모든 요소를 드래그 앤 드랍으로 이동할 수 있음

      <script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

      HTML Local Storage : 쿠키 대신 사용자 브라우저에 로컬 데이터 저장 가능

      // Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

      HTML Web Workers : 페이지 성능에 영향을 주지 않고 백그라운드에서 실행되는 자바스크립트

      <script>
var w;

function startWorker() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

      HTML SSE(Server-Sent Events) : 웹페이지가 자동으로 서버에서 업데이트 정보를 가져오는 기능

      예 : 페이스북, 트위터 업데이트, 주가 업데이트, 스포츠 결과 없데이트 등

      //클라이언트 코드
<script>
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("demo_sse.php");
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
  };
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>


//서버측 코드
//"Content-Type"헤더를 "text / event-stream"으로 설정해야 함
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

      브라우저에 새로운 Element 추가 가능

      예를 들어 아래와 같이 <myCustomTag>를 정의할 수 있다. 

      <body>

  <h1>A Heading</h1>
  <myCustomTag>My Hero Element</myCustomTag>

</body>

      IE9 이전 버전과의 호환성을 제공하는 방법

      HTML5Shiv.js 를 <head>태그 사이에 추가

      <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>

      HTML5 스타일(코딩) 가이드

      • 속성의 값은 따옴표로 감싼다. (html5에서는 따옴표가 없어도 된다. 하지만 기존 HTML과의 호환성. 값에 공백이 있는 경우, 가독성을 높이기 위해서는 따옴표로 감싸는게 좋다)
        <table class="striped">
      • 이미지 태그에는 alt를 이용해서 이미지 설명을 추가하고, width와 height 를 명시해준다.
        <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
      • 불필요하게 비어있는 라인을 사용하지 말고, 가독성을 위해 두칸의 들여쓰기 공백을 추가한다.
        (보통 탭키를 사용했었는데 탭키를 사용하지 말라고 하네요.)
      • 페이지의 크기, 디자인 등을 위해 viewport를 설정한다.
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        width = device-width 부분은 페이지의 너비를 장치의 화면 너비에 따라 설정 (장치에 따라 다름).
        initial-scale = 1.0 부분은 브라우저가 페이지를 처음로드 할 때 초기 줌 레벨을 설정
      • 스타일 시트 정의할 때 type 속성 필요없음
        <link rel="stylesheet" href="styles.css">
      • 자바스크립트 정의할 때 type 속성 필요없음
        <script src="myscript.js">
       
      저작자표시 비영리 변경금지

      관련글 관련글 더보기

    Copyright 2024

    티스토리툴바