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 : 문서나 특정구역의 바닥글, 문서 작성자, 저작권, 연락처 등

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

month

number

range

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

저작자표시 비영리 변경금지

'Coding' 카테고리의 다른 글

box-sizing 박스 크기 속성 (0)	2022.05.31
자바스크립트 var, let, const의 차이 (0)	2022.05.30
CSS 속성 position (0)	2022.05.29
블로그 웹페이지에 F12 컨트롤 하기 (0)	2022.05.29
메타 태그 META TAG 속성들에는 어떤것이 있을까 (0)	2022.05.28
BOOL 알아보기 (0)	2022.05.26
CSS를 이용 상단 메뉴바 (0)	2022.05.26
HTML 수정하기전 기본숙지사항 (0)	2022.05.26

ABOUT ME

GoldenKey GoldenKey

개요

1. HTML 4.01

2. XHTML1.0

3. HTML5

4.HTML5 기능

시멘틱웹

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

form input attribute

input 속성

HTML5 API

HTML5 스타일(코딩) 가이드

'Coding' 카테고리의 다른 글

티스토리툴바

ABOUT ME

개요

1. HTML 4.01

2. XHTML1.0

3. HTML5

4.HTML5 기능

시멘틱웹

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

form input attribute

input 속성

HTML5 API

HTML5 스타일(코딩) 가이드

'Coding' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바