티스토리 뷰
HTML(Hyper Text Markup Language)
웹페이지를 표현하기 위한 언어이다.
이름에 하이퍼텍스트가 들어가는데 하이퍼텍스트는 참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 접근하는 텍스트를 의미한다.
HTML이 개발된 이유는 1980년 CERN에서 정보를 공유하기 위해서 인터넷 기반 정보공유 체계를 만들었는데 여기서 정보를 표현하기위한 방식이 하이퍼텍스트로 작성된 문서 HTML이다.
DOM 이란?
Document Object Model의 줄임말이며, DOM이라는 것을 통해 우리는 모든 문서 Document Element의 Object(객체), Property(속성), Method(동작)을 정의하고 접근할 수 있다. DOM을 구성하는 Element들은 하나의 Node 단위로 표현될 수 있다.
HTML DOM Properties
DOM을 구성하는 노드들은 다음과 같은 기본 속성을 가진다.
E = Element
E.innerHTML : E의 텍스트 값을 의미
E.nodeName : E노드의 이름을 의미
E.nodeValue : E노드의 값을 의미
E.parentNode : E 노드의 부모 노드를 의미한다.
E.childNodes : E 노드의 자식 노드를 의미한다.
E.attributes : E 의 여러 속성을 의미한다.
Method
E.appendChidl(node) : 새로운 노드를 E에 추가한다.
E.removeChild(node) : E에 존재하는 해당 노드를 제거한다.
E.getElementById(id) : id 값을 통해 E 의 자식 노드 중에서 특정 element를 찾는다.
E.getElementsByTagName(name) : E의 자식 노드 중에서 name 이라는 태그 의름을 가진 모든 Element를 찾아온다.
HTML 버전
DTD(문서 형 정의)
HTML 최상단에 DOCTYPE을 선언하는데 이유는 HTML 버전별로 지원하는 기능이나 태그도 다르고 브라우저가 작성된 HTML에 맞게 해석하기 위해서다.
HTML5
HTML5는 HTML의 완전한 5번째 버전으로 2014년 W3C에서 표준안으로 확정했다.
이전버전과 비교해 DTD선언도 간결해졌다.
html 5
html 4.01 Strict
http://www.w3.org/TR/html4/strict.dtd>">
html4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd>">
HTML 4.01 Frameset
http://www.w3.org/TR/html4/frameset.dtd>">
XHTML 1.0 Strict
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>">
XHTML 1.0 Transitional
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>">
XHTML 1.0 Frameset
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>">
HTML5의 새로운 기능
시멘틱 요소
문서의 구조나 데이터의 의미를 보다 명확히 할 수 있는 태그들을 제공.
웹 폼 요소
기존 HTML에 비해 사용자 입력 양식이 개선됨. 특히 범위의 입력이나 색상의 입력, 시간과 날짜 입력 등에 대한 입력 양식이 HTML 요소로서 제공되기 때문에 기존의 방법처럼 외부 자바스크립트 라이브러리를 이용하거나 직접 만들어 쓸 필요가 없다.
지오로케이션(Geolocation)
현재 페이지에 사용자의 위치를 추적할 수 있는 기능을 구현할 수 있음. 이들 기능을 구현하는데 필요한 API는 단 3개다. 구글 맵 등과 쉽게 연동 가능하며 지도상의 사용자 위치를 쉽게 표현할 수 있다.
웹 워커(Web Worker)
비동기 백그라운드 처리가 가능한 워커 쓰레드를 제공함.
웹소켓(Web socket)
웹 소켓을 이용하면 서버,클라이언트 간 양방향 통신이 가능함. 기존의 AJAX 기술에서 이런 양방향 통신을 흉내내기 위해 Comet, Long Poling 등의 기법을 사용했지만 HTML5에서는 완전한 네트워크 소켓을 통해 양방향 통신구현이 가능하다.
멀티미디어 지원
더이상 <object>와 같은 태그나 플랫, 자바 애플릿 등과 같은 서드파티 플러그인을 사용하지 않고도 미디어 파일을 재생하고 재생 관련 기능도 쉽게 제어 가능하다. 다시 말해 웹 상에서 비디오와 오디오를 표현하기 위한 태그나 API 를 제공한다.
로컬 스토리지( Local Storage )
브라우저 기반 내부 데이터 저장공간을 사용할 수 있게 함. 쿠키보다 많은 양의 데이터를 핸들링 가능하다.
쿠키를 대체하진 않아도 그와는 다른 목적과 용도로 활용할 수도 있다.
웹 데이터베이스
SQLite 기반 DB를 사용하듯이 SQL 질의를 수행할 수 있는 API 제공
Application Cache
인터넷에 연결되지 않은 상태에서도 오프라인 응용 프로그램이 구현 가능하도록 지원.
2D/3D 캔버스
웹상에서 그래픽을 표현하기 위한 다양한 API 지원. Canvas 라는 새로운 HTML 요소가 추가됨. 이 요소를 통해 2D 그래픽 뿐만 아니라 산업계 표준으로 활용되는 OpenGL 기반의 WebGL 이라는 기술을 이용하여 3D 그래픽도 표현 가능.
SVG
XML 기반으로 표현되는 2차원 벡터 그래픽을 HTML 내부에서 삽입할 수 ㅇㅆ도록 한다. 이를 통해 그래프나 인포그래픽 표현이 용이해진다.
서버푸시(Server Push)
모바일 애플처럼 서버로부터 정보를 받을 수 있는 방법을 제공.
드래그 앤 드롭
웹 페이지 내부 뿐만 아니라 외부 요소를 웹 페이지로 드래그하여 작업할 수 있는 방법을 제공.
파일API
웹 페이지가 동작하는 동안 클라이언트의 로컬 파일을 직접 액세스할 수 있는 방법을 제공한다. 기존에는 보안 문제로 사용 X 였지만 HTML5에서는 가능
CSS3
CSS3를 지원함
HTML5의 TAG에 대해서
HTML5에서 사용하는 용도는 비슷비슷한데 이름이 다른경우가 많다 예를들면 body, head, footer등 div로 만들어도 문제가 없는데 왜 분리된 태그로 존재할까?
웹 크롤러가 자동으로 HTML을 분석할때 기준이 되는것이 태그가 될 때가 많다.
head태그 안의 데이터는 대략적인 페이지를 분석하는데 도움이 되고 nav 태그를 보면 어떤 메뉴가 있는지 파악할 수 있다. 때문에 가급적 목적에 맞는 태그를 사용하는것이 SEO등 페이지 정보를 제공하는데 더 좋다.
Block level elements in HTML
Inline elements in HTML
HTML HEAD
head에는 보통 사이트의 메타데이터를 기술한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
메타데이터는 예를들면 아래와같은 정보를 포함한다.
title
- 브라우저탭의 타이틀을 정의한다.
style
- 단일 HTML페이지의 스타일 정보를 정의한다.
link
- 외부 스타일 시트를 사용한다.
meta
- 메타데이터는 데이터를 설명하는 데이터다. 예를들어 문서의 인코딩을 특정하려면 <meta charset=”utf-8”> 과 같이 사용한다.
viewport
- PC, 모바일, 태블릿 등 웹페이지를 이용하는 디바이스에 따라 크기를 조정하기 위해 존재합니다. (viewport는 W3C 명세에는 없다고 합니다)
reference
https://ko.wikipedia.org/wiki/HTML
https://www.w3schools.com/html/html_blocks.asp