본문으로 바로가기

[HTML] HTML5 과 HTML

category CS/개발지식 2018. 5. 7. 15:22

학습 목표

  1. html이란?
  2. html5의 특징과 주요 기능
  3. html vs html5


HTML (HyperText Markup Language)


① HTML이란?


HyperText Markup Language의 약자입니다.

   ▶ HT(HyperText) : 문서와 문서가 링크로 연결되어 있다.

   ▶ M (Markup) : 태그로 이루어져 있다.

   ▶ Language


기본 형태

   

1
2
3
4
5
6
7
8
<html>
    <head>
        화면에 보여지기 위한 추가적인 정보(메타정보)를 담고 있는 부분
    </head>
    <body>
        화면에 보여지는 부분
    </body>
</html>
cs


HTML 파일

   ▶ HTML 코드를 파일에 저장하고 웹브라우저에서 로딩하면 웹페이지가 만들어집니다.

   ▶ 확장명으로는 html 혹은 htm을 사용합니다.


▷ HTML 태그

  ▶ 'Semantic한 태그'라고 표현하며 이는 '각각의 의미를 지닌다'라는 의미를 가지고 있습니다.

  ▶ HTML Element Reference : https://www.w3schools.com/tags/ref_byfunc.asp


HTML vs HTML5


① HTML5란?


HTML5 는 차세대 웹 표준으로 HTML이 멀티미디어 등 다양한 애플리케이션까지 제공하도록 진화한 "웹 프로그래밍 언어"입니다.

▷ HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어입니다.

모바일 웹에서의 핵심 기술이다.


 특징


▷ HTML5는 클라이언트와 서버와의 통신이 가능하다.

▷ 다른 외부 Active-X와 같은 plug-ins 을 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가되었다.

   ▶ CSS3, JS 를 통한 기능의 확장과 결합은 외부 플러그인의 의존도를 걷어냄으로써 웹 표준, 웹 접근성에 한층 높여놓았다.


③ 주요 기능

  1. Device AccessDEVICE ACCESS : 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어
  2. CONNECTIVITY (Web Socket) : 웹(클라이언트)에서 서버 측과 직접적인 양방향 통신 가능
  3. 3D, GRAPHICS & EFFECTS : 다양한 2차원 및 3차원 그래픽 기능을 지원
  4. Styling Effects (CSS3) : 글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공
  5. MULTIMEDIA : 비디오 및 오디오 기능을 자체적으로 지원
  6. OFFLINE & STORAGE : 네트워크 미지원 환경에서도 웹 이용을 가능하게 함
  7. Geo-Location : GPS 없이도 단말기의 지리적인 위치 정보를 제공
  8. SEMANTICS : 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맟춤형 검색 제공


④ HTML4 vs HTML5

  1. 차이점 1 : Syntax(구문)
    1. DOCTYPE : 기존의 html 문서타입보다 간결해졌다.
    2. Encoding : 인코딩 선언부가 간결해졌다.
    3. 그래픽 언어의 사용 : 수식기술언어(MathML), 그래픽언어(SVG) 등을 사용할 수 있다.
    4. HTML5는 마크업시 TAG는 대소문자를 구분하지 않는다. 하지만 가독성 측면에서 소문자로 작성하는 것을 권장한다.
  2. 차이점 2 : Language(언어)
    1. Semantic Element가 추가되었다 : Header, Footer, Nav, Section, Article 등등....
    2. 사라진 Element
      1. CSS로 처리할 수 있는 Element
      2. Frame 관련 Element
      3. 거의 사용되지 않는 Element
  3. 차이점 3 : API
    1. Video/Audio API : Video, Audio Element와 함께 Video, Audio를 재생하는 데 사용된다.
    2. Offline Web Application : Offline을 지원하는 API
    3. Drag & Drop API 등등이 있습니다.

( http://webclub.tistory.com/491 ) 에 자세한 설명이 나와있습니다.



참고

  1. http://www.edwith.org/htmlcss/lecture/16566/
  2. https://opentutorials.org/course/11/10
  3. https://jsbin.com/?html,output (JS Bin 온라인 에디터)
    1. 내 PC에 별도의 환경설정이나 프로그램을 설치않고 웹사이트에서 바로 HTML/CSS/JS를 편집할 수 있는 서비스입니다.
  4. http://webclub.tistory.com/491
  5. https://www.keycdn.com/blog/html-vs-html5/



댓글을 달아 주세요