Development Artist

[Study] HTML Version Difference 본문

Internship

[Study] HTML Version Difference

JMcunst 2021. 7. 6. 10:25
728x90
반응형

HTML 

 HTML1.0은 Tim Berners에 의해 1991 년에 발표. 웹 페이지 디자인을 수행 할 수있는 기능이 많지 않음.

 

 HTML 컨텐츠의 구조를 정의하는 마크업 언어. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소(element)로 이루어져 있다. tags로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있다.

 

  1. 여는 태그(opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸진다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타낸다.
  2. 닫는 태그(closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다르다. 이것은 요소의 끝을 나타낸다.
  3. 컨텐츠(content): 이것은 요소의 내용(content)으로 그냥 텍스트.
  4. 요소(element): 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어진다.

  • <!DOCTYPE html> — doctype. 아주 오래전 HTML 이 막 나왔을 때 (1991년 2월쯤), doctype은 (자동 오류 확인이나 다른 유용한 것을 의미하는) good HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미. 하지만, 최근에는 아무도 그런 것들에 대해 신경쓰지 않으며 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물. 지금은, 그게 알아야 할 전부. 
  • <html></html> —  페이지 전체의 컨텐츠를 감싸며, 루트(root) 요소라고도 한다.
  • <head></head> —  HTML 페이지에 포함되어 있는 모든 것들(여러분의 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠)의 컨테이너 역할을 합니다. 여기에는 keywords (en-US) 와 검색 결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함.
  • <body></body> —  페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있다.
  • <meta charset="utf-8"> — 문서가 사용해야 할 문자 집합을 utf-8으로 설정한다(utf-8 문자 집합에는 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함되어 있습니다). 본질적으로 사용할 수 있는 어떠한 문자 컨텐트도 다룰 수 있다. 이 문자 집합을 설정하지 않을 이유가 없으며, 설정하면 나중에 발생할 수 있는 일부 문제를 피할 수 있다.

 <img>태그는 이미지가 나타나야 할 위치에 이미지를 끼워 넣는다. 이미지 파일의 경로를 포함하는 src (source) 속성을 통해 이러한 일을 한다.

 alt (alternative) 속성도 존재. — 이 속성에는 다음과 같은 이유로 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text)을 지정할 수 있다.

<h>태그는 내용의 특정 부분이 제목 또는 내용의 하위 제목임을 구체화 할 수 있게 해준다. 책에 중심 제목이 있고 그 다음 각각의 장에 제목을 가지고, 그리고 그 안에 부제가 있는 것과 같은 방식으로 HTML 문서도 제목들을 갖는다. HTML 은 여섯 단계의 제목을 갖고, <h1>-<h6>,  3-4를 주로 사용하게 될 것이다.

<p>태그는 문자의 문단을 포함하기 위한 것. 일반적인 문자 내용을 나타낼 때 많이 사용하게 될 것이다.

많은 웹의 내용은 목록이기 때문에, HTML은 이것을 위한 특별한 요소를 가지고 있다. 목록을 나타내는 것은 항상 최소 두 개의 요소로 구성된다. 가장 일반적인 목록의 종류는 순서가 있는 것과 순서 없는 것.

  1. 순서 없는 목록은 쇼핑 목록과 같이 항목의 순서에 관계가 없는 목록을 위한 것. <ul> 요소로 둘러 쌓여 있다.
  2. 순서 있는 리스트는 조리법처럼 항목의 순서가 중요한 목록을 위한 것. <ol> 요소로 둘러 쌓여 있다.

목록의 각 항목은 <li> (목록 항목) 요소 안에 놓여야 한다.

<a>태그는 웹을 웹으로 만들어준다.  — <a> — a 는 "anchor" 의 약자.

HTML2

 HTML2.0은 1995 년에 등장. 이전 버전의 모든 기능과 자체 기능이 포함.

 

 형식과 기능(인라인 이미지 등)을 추가로 도입. 컨텐츠 스타일을 지정하는 몇 가지 더 쉬운 방법을 제공했는데, 이는 HTML의 개념에 어긋남.


HTML 3.2

 HTML3.2는 1997 년에 출시.이 버전은 캐스 케이 딩 스타일 시트 (CSS) 지원.

 

 웹 조직이 되고 있다는 것을 나타낸다. 많은 정당들은 자신들의 사리를 개념보다 더 중요하게 여겼으며, 자신의 특징을 지지하거나 구현했다. 웹은 플랫폼과 브랜드와 관련된 심각한 차이로 인해 어려움을 겪었습니다.


HTML 4.0.1

 HTML4.0.1은 1999 년에 출시. 버전 3.2에서는 HTML 자체에 CSS를 통합해야하는데, HTML 4.01에서는 외부 스타일 시트가 소개됨. 여기서 HTML 내부에 통합해야하는 외부 CSS 파일을 만들어야한다. 이 버전은 또한 새로운 태그를 추가. 

 

 W3C의 "이별" 입장을 나타냈다. 그들은 싸움과 싸움을 끝냈다. 이 최종 버전은 HTML 언어를 다른 언어에서 사용할 수 있게 해 주었고, 너무 많은 분사를 가져와서 웹은 암흑시대에 접어들었다.

 

 W3C : W3C는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 팀 버너스 리를 중심으로 1994년 10월에 설립되었다. W3C는 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄이다.


HTML5

HTML5는 2014 년에 출시.이 버전에는 멀티미디어 지원, 외부 플러그인 사용 최소화, 새 태그 추가 등 많은 새로운 기능이 있다.

 

 웹에 관련된 모든 사람들에게 중요한 경종을 울리는 역할을 함. W3C는 모든 당사자들을 규합하고 기술과 W3C 회원들의 처리 방식에 대한 대대적인 개편을 지시. HTML5는 더 이상 단순한 버전이 아니다. HTML5는 기존, 개정, 신규 및 개별적으로 진화하는 기반 기술의 새로운 출발점이 되었다. 

 

HTML vs HTML5

 

1   코드에서 잘못된 구문에 대한 지원 X 코드에서 부적절한 구문을 처리하는 효율성 O
2 백그라운드에서 실행되는 JavaScript를 지원 X Javascript 백그라운드에서 실행 O
3 Strict, Frame set, Transitional이라는 세 가지   doctype 선언. 더 쉬운 doctype 선언 :
4 오디오 및 비디오를 재생하려면 Flash 지원이 필요. , 태그는 오디오, 비디오 및 게임의 사용을 지원.
5 HTML과 관련된 Flash, VML 또는 Silverlight는 벡터 그래픽의 사용을 가능케 함. SVG 및 캔버스를 지원.
6 모든 이전 브라우저에서 실행. 최신 버전의 Chrome, Safari 등에서도 작동.
7 모바일 사용 안정성이 떨어짐. 모바일 사용자의 사용이 쉽다.
8 원, 직사각형, 정사각형 등의 도형을 그릴 수 없다. 원, 직사각형, 정사각형 등의 도형을 그릴 수 있다.
9 브라우저 캐시는 임시 저장소로 활용. SQL 웹 데이터베이스, 애플리케이션 캐시 및 웹 스토리지가 스토리지로 활용.
10 드래그 앤 드롭 기능이 제공 X. 드래그 앤 드롭 기능이 제공 O.
11 준비 성과 속도 측면에서 개발자의 사용에별로 유리하지 않다. 준비성, 속도 및 실행 측면에서 개발자의 사용에 유리.
12 ,, 태그는 코딩하는 동안 필수. ,, 태그는 코딩 중에 생략 할 수 있다.
13 Div 요소는 내용에 대해 아무것도 알려주지 않는 광범위하게 사용. header, footer, aside 등과 같은 의미 론적 의미를 가진 새로운 요소가 도입되어 코드를보다 의미 있고 디버그하기 쉽게 만듦.
14 정교한 문자 유형 인코딩. 더 쉬운 문자 유형 인코딩.
15 사용자가 사용할 수없는 지리적 위치 정보를 가져 오는 기능. HTML geolocation의 최신 API는 사용자의 정확한 위치 세부 정보를 제공.
16 및 태그의 유형 속성은 코드에서 필수. 및 태그의 유형 속성은 코드에서 생략 할 수 있다.
728x90
반응형

'Internship' 카테고리의 다른 글

[Study] Vue Component LifeCycle  (0) 2021.07.07
[Study] Django Cycle : Request&Response  (0) 2021.07.07
[Django, Issue] 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 없는 프로그램 이름으로 인식되지 않습니다. CategoryInfo : ObjectNotFound, FullyQualifiedErrorId : CommandNotFoundException  (0) 2021.07.07
[Internship] Training 2일차 : Vue.js  (0) 2021.07.06
[Internship] Training 1일차 : Latest Technology  (0) 2021.07.06
'Internship' Related Articles more
Comments