HTML

정평화·2023년 5월 28일

마크다운(Markdown)와 웹(web)을 공부하기 위해 velog에 저장해두는 글 😉

HTML 와 웹의 역사

HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.

1989년 - 팀 버너스 리(월드 와이드 웹의 창시자)가 HTML, URL, HTTP를 발표.

1990년 - HTML 버전 1.0 발표.

1991년 - HTTP (Hypertext Transfer Protocol) 공식 승인.

1992년 - HTML 버전 2.0 발표.

1993년 - NCSA Mosaic 웹 브라우저 출시.

1994년 - W3C(World Wide Web Consortium) 창립, HTML 버전 3.0 발표.

1995년 - JavaScript, SSL (보안 소켓 레이어), CGI(Common Gateway Interface) 등장.

1996년 - CSS(Cascading Style Sheets) 발표.

1998년 - XML(Extensible Markup Language) 발표.

1999년 - W3C, XHTML (Extensible HyperText Markup Language) 발표.

2000년 - 웹 2.0 개념 등장.

2002년 - W3C, XHTML 1.0 발표.

2004년 - 웹 2.0가 대세가 되며, AJAX(Asynchronous JavaScript And XML) 등장.

2008년 - HTML5 발표.

2011년 - 모바일 웹이 보급되면서 반응형 웹 디자인이 대세가 되기 시작함.

2014년 - HTML5가 공식 권장 표준으로 제정됨.

HTML5는 웹의 표준 마크업 언어로, 2014년에 공식 권장 표준으로 제정되었습니다. 이전 버전의 HTML과 비교하여, 보다 다양한 멀티미디어 기능을 제공하며, 웹 응용프로그램을 보다 쉽게 개발할 수 있도록 도와줍니다. HTML5는 모바일 기기와 같은 다양한 플랫폼에서 일관된 사용자 경험을 제공할 수 있는 강력한 도구입니다.

HTML4.01 상위버전
XHTML 과의 표준화 전쟁에서 HTML5로 표준 정리.
어도비 플래시 , 실버라이트등의 프로그램 퇴출의 계기.
포괄적 의미
HTML Living Standed, CSS# + , ECMAScript 6 등과 같이
권고안
브라우저 전쟁
일렉트론은 Javascript, HTML, CSS를 이용하여 Desktop Application을 만드는 프레임워크입니다.
따라서 자바스크립트와 웹개발 지식을 가지고 있다면 쉽게 데스크톱 애플리케이션을 만들 수 있습니다.
리액트 네이티브

2012년 전후로 어도비abobe의 폰갭phoneGap을 사용해 HTML5로 모바일 애플리케이션을 만드는 시도가 다양하게 이루어 졌습니다. 하지만 폰갭은 몇 가지 성능적 이슈를 가지고 있었습니다.
페이스북은 폰갭의 성능에 만족하지 못했고, 모바일 애플리케이션을 만들 수 있게 하는 새로운 엔진을 만들었습니다. 이 엔진이 바로 리액트 네이티브React Native. 입니다.
리액트 네이티브를 사용하면 HTML5로 개발했을 때 내부저긍로 안드로이드와 아이폰에 맞는 네이티브 코드(간단하게 "해당 스마트폰이 가장 만족하는 프로그래밍 언어로 작성된 코드")로 변환됩니다. 이를 통해 성능적인 이슈를 해결했습니다.
리액트 네이티브로 만든 앱

PWA(pogressive web app)프로그레시브 웹 앱

1. 우리 모두가 알고 있는 좋아하는 HTML, Css , jS 와 같은 웹 기술로 만들 앱이며 , 느낌과 기능은 실제 네이티브 앱과 견줄 수 있을 정도로 좋습니다.

자세한 설명 링크
-> https://yozm.wishket.com/magazine/detail/537/

HTML 페이지 작성하기

Visual Studio Code로 html을 입력했을 뜨는 자동 완성 기능
html5를 클릭하면 밑에처럼 html코드가 만들어진다.

코드 1-1 Visual Studio Code로 가 만들어주는 기본적인 HTML 문서 구조

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>

   </body>
   </html>

코드 1-2 간략하게 만든 HTML 문서 구조

<!DOCTYPE html>
<html >
  <head>
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

코드 1-3 Hello HTML5

<!DOCTYPE html>
<html >
 <head>
   <title>Document</title>
 </head>
 <body>
   <h1>Hello HTML5...!<h1>
 </body>
</html>

코드 1-3 웹 브라우저에서 드래그하여 실행한 htmlStudy.html 파일

Tip : 드래그 하여 하는 실행하는 것 보다는 마켓플레이스에서 open in browser을 받아서 Window는 ALT + B이고 Mac OS는 Option + B 를 눌러주면 바로 실행된다.
자세한 설명 링크 참조
사용문법: Title
적용예: open_in_browser 사용법