개발 STUDY - 1일1글작성

HTML5 를 알아보자. HTML5의 이해 본문

Web

HTML5 를 알아보자. HTML5의 이해

DeFo 2020. 6. 3. 07:13
공부 환경
-혼자 간단하게 웹 페이지를 만들어 보고 싶어서 시작
-퇴근 후 짬짬히
-느리지만 꾸준하게 할 예정

 

 

HTML이란?

모두가 한 번쯤은 들어봐서 대충 알듯이 Hyper Text Markup Language.

웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어로 연산 기능 없이 단순히 컨텐츠를 표현만 해주는 언어이다.

웹 컨텐츠 중에서도 컨텐츠 구조를 지정하는 언어!

 

 

 

HTML 실행 구조

사용자 : 웹 브라우저를 통해 서버에 HTML 파일 요청

서버 : HTML 및 관련 파일 웹 브라우저에 전송

웹 브라우저 : HTML 언어 지시에 따라 콘텐츠 표시

 

 

 

웹 브라우저와 HTML5 히스토리

웹 브라우저 초기 : Netscape VS MS Internet Explorer 시장 점유율 전쟁

웹 브라우저끼리 기술과 표현 방법을 배타적으로 사용하여 호환성 결여되었다고 한다.

 

시장 점유율 전쟁은 MS사의 승리!

MS사에서는 웹 브라우저 개발 등한시하게 되고 다양한 웹 브라우저 등장하게 됨.

 

W3C(World Wide Web Consortium : 웹 표준 개발 기구) : XHTML 등장. HTML보다 엄격한 문법 제한.

향후 웹 표준으로 발전시키려 함 -> but 업계 지지 얻지 못함. 

 

WHATWG(Web Hypertext Application Technology Working Goup)

: 웹 관련 업체들이 워킹 그룹을 만들어 활동. HTML5 탄생.

기존 HTML의 연장선이라는 의미로 HTML5라고 부름

 

W3C 에서도 XHTM2 개발 중단하고 HTML5를 인정하게 됨. 

 

 

 

HTML5 의미

-이름에서 알 수 있듯 기존 HTML 기술과 호환성 유지

-엄격한 문법 강요하지 않음. 실용적

-컨텐츠와 표현의 완벽한 분리

-플러그 인 없이 웹 브라우저가 다양한 미디어 처리, 2D, 3D 처리. 동적 작동

-최신 웹 기술

ex)

  • 지오로케이션 : 위치 정보 처리
  • 웹소켓 : 웹 서버와 실시간 통신
  • 웹스토리지 : 클라이언트 저장 공간 이용
  • 웹워커 : 다중 프로세스 작업

 

 

웹 페이지 구성 삼대장

HTML, CSS, JavaScript

-HTML : 컨텐츠 구조 정의

-CSS : 컨텐츠 레이아웃과 표현 방식 정의

-JavaScript : 컨텐츠 작동 정의

 

 

 

DOCTYPE 지정하기

HTML 버전이 여러 개이고 웹 브라우저가 하위 호환성을 위해 여러 버전의 HTML 을 지원하기 때문에

HTML 문서에서는 DOCTYPE을 지정해줘야 함

브라우저에게 우리는 특정 버전의 HTML 파일이니까 잘 해석해서 표현해주세요~ 라는 의미를 전달하는 것!

 

HTML5는 DOCTYPE 어떻게 지정?

<!DOCTYPE html> 끝. 참 쉽죠?!

 

 

 

HTML 구조

 

기본 구조 형태

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

 

 

<head> 설정

body 처리 전 실행되어야 하는 설정 부분. HTML 파일의 메타데이터, 스크립트와 CSS 등이 위치
메타데이터 : 파일에 관한 정보를 가진 데이터. ex) 음원 파일의 앨범, 작사, 작곡 등 음원 정보.
-> HTML의 문자 인코딩, 설명, 키워드, 작성자, 저작권, 연락처, 작성일 등과 같은 정보
-> 메타데이터는 구글 등 검색 엔진에 의해 수집되는 정보이기 때문에 중요!
-> 문자 인코딩 : 정의하지 않을 경우 웹 브라우저 기본 설정 문자 인코딩으로 표시됨. 

    유니코드인 utf-8 사용 추천. 
title (즐겨찾기나 북마크 저장 시 사용됨)

 

 

 

<body> 에는? 
웹 브라우저에 표시할 내용. 끝!

 

 

 

내용은 모두 개인 공부 기록 용이기에 부족한 부분이나 내용상 오류가 있을 수도 있습니다.
참고용으로 보시기 바랍니다.
혹 잘못된 내용이 있을 시 댓글 남겨주시면 수정하도록 하겠습니다.

 

 

'Web' 카테고리의 다른 글

HTML5 - Table 구조화  (0) 2020.06.08
HTML5 - HTML5의 텍스트 관련 요소  (0) 2020.06.07
HTML5 - 구조적 마크업 이해! HTML5의 기타 그룹 컨텐츠 요소와 전역 속성  (0) 2020.06.06
HTML5 - 구조적 마크업 이해! HTML5의 그룹 컨텐츠 요소  (0) 2020.06.05
HTML5 - 구조적 마크업 이해! HTML5의 섹션 요소  (0) 2020.06.04
'Web' Related Articles more
Comments