World Wide Web=웹(WWW) ?

구독자 여러분들의 목표는 웹사이트를 개발하여 서비스하는 것이기에 웹이란 용어에 대해 어느정도는 이해하셔야 할듯하여 웹이란 용어 및 그 구성요소들에 대해 정리하고 넘어가겠습니다.
웹은 일반적으로 World Wide Web, WWW, W3 라고도 표현하죠. 

위키에 등록된 웹의 정의를 한번 살펴볼까요?

"월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
간단히 웹(Web)이라 부르는 경우가 많다.
이 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다.
웹은 전자 메일과 같이 인터넷 상에서 동작하는 하나의 서비스일 뿐이다.
그러나 1993년 이래로 웹은 인터넷 구조의 절대적 위치를 차지하고 있다.
인터넷에서 HTTP 프로토콜, 하이퍼텍스트, HTML형식 등을 사용하여 그림과 문자를 교환하는 전송방식을 말하기도 한다."

https://ko.wikipedia.org/wiki/%EC%9B%94%EB%93%9C_%EC%99%80%EC%9D%B4%EB%93%9C_%EC%9B%B9

가끔 인터넷이라고 통칭하기도 하지만 웹은 인터넷 통신망에서  사용자 컴퓨터(PC,태블릿,스마트폰,TV) 가 인터넷망을 통해 각종 웹기반 서비스들을 (웹사이트,메일,문자,음성채팅,화상통화,웹기반 정보관리시스템) 어딘가로부터 제공받는 환경 및 서비스들을 통칭해서 말하는것입니다.

어딘가로부터라는 표현을 했는데요. 그곳은 보통 서버컴퓨터라고 하는  PC보다 가성비가 좋은 기업용 컴퓨터시스템을 통해서 특정형식을 갖춰 특정양식으로 인터넷망을 통해 각종 서비스를 제공받는것을 말합니다.
인터넷은 통신망이라고 표현하는 것이 적절하며 웹은 인터넷 통신망을 통해 사용할수 있는 대표적은 서비스중에 하나일 뿐입니다.

우리가 알고있는 대표적인 웹기반 서비스 종류를 몇가지만 알아보도록 하겠습니다.

가.홈페이지 서비스
-사용자 컴퓨터 단말기(PC,태블릿,스마트폰,스마트TV등등)의 웹브라우저(IE,Chrome,Safari,Opera...)를 통해 인터넷망 기반에서 특정 웹사이트에 접속하면 해당 웹사이트를 제공하는 서버컴퓨터내의 웹서버를 통해 제공되는 HTML 페이지 나 HTML결과물을 웹 브라우저가 수신,해석(Interpreting)하여
사람이 알아볼수 있게 Display해주고 주로 텍스트 및 그림 형태로 특정정보들을 제공하거나 관리해주는 서비스입니다.
대표적으로 홈페이지,블로깅,포탈서비스 들을 예로 들수 있습니다.

나.(웹)메일 서비스
-사용자 브라우저를 통해 인터넷 망 기반에서 특정 메일서비스를 제공하는 웹사이트 서버 컴퓨터내의  메일서버를 통해 메일 수발신정보를 HTML 페이지나HTML결과물 형태로 브라우저에 전송 상기 웹사이트 서비스와 같이 제공되는 서비스입니다.

다.인터넷 쇼핑몰 및 기업용 웹기반 정보관리시스템
-요즘의 인터넷(웹) 쇼핑몰은 오프라인 매장을 위협하고 있을정도로 대중화가 되었고 현재는 SNS기반 소셜 쇼핑몰로 옮겨갈정도로 인터넷 기반 쇼핑몰은 가장 보편화된 인터넷 기반 서비스중 하나일것입니다.
-회사에 출근해서 사용하는 그룹웨어,ERP,CRM,생산공정관리,제조자동화솔루션,병원시스템,은행인터넷뱅킹등 현대적인 기업용 시스템은 개발,운영,배포의 편리성때문에 대부분 웹기반으로 구축되어 서비스되어지고 있습니다. 현재는 작은 해상도로 인해 모바일은 해당 시스템을 옆에서 지원하고 있는 형국입니다.

라.실시간채팅,음성화상통화 서비스
-최신 웹기술중에 HTML5 Websocket 이란 기술과 WebRTC란 기술이 있습니다.
-이러한 기술들은 인터넷망을 통해 별도의 플러그인(ActiveX) 설치 없이 실시간 문자기반 메시징(채팅),음성(화상)서비스를 제공할수 있습니다.

과거의 웹은 기껏해야 (웹)서버에서 제공되는 웹사이트를 통해  사용자가 요청한 HTML 페이지를 전달해주는 정도였지만 현대적인 웹은 개발기술(HTML5)과 통신기술의 발달과 표준화로 인해 단순히 텍스트와 이미지만 제공되는 서비스가 아닌 실시간 쌍방향 음성,화상,메시지(채팅),게임,대용량데이터처리까지 모든 것이 가능해졌다고 해도 무리는 아닐듯합니다.
이와 같이 웹은 어느 순간 개발세상의 중심이 되었으며 웹 기반 서비스들은 인터넷 통신망을 통해 다양한 형태로 현재도 개발 서비스 되어지고 있습니다.

웹을 구성하는 실제 3대 기술요소는 아래와 같습니다.

1.4.1 HTTP(HyperText Transfer Protocol)

이전강에서도 말씀드렸듯이 http란 통신규칙(규약)(Protocol)입니다.

HTTP를 직관적을 풀어보면 HyperText를 전송할 때 지켜야하는 통신규칙이란 뜻이며 여기서 HyperText란 HTML이라고 하는 인터넷망에 존재하는 자원을 말합니다.
HTTP란 인터넷 통신망에서 HTML이란 자원(리소스)를 요청하고 응답할 때 사용되는  통신규칙(규약)(Protocol)입니다.

실제 웹 기반 서비스 관점의 시나리오로 리얼하게 표현 하면  사용자 컴퓨터 내에 설치된 웹 브라우저란 클라이언트 S/W에  웹사이트의 주소와 웹 페이지를 요청하면  해당 주소와 웹 페이지 리소스(URI)를 기반으로 관련 서비스를 제공하는 서버 컴퓨터를 찾아 서버컴퓨터 내에 설치되어있는 웹 서버 S/W와 그 안에 존재하는 다양한 웹 사이트 내에 있는 웹 페이지(html을 만들어내는 각종 웹 페이지)를 요청하고 그 응답의 결과물인 HTML결과물을 인터넷 망을 통해 응답 할 때 준수 해야 하는 통신규칙(규약)을 말합니다.

용어정리)프로토콜(Protocol)의 간단한 예시
컴퓨터란? 향후 본 서적에서 사용되는 컴퓨터란 용어는 단순 PC가 아닌 PC,노트북,태블릿,스마트폰,TV등 컴퓨터 운영체제가 설치된 모든 컴퓨터 관련 기기를 통칭하는 말로 사용 되는 것으로 여러분과 약속하고 사용하겠습니다.  이런 식으로 상호간 약속을 통해 의미를 방법을 규정 하는 것을  프로토콜이라고 합니다.

지금부터는 웹 브라우저를 통해 HTTP가 웹 서버의 웹 사이트 내 HTML문서를  요청하고 그 응답의 결과물인 HTML을 전달 받을 때 사용되는 HTTP의  주요 통신규칙 내용들에는 어떤 것들이 있는 지 HTTP 통신규칙의 내부 스펙 을 간략히 들여다 보겠습니다.

가.HTTP Request(요청) 메시지
-웹 브라우저의 URL을 통해  어느 웹사이트(도메인)의 어느 경로아래 에 있는 웹 페이지를 요청하는지를 나타내는 행위입니다.
-Request(요청) 세부 스펙은 아래와 같습니다.

Request-Line
*(( general-header | request-header | entity-header ) CRLF)
CRLF
[ message-body ]

1) URL정보 및 요청방식(Method),HTTP버전정보제공
-Request-Line
요청Method방식(8가지) +요청URI + HTTP버전
ㄴSample : GET /index.html HTTP/1.1

2) 헤더정보 제공
-*(( general-header | request-header | entity-header ) CRLF)
-헤더에는 요청하는 클라이언트 PC/브라우저의 정보를 가지고 있으며 대표적으로는 사용자의 IP주소/브라우저종류 및 버전,사용자언어환경,쿠키정보
등의 다양한 요청자 환경에 대한 정보를 가지고 있다.
-일반적으로 헤더영역에 존재하는 데이터는 보안이 취약합니다.

3) 줄바꿈
-CRLF
CR은 carriage return(13)이고 LF는 linefeed(10) 한마디로 줄바꿔서 새로운 라인을 시작한다는 명령어이죠.

4) 메시지 본문
-[ message-body ]
-http본문영역이라고 표현하며 주로 실제 사용자가 입력한 데이터를 저장하는 영역입니다.
-사용자가 입력폼에 기입한 각종 메시징 데이터(웹서버로 전송하는 주요 사용자 데이터)인데 상기 Request Line의 Method방식중
Post(입력폼 데이터 신규등록) 나 Put(입력폼 데이터 수정)방식으로 서버로 데이터를 전달할때 보안이 강화된 방식으로 message-body
영역에 사용자의 주요 데이터를 넣어 서버로 전송합니다.

나.HTTP Response(응답)  메시지
-응답 메시지는 HTTP Request를 통해 요청된 정보에 대해 웹서버가 요청한 브라우저에 보내는 응답형식 및 응답결과를 처리하는 기능과
그 세부 스펙을 나타냅니다.

Status-Line
*(( general-header | response-header | entity-header ) CRLF)
CRLF
[ message-body ]

1) 응답 상태정보 표시 라인
-Status-Line
-HTTP버전정보 와 세자리 숫자값(200) 과 상태코드 값을 통해 응답결과 및 상태정보를 나타냅니다.
-EX) HTTP/1.1 200 OK
-1**: 정보성  2**:성공 3**:리다이렉트 4**:클라이언트오류 5**:서버오류 등의 종류별 의미를 나타냄

2) 응답 헤더정보 제공
-각종 서버 및 웹사이트 관련 환경정보를 제공한다.

3) 줄바꿈
-CRLF
CR은 carriage return(13)이고 LF는 linefeed(10) 한마디로 줄바꿔서 새로운 라인을 시작한다는 명령어이죠.

4) 메시지 본문
-[ message-body ]
-http본문영역이라고 표현하며 주로 실제 서버에서 사용자에게 전달되는 HTML 소스 및 소스에 포함된 데이터를 저장하는 영역입니다.

브라우저를 오픈 하고 F12키를 누르면 브라우저의 개발자도구가 활성화되며 네트워크란 탭을 활성화 시킨 상태에서 브라우저 주소 입력란에 NAVER.COM 을 호출해보면 아래그림과 같이 네이버  웹사이트를 웹 브라우저를 통해 HTTP를 통해 요청하고 응답 받는 과정을 브라우저의 개발자 도구를 통해 간략히 확인 해 볼수 있습니다.

HTTP는 웹사이트 개발에 있어 기본적인 개념 과 내용만 아셔도 크게 처음 개발하는 데는 문제가 없지만 좀더 고급 프로그램밍 영역으로 들어갈수록 그 개념파악과 세부 스펙에 대한 공부가 필요하게 됩니다.  
초급 개발자 딱지를 띠고 실제 HTTP 핸들링 프로그램 개발이 필요할 정도 되었을 때 다시 세부적으로 들여다 보시고 보다 깊이 있게 공부 하시것 을 권장 드립니다.

참조링크: https://blog.outsider.ne.kr/888

1.4.2 URI(Uniform Resource Identifier) 

웹상에 존재하는 어떤 자원에 접근하기 위한 유일한 주소를 말하며 다른 자원의 주소들과 구분되는 유일한 주소 식별자를 말합니다.
자원(Resource)에 종류에는 웹페이지, 이미지,음악파일,동영상파일등 웹상에 존재하는 다양한 종류의 리소스를 통칭해 말합니다.
URI는 웹상에 존재하는 각종 자원들이 어디에 위치하고 있는지에 대해 기술하고 유일성을 보장받는 주소 식별 체계로 브라우저에서는 주소입력란을 통해 URL(Uniform Resource Locator)이란 이름으로 사용됩니다.  

일반적으로 사용자들은 웹브라우저에 웹사이트 주소 도메인 또는 도메인과 정확한 웹페이지를 입력을 통해 특정 웹사이트에 서비스를 요청합니다.
사용자가 직접 URI정보를 지정할수 있게 제공되는 방식이 웹브라우저의 주소입력란이며 이 주소입력란에 표기되는 정보를 URL이라고 합니다.

웹 브라우저는 URL을 통해 사용자가 지정한 자원의 위치정보를 이용 URI(자원식별자) 정보를 추출하여 웹 상에서 HTTP통신규약을 통해 자원을 찾습니다.

1.4.3 HTML(HyperText Markup Language)

아래와 같은 그림이 HTML의 실체입니다.
몬가 복잡해 보이는 코드덩어리들이군요.

-웹 브라우저의 요청에 의해 웹 서버는 해당 웹사이트 내에 웹 페이지를 실행하며 그 결과물이 HTML코드로 웹 브라우저에 전달되고 그 코드들은 직접 사람이 보면 알아볼 수 없기에 브라우저가 코드를 해석해서(인터프리팅,번역) 사람이 보기 편한 레이아웃에 이해할 수 있는 글자,이미지등만 해석해 보여줍니다.
이 과정에서 알 수 있듯이 웹 브라우저 의 역할은 웹 상의 존재하는 웹 페이지 리소스를 호출하고 그 결과물 인 HTML을 받아 해석하여 사람들이 이해할 수 있는 구조로 표현해주는 역할을 제공합니다.
웹사이트가 오픈 된 브라우저에 오른쪽 마우스를 찍고 소스보기 메뉴를 클릭하시면 현재 보고 계시는 웹 페이지의 실제 HTML 소스를 확인 하실 수 있습니다.

다음은 웹사이트 서비스 관련 주요 주체들과 그 역할에 대해 정리하였습니다.

A.웹 브라우져의 역할
-주소입력란(URL)을 통해 웹사이트 웹 페이지를 요청하고 웹서버,웹사이트에서 제공된 HTML 코드를 사람들이 이해할수 있는 구조로 HTML를 해석해주는 일종의 HTML번역기로 HTML코드로 표현된 언어를 사람이 인지할수 있는형식(텍스트+이미지=컨텐츠)으로 보여주는 역할을 제공합니다.

B.웹 서버/웹사이트의 역할
-웹서버에 존재하는 각종 웹 사이트내에는 다양한 종류와 형식으로  개발된 웹 페이지들이
(.html .asp .php .jsp .aspx .php....etc) 존재하며 해당 웹페이지를  호출하면 웹서버는 그 결과물로 HTML소스를 브라우저에게 제공합니다.
웹 서버와 웹사이트는 일종의 개발자가 만들어낸  HTML  소스 생산공장 또는 저장소인 셈입니다.

C.Internet 및 HTTP의 역할
- 브라우저에서 도메인 주소 및 웹 페이지를 을 입력하면 해당 웹 페이지를 찾고 그 요청을 웹서버에 전달하고 그 결과물을 받아 웹 브라우저에 전달하는 역할 및 기능을 담당하며 이런 행위를 할때 HTTP란 통신규약 기반에서 작업을 진행합니다.

이제부터는 HTML 과 HTML 주요 Tag에 대해 알아보도록 하겠습니다.

가.HTML
HTML 은 HyperText Markup Language 로 HyperText란것을 표기(Markup)하는 프로그래밍 언어(Language)입니다.

하이퍼 텍스트란 연결이 가능한 텍스트란 뜻으로 HTML은 연결 가능한 텍스트 방식인 링크를 통해 웹 상의 모든 리소스를 표기할 수 있는 언어란 뜻입니다. 
HTML을 통해 웹 상의 모든 리소스들은 연결이 가능하고 연결을 통해 무한한 정보를 웹을 통해 제공할 수 있다는 뜻이기도 합니다.
웹이라는 것은 각종 웹 리소스들이 하이퍼 텍스트로 묶인 집합이라고 볼 수 있습니다.

하이퍼 텍스트에서 중요한 키워드는 html문서간 연결(링크)를 통해 관련정보가 지속적으로 연결되어 표현되며 자유롭게 이동할수 있다는것입니다.
하이퍼 텍스트(HTML)로 표기할수있는 형태는 과거에는 텍스트,이미지정도에 국한되었지만 현대는 영상/음성/2D/3D/애니메이션 효과등 다양한 형태들까지 표현이 가능해졌습니다.

하이퍼 텍스트는 어떻게 표시되고 관리될까요?
하이퍼 텍스트의 표기는 다양한 종류의 HTML 태그라는 다양한 요소를 통해 표기되고 이러한 태그 요소들의 집합을 하나의 문서로 형태로 관리합니다.
이러한 문서를 HTML 문서(Document)라 하며 HTML문서는 정해진 국제 표준에 의해 문서형식 및 표준을 준수해서 작성되어야 웹 브라우저에 의해 정상적인 해석이 가능해집니다. 

HTML의 역사를 잠시 돌아보면 인터넷 업계에서는 1997년부터 W3C란 HTML 국제 표준화 기구를 통해 HTML의 표준화를 시도하였지만 브라우저 제작 업체들의 동참을 이끌어 내지 못하여 HTML의 표준화를 이끌어내지 못하여 브라우저 별로 다소 상이한 HTML 버전이 존재하다가 2008년 W3C의 HTML5 초안 발표를 시작으로 현재에는 HTML5 버전으로 HTML의 표준화가 이루어지어 표준화된 HTML5 기반에서 각종 브라우저들이 현재는 개발되어지고 HTML이 사용 되어지고 있습니다.

나.HTML 컨텐츠의 유형
-하나의 HTML문서내에서는 태그를 통해 다양한 종류의 컨텐츠를 표현할수 있으며 아래표는 HTML로 표현가능한 컨텐츠의 종류와 관련 태그에 대한 정보입니다.

다. HTML 문서의 구성요소
HTML문서는 제목,본문,링크,목록,컨트롤등의 다양한 종류의 요소(Element)란 것을 통해 기본적으로 구성되며 이러한 요소들은 태그(Tag)를 통해 표현됩니다.

태그는 HTML문서상에서 해당 요소의 시작 과 끝을 명확히 구분해주기 위해 시작태그 “<” 와 종료태그 “>” 를 통해 일반적으로 표현되며 시작 태그 내에는 해당 요소의 특성(attribute)을 표시하기 위해  특성명(attribute name) =특성 값(attribute value)의 쌍 형태로  여러 가지의 특성을 정의할수 있습니다.
다음은 화면 내 영역분할 위해 사용되는 요소인 Div 요소를 표현하는 태그의 형식 과 특성을 보여줍니다.

요소내에서 사용되는 특성(attribute)는 해당 요소의 부수적인 특성을 특성명=값 형태로 표기하여 요소의 특성을 추가적으로 표현할수 있으며 요소별로 요소의 용도에 맞는 다양한 특성이 제공됩니다.
일반적으로 하나의 요소를 표현하는 태그는 시작 과 종료태그가 쌍으로 존재하지만<meta>,<br>,<img> 태그와 같이 홀로 사용되는 홀태그도 존재합니다.

이번에는 HTML 문서를 직접 하나 만들어 보면서 HTML 문서의 구조에 대해 좀더 접근해보겠습니다.
전문 개발툴을 설치하고 사용하기전까지 어느 PC에서나 설치되어있는 메모장이란 편집 툴을 이용 HTML문서를 만들고 브라우저를 통해 확인해보도록 하겠습니다.
시작>프로그램>보조프로그램>메모장을 클릭 여시고 아래 코드들을 타이핑 하신 후 파일메뉴의 저장메뉴를 클릭하여  hello.html 이라고 파일명을 특정 위치에 저장합니다.

모두 저장되었으면 파일탐색기로 저장위치로 이동 후 저장된 hello.html 파일 존재여부 확인 후 hello.html파일을 더블 클릭 해봅니다.
웹 브라우저가 뜨면서 브라우저 내용 화면에  hello~ mixedcode! 텍스트가 보여집니다.
웹사이트의 실체인 웹 페이지의 기본 문서형식인 .html페이지를 직접 만들고 그 안 에 html 코딩을 통해 로컬PC환경에서 브라우저를 통해 개발된 .HTML문서의  컨텐츠를 확인해보았습니다.

브라우저의 오른쪽 마우스 클릭> 소스보기를 클릭하시면 여러분이 직접 코딩 한 소스를 확인할수 있으며 코딩 내용 중  HTML Tag코드는 보이지 않고 전달코자 하는 컨텐츠 인  hello~ mixedcode! 만 보여진다는 것을 재 확인할 수 있습니다.

즉 웹브라우저가 .html페이지내의  html을 해석(인터프리팅)하여 코더의 의도대로 내용을 보여준 것입니다.

라. 정적 웹 페이지 와 동적 웹 페이지 개념잡기
실제 웹사이트를 구성하는 주요 구성요소는 웹 페이지란 것입니다.
일반적으로는 웹 페이지의 묶음이 하나의 웹사이트로 구성됩니다.

웹 페이지는 html을 표현하고 html이 저장되어있으며 프로그램밍을 통해 html을 만들수도 있는 문서의 한 종류라고 이해하시면 좋을듯합니다. 오피스 문서는 텍스트와 이미지등을 이용해 특정정보를
전달하기 위해 문서를 작성하며 그 종류에는 워드문서,엑셀문서,PPT문서,HWP문서등 용도는 같지만 다양한 포맷이 존재 하는 것처럼 웹 페이지도 동일합니다.

HTML을 표현하고 HTML을 저장하거나 만들수 수 있는 웹 페이지 종류 또한 다양합니다.
웹 페이지의 기본파일 형식은 .htm 또는 .html  확장자 형식의 문서파일로  이문서안에는 html 코드소스 및 자바스크립트나,스타일시트 관련 웹 페이지를 표현하는데 필요한 리소스 코드도 포함되어있습니다.
이외에 개발 및 기술환경 (개발플랫폼)에 따라 다양한 웹 페이지 파일형식이 존재합니다.

자바언어 기반의 .jsp PHP 기반의 .php  Microsoft 기반 웹 기술 환경에서는  .asp , .aspx 등 다양한 웹 페이지 종류가 있지만 이 모든 웹 페이지의 목적은 브라우저에게 전달할 html 소스를 관리하는 일을 합니다.

주로 웹 페이지는 html 소스를 변경 없이 원본형태로 가지고 있다가 전달만하거나 프로그래밍 기술을 통해 동적으로 html소스를 만들거나 변경하는 일을 합니다.  


웹 페이지는 성격에 따라 주로 정적 웹 페이지 문서와 동적 웹 페이지 문서 두 가지 종류로 나뉩니다.
정적 웹 페이지 문서는 html소스가 문서 내에 이미 작성되어있고 작성원본의 변경 없이 바로 사용자 브라우저에 제공되는 형태의 웹 페이지를 말합니다.

일반적으로 방금 전에 코딩 한 .html 파일형식의 문서를 정적html 문서라고 하며 경우에 따라 .jsp확장자를 가졌어도 파일 내 에 html 소스의 변경이 없거나 html의 추가 및 변조가 없고 그냥 원본 html소스가  브라우저에 전달된다면 이는 정적 웹 페이지 문서라고 할 수 있습니다.

가끔은 프로젝트의 특수성에 의해 정적 웹 페이지 문서인데도 확장자 를 .html문서로 안 쓰고 해당 개발환경에 특화된 파일 확장자(ex: .jsp, .aspx)로 통일시켜 사용하는 경우도 많습니다.
동적 웹 페이지 문서는 보통은 개발언어 및 환경(개발플랫폼,J2EE,.NET,PHP...)에 따라 파일 확장자는 달라지지만(.jsp , .php,.asp, .aspx) 해당 페이지 내에서 웹 프로그래밍이나 DB프로그래밍 기술을 통해 원본 HTML에 신규 HTML컨텐츠를 생성 추가하거나 기존 HTML 컨텐츠의 변경/삭제하는 웹 페이지를 말합니다. 

정적과 동적의 차이를 이해되시나요?
웹 페이지 문서의 종류나 확장자는 중요치 않습니다. 해당 페이지내의 HTML소스가 변경(추가/변경/삭제)되었느냐 원본 그대로냐의 차이로 구분합니다.

마. HTML문서 구조의 이해
좀더 구체적이고 완전한 HTML문서 구조를 만들어 보도록 하겠습니다.
HTML Sample1.html 문서를 참고해주십시요.

1)HTML문서 버전타입 정의
- 해당 HTML문서가 어떤 HTML버전을 기준으로 만들어진 문서인지를 지정합니다.
- 상기 예제는 HTML문서가 HTML5 버전 형식을 따르는 문서양식이라고 선언한것입니다.
- HTML5 이전 버전의 HTML 유형에 따라 DocType의 값은 변경 될 수 도 있지만 향후 신규로 개발하는 웹사이트의 웹 페이지 문서 DocType은 HTML5 표준 기반에서 작성 하실 것을 권장 드립니다.
<HTML 버전 정보>

2) 메타태그 정보 정의영역
-메타태그란 HTML 문서를 설명하기 위한 태그라고 말하며 HTML이 다양한 정보 및 컨텐츠를 각종 HTML요소를 이용해 표현하는 것에 초점이 맞추어져 있다면 HTML 메타 태그는 HTML문서 자체에 대한 각종 설명을 데이터 형식으로 표시하는 태그이며 이정보는 브라우저 또는 검색엔진등 다양한 주체들에 의해 사용 되어집니다.
-html head태그 사이에서 정의 되어야 합니다
<HTML 주요 메타태그 소개 >

3) 스타일시트 정의영역
-해당 웹 페이지의 레이아웃,각종 스타일(색상,폰트,배경이미지,애니메이션..)관련정보를 직접 정의하거나 관련정보를 스타일시트 파일문서(.css)로 작성하여 저장하여 그위치를 참조하여 해당 스타일이 현재 웹페이지 적용될수 있도록 정의하는 영역입니다.
-스타일 정보는 별도파일로(.css)로 분리할수도 있지만 웹페이지내 해당위치에 직접정의도 가능합니다.

4) 본문 정의영역
-실제 사용자에게 보여질 내용인 컨텐츠를 html태그로 표현하는 영역입니다.
-메뉴,제공 컨텐츠 내용,바닥글등입니다.

5) 스크립트정의영역
-해당 웹 페이지의 태그에 대한 기능을 제어하기 위한 스크립트 기능을 정의하거나 정의된 내용을 스크립트 파일(~.js)로 저장하고 분리하여 참조시키는 영역입니다.

HTML에 대해서는 이정도로 마무리하고 추후 실제 HTML을 구성하고 프로그래밍을 시작하는 시점에서
HTML TAG 및 사용법에 대해서는 더 자세히 알아 보도록 하겠습니다.

다음강에서 뵙겠습니다.

감사합니다.

------------------------------------------------------

대표이미지소개 : 홍콩과학기술대학에서 바라본 홍콩 앞바다 사진
촬영스토리 : 바람이 매우 부는 날  모닝 물장구를 가는 길에서 홍콩 앞바다 한컷!!!!!
출처 : 홍콩 과기대 머신러닝 박사과정 홍원희 학생의 페이스북 

https://www.facebook.com/woneui.hong