1장. 인터넷과 웹환경의 발전

HTML5 웹 프로그래밍 입문. 1장. 인터넷과 웹환경의 발전.

목차 1.1 인터넷의 역사 1.2 HTML의 발전 1.3 인터넷의 기본 개념 1.4 웹브라우저의 종류 소스코드 실행 사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch14/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다..

1.1 인터넷의 역사 1.1.1 인터넷의 발전과정 1.1.2 웹의 발전.

인터넷의 발전과정 인터넷 용어의 유래 : 인터-네트워크(inter-network). ■ ARPANET의 탄생  미국 국방성에서 1969년 미국 내 4개 대학 연결  데이터 전송에 IP(Internet Protocol) 전송 규약 사용. ■ TCP/IP 프로토콜의 발전  이더넷 방식의 LAN기술과 TCP/IP(Transmission Control. Protocol/Internet Protocol) 프로토콜의 통신 기술 발전  TCP/IP는 1982년 인터넷의 표준 프로토콜로 제정. ■ NSFNET의 구축  1986년 미국과학재단(NSF)에서 5곳의 슈퍼컴퓨터를 TCP/IP 프로. 토콜로 연결하여 학술정보망인 NSFNET을 구축  슈퍼컴퓨터 간에는 케이블망으로 연결하여 백본역할, 인근 지역 의 대학과 회사의 LAN과 연결.

■ 웹과 브라우저의 출현  1989년 유럽입자물리연구소(CERN)의 팀 버너스-리  웹(WWW, World Wide Web)을 처음 제안하고  1994년 웹컨소시엄(W3C, WWW Consortium) 결성.  1993년 GUI 방식의 모자익(Mosaic) 웹브라우저 개발,. 1994년 상업용 웹브라우저인 넷스케이프 내비게이터 보급.

웹의 발전 ■ 웹(Web)  WWW(World Wide Web)혹은 W3  스위스의 유럽입자물리연구센터(CERN)에서 개발. ■ 본래 목적  유럽 각지에 있는 CERN 소속 연구원들이 다양한 유형의 정보 공유  이전에 선보였던 하이퍼텍스트란 개념을 채택  연관된 여러 데이터를 링크로 연결하여 사용자가 필요한 정보를 탐 색할 수 있게 도와주는 정보탐색 구조.

웹(WWW)의 탄생 ■ ‘World-wide Distributed Hypertext’ 프로젝트  1989년 팀 버너스-리(Tim Berners-Lee) 제안  인터넷 상 분산형 멀티미디어 하이퍼텍스트 시스템 구축  서로 다른 기종의 컴퓨터에서 서로 다른 유형의 파일이나 데이터를 호환성 있게 교환하는 것이 목적. ■ 웹은 인터넷 서비스 중의 한 가지 방법  특징: 하이퍼링크, 그래픽 환경의 GUI, 멀티미디어 처리  하이퍼링크 개념을 기반으로 몇 가지 표준 기술을 개발  HTML(HyperText Markup Language) : 인터넷 상의 정보표현 언어  HTTP(HyperText Transfer Protocol) 프로토콜 : 웹페이지 정보 전송  URL(Uniform Resource Locator) : 표준 주소표기 방식.

웹브라우저의 보급 ■ 웹브라우저란  컴퓨터 화면에서 웹 정보를 볼 수 있도록 만든 프로그램  모자익(Mosaic) 웹브라우저  1993년 미국 일리노이 대학 마크 안드레센과 에릭 비나 개발.  상업용 브라우저  넷스케이프 내비게이터, 인터넷 익스플로러 등  웹브라우저의 편리한 사용성으로 인터넷 사용자가 폭발적으로 증가 => 웹을 대중화하는데 커다란 기여.

WWW 컨소시엄 결성 ■ World Wide Web Consortium(웹컨소시엄, W3C)  1994년 10월 팀 버너스리를 중심으로 결성  웹 관련 표준안을 제정하고 이를 확산하는 목적. ■ WWW 운영  미국 MIT 대학교, 유럽 INRIA 연구소, 일본 게이오 대학에 메인 호. 스트 서버 설치  각 지역에 지역 사무국을 운영.  우리나라는 한국전자통신연구원에서 W3C 대한민국 사무국 운영.  전 세계의 300여 개 단체가 회원으로 소속  웹 관련된 기술의 발전에 대해 논의하고 기술 표준안을 공동 개발  W3C 표준은 국제공인표준과 동등하게 중요한 기준으로 인정  웹 개발자를 위한 정보 공유, 다양한 웹 소프트웨어의 개발 및 교육  매년 봄에 정기적인 WWW 컨퍼런스 개최, 다양한 포럼 운영.

1.2 HTML의 발전 1.2.1 마크업 언어 및 HTML 언어의 역사 1.2.2 HTML5 언어의 특징.

마크업 언어 및 HTML 언어의 역사 ■ 마크업 언어(Markup Language)  인쇄 교정지의 ‘마크-업(Mark-up)’에서 유래  문서의 속성을 설정하기 위한 마크업을 태그의 형태로 표시  대표적인 마크업 언어 : SGML, HTML, XML 등  HTML 언어는 SGML 표준에 따라 정의  일반 텍스트 형식의 파일로 저장되며 확장자는 *.html 또는 *.htm. <li><font size="12pt">마크업(Mark-Up)의 유래 :</font> <br><font size="10pt">활자의 식자를 위한 수기 형태의 주석</font></li> <li><font size="12pt">마크업 언어 :</font>. <br><font size="10pt">문서의 구조와 내용에 추가적인 의미를 부여하는 마크업 규칙을 규정하는 언어</font></li>.

■ SGML(Standard Generalized Markup Language)  1986년 국제표준기구인 ISO에서 개발  다양한 형식의 전자문서들의 구조와 내용을 기술하는 국제표준  시스템 및 응용에 독립적으로 문서를 호환하기 위한 목적  전자도서, 전자상거래 문서 등 다양한 문서 형식을 정의하는데 사용  HTML은 SGML로 정의된 문서 형식으로 주로 웹문서 작성에 사용. ■ HTML(HyperText Markup Language)  1994년 HTML 버전 2.0, 1997년 HTML 4.0 버전  배우기 쉽고 사용하기 편리하여 인터넷의 대중화에 매우 큰 기여  반면에 태그가 제한적이고 정교한 페이지를 표현하기에는 부족  HTML 4.0에서는 동적 HTML (Dynamic HTML) 문서 표현  스타일시트를 설정하는 CSS 기능과 상호작용을 코드로 표현하기 위 한 자바스크립트(Javascript) 언어가 포함..

■ XML(eXtensible Markup Language) 및 XHTML  문서나 자료의 교환이 필요한 경우 새로운 언어가 필요  SGML을 간소화한 XML이 1998년 제정  XML 언어로 원하는 문서 형식을 정의하여 다양한 정보를 표현/교환.  HTML 언어도 XML에 기반한 XHTML로 발전  XHTML 1.0은 XML로 문서형식만 정의, 태그는 그 전의 HTML과 동일. ■ HTML5  웹 하이퍼텍스트 워킹그룹(WHATWG)  모질라, 애플, 오페라 등 웹브라우저 개발사 주도로 2006년 결성  W3C도 WHATWG과 협력하여 2007년 HTML5 워킹그룹 신설.  2014년 10월 28일 최종 표준안 확정.

■ HTML의 발전 역사.

HTML5 언어의 특징 ■ HTML 4.0 이후 요구사항  다양한 인터페이스, 다양한 형식의 미디어 파일, 비동기 처리  웹 표준 기술을 사용하자는 시도  웹 애플리케이션 개발에 XML, CSS, 자바스크립트 등 이용. ■ HTML5의 방향  마크업에 보다 의미를 부여, 스타일은 분리하도록 CSS3 활용  플러그인 대신 웹 표준을 적용하도록 SVG, MathML 지원.  인터랙션 개발을 위해 자바스크립트를 지원  웹 애플리케이션의 개발을 위하여 다양한 API를 제공  특히 위치관련 및 오프라인 등 모바일 환경까지 고려한 API 제공.

(1) 강화된 마크업 요소 ■ 의미를 부여할 수 있는 구조적 마크업 요소. [2장에서 설명].  페이지 단위의 문서 구조를 표현. <header> <nav> <article> <section> <section> <footer>. ■ 다양하고 편리한 웹 폼(WebForm) 입력 기능 [6장 참조]  편리한 사용자 인터페이스 개발을 위해 Form 기능 대폭 개선  <input> 요소에 date, number, color, file 등 각종 type 속성 추가. ■ 웹 미디어 기능의 강화 [3장, 11장 참조]  멀티미디어 및 그래픽스 관련 기능의 추가  <video> 요소와 <audio> 요소.  <canvas> 요소  SVG(Scalable Vector Graphics), MathML. <asi de>.

(2) CSS3의 완전 지원 [4~5장] ■ 스타일시트(Stylesheet)  웹 문서의 외형 스타일을 지정하는 언어  HTML 문서에는 일반적으로 CSS(Cascading Style Sheet)가 사용  1996 CSS1, 1998 CSS2, 2005년 이후 CSS3는 모듈별로 개발 중. ■ HTML5에서는 CSS1, CSS2, CSS3까지 완전히 지원  기존 CSS는 주로 텍스트, 배경 및 색상, 목록, 박스모델 등 속성  CSS3에는 더욱 다양한 스타일 지정 기능을 포함.  예제 화면  박스의 모서리 처리, 그림자 효과, 다단(multi-column) 지정, 2D/3D 기하변환, 텍스트의 그림자 등 다양한 효과  이 외에도 장면 변환(transition), 애니메이션, 사용자 인터페이스에 관련된 속성.

(3) 다양한 API 지원[11~13장] ■ 웹 애플리케이션 개발에 많은 도움을 줄 수 있는 다양한. API(Application Programming Interface) 제공  자바스크립트로 구현 가능  <video>와 <audio> 요소를 제어하는 API  <canvas> 요소에 그림을 그리는 API 등. ■ 별도의 사양으로 분리된 API  웹 소켓, 웹 워커, 웹 스토리지, 로컬 데이터베이스, 웹 메세징, 위. 치정보 등의 API도 지원 : 이들 모두가 HTML5의 기능  자바스크립트로 매우 다양하고 강력한 기능의 웹애플리케이션 구 현 가능해짐 (자바스크립트는 8~10장에서 설명)  드래그앤 드롭(Drag & Drop), 위치정보(Geo-Location), 웹 스토리지 (Web Storage), 웹 소켓(Web Sockets), 파일(File) 등.

(4) 모바일 웹 환경 고려 [12~14장 ] ■ 모바일 환경  일찍부터 HTML5를 지원하는 웹브라우저를 탑재  웹브라우저마다 구현 상황이 서로 다른 데스크탑 환경보다는 모바일 환경이 HTML5 어플리케이션을 개발하기에 더 나은 입장. ■ 모바일 환경을 위한 HTML5의 특별한 기능  위치정보 API  위치정보는 모바일 애플리케이션 개발에 최적 활용  오프라인 어플리케이션 API  모바일 환경에서 접속이 끊기거나 트래픽 최적화에 긴요하게 활용  오프라인이 될 경우에 로컬 스토리지, 웹 데이터베이스, 어플리케이 션 캐시 등이 유용하게 활용  새로운 유형의 다양한 입력 폼 지원  모바일 애플리케이션의 사용자 인터페이스 개발 및 사용이 편리.

1.3 인터넷의 기본 개념 1.3.1 클라이언트-서버 모델 1.3.2 인터넷의 전송방식 1.3.3 주소체계.

클라이언트-서버 모델 ■ 클라이언트-서버 모델(Client-Server Model)을 기반  서버 : 제공하는 서비스에 적합한 정보들을. 보관하고 이를 외부에 공개해주는 컴퓨터  클라이언트 : 서버에서 제공하는 정보를 받기 위해 사용자가 작동시키는 컴퓨터  여러 가지 정보들을 서버에서 관리하고,. 일반 사용자는 자신의 컴퓨터를 이용하여 서버에 접속하여 여러 가지 정보들을 이용. ■ 클라이언트-서버에 필요한 프로그램  서버 : 여러가지 서버 역할을 수행하는 서버 프로그램이 필요  웹을 이용하려면 아파치(Apache) 또는 IIS라는 웹 서버 프로그램이  클라이언트 : 서비스를 이용하기 위한 클라이언트 프로그램  크롬(chrome)이나 익스플로러(Explorer)와 같은 웹브라우저.

인터넷의 전송방식 ■ TCP/IP 통신 프로토콜  인터넷은 운영체제나 데이터 형식이 다양한 종류의 컴퓨터 연결  모든 컴퓨터에 IP 주소를 할당하고, 데이터를 주고받기 위하여 필요  통신 프로토콜 : 컴퓨터간의 통신 규약  컴퓨터 사이에 정보를 전달하기 위하여 필요한 규칙 및 약속의 집합  TCP(Transmission Control Protocol)  데이터의 흐름을 제어하고 데이터가 정확한지 확인하는 역할  데이터를 여러 개의 작은 조각으로 나누어 패킷(Packet)이란 정보단위 를 생성하고 패킷이 제대로 전송되는지 확인  IP(Internet Protocol)  데이터를 이동시킬 목적지를 지정하는 역할.

■ IP(Internet Protocol) 주소  패킷을 어떻게 목적지까지 보낼 것인가에 대한 전송 프로토콜  우체국에서 편지를 보내기 위한 우편규칙과도 유사  IP 주소(IP Address) : 정보 전송을 위한 주소체계로 숫자로 표현  인터넷에 접속되어 있는 모든 호스트 컴퓨터들은 고유한 IP 주소  IPv4 주소 : 4개의 바이트(Byte)로 구성  222.122.84.200와 같이 ‘.’으로 구분하여 표현  254×254×254×254, 약 42억개의 주소 사용 가능  IPv6 : 6바이트 주소체계  사물인터넷 시대에 주변의 모든 기기에 인터넷 IP 주소 할당할 필요  2128 개의 충분한 개수의 주소를 사용.

■ HTTP 서비스 프로토콜  TCP/IP 전송 프로토콜  인터넷에 연결된 시스템 사이에 데이터를 송수신하는 통신규약  인터넷 서비스 프로토콜  다양한 인터넷 애플리케이션 서비스를 위한 프로토콜 필요  서버와 클라이언트 컴퓨터 사이에 서비스를 위한 데이터 통신 규약  HTTP, FTP, Telnet, Mailto 등  HTTP(HyperText Transfer Protocol)  웹에서 가장 기본적으로 사용하는 서비스 프로토콜  웹 서버와 웹 브라우저 사이에 하이퍼텍스트 문서를 위한 통신규약.

주소체계 ■ 도메인 이름(Domain Name)  IP 주소는 숫자로 구성되어 있어서 이용/기억하기 불편  도메인 이름 : 쉽게 기억할 수 있도록 IP주소를 문자로 대체  국가별 도메인: “호스트이름.소속기관.단체성격.소속국가”의 4단계  예, www.daum.co.kr의 경우 우리나라(kr)에 있는 다음(daum)이라는 회 사(co)가 보유하고 있는 www라는 이름의 호스트 컴퓨터  일반 도메인 방식: “호스트이름.소속기관.단체성격”의 3단계 형태  예, www.yahoo.com 같이 최상위 도메인이 소속국가가 아닌 단체성격.  도메인 이름 서버(Domain Name Server)  도메인 이름을 IP 주소로 변환  각 호스트 컴퓨터는 하나씩의 IP 주소와 도메인 이름 보유.

1.4 웹브라우저의 종류 1.4.1 웹브라우저의 소개 1.4.2 대표적인 웹브라우저들.

웹브라우저의 소개 ■ 웹브라우저  사용자 쪽의 클라이언트 소프트웨어  웹서버에 있는 하이퍼텍스트정보를 사용자 화면에 보여주는 역할  하이퍼링크의 내비게이션(navigation)을 도와주는 기능도 포함  텍스트와 이미지 뿐만 아니라 멀티미디어 처리 기능까지 포함. ■ 웹은 기술의 발전 속도가 매우 빠른 분야  dynamic HTML, HTML5, CSS, Javascript, DOM, XML, mobile Web 등.  표준안이 정착되기도 전에 새로운 기술이 개발되어 신속히 적용  웹브라우저는 버전에 따라서 제공되는 정보의 종류가 다르다. ■ 웹브라우저의 특징적인 기능  다양한 서비스를 위한 주소 관리 기능이 필요  즐겨찾기, 저장 및 인쇄, 탭 보기, 소스보기, 보안관리 등.

대표적인 웹브라우저들 ■ 웹브라우저 시장 경쟁  1994년 넷스케이프 내비게이터 출시, 웹의 대중화에 큰 기여  1998년부터 당분간 인터넷 익스플로러의 독점체제  2000년대 중반 이후 여러 경쟁 제품이 등장, 치열한 점유율 경쟁  크롬, 인터넷 익스플로러, 파이어폭스, 사파리, 오페라.

■ 인터넷 익스플로러(Internet Explorer; IE)  윈도우 95 운영체제에 기본 제공 이후부터 사용자 급격히 증가  1998년 넷스케이프 몰락이후 가장 널리 사용  2001년 발표된 6.0 버전은 시장점유율이 한때 95% 상회웹표준 호. 환성이 떨어지는 편, 국내의 경우 액티브X 사용 문제점. ■ 구글 크롬(Google Chrome)  2008년 출시, 오픈소스 웹브라우저  간단하면서도 효율적인 사용자 인터페이스 제공  더 나은 속도와 안정성 및 보안성을 갖는 것을 목표로 개발  웹표준을 준수하는 사이트에 대한 호환성이 우수  모바일 안드로이드 환경과의 호환성으로 시장 점유율 선두.

■ 모질라 파이어폭스(Mozilla Firefox)  비영리 단체인 모질라 재단에서 2004년 1.0버전 발표  모질라 재단 내에서 자유 소프트웨어 웹브라우저로 개발  다양한 운영체제에서 실행이 가능, 표준준수율이 매우 높은 편. ■ 애플 사파리(Safari)  2003년 애플이 매킨토시용으로 개발  아이폰, 아이패드 등 애플사 기기에서 동일한 브라우저를 사용. ■ 오페라(Opera)  노르웨이의 오페라 소프트웨어가 1996년부터 출시.  다양한 플랫폼 대상, 작은 용량과 빠른 속도가 가장 큰 특징  모바일용 웹브라우저 시장에서 상당한 주목.