PowerPoint 프레젠테이션

Transcription

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

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

3 1.1 인터넷의역사 인터넷의발전과정 웹의발전

4 인터넷의발전과정 인터넷용어의유래 : 인터 - 네트워크 (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 과연결

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

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

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

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

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

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

11 마크업언어및 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>

12 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) 언어가포함.

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

14 HTML 의발전역사

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

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

17 (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), 애니메이션, 사용자인터페이스에관련된속성

18 (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) 등

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

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

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

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

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

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

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

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

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

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

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

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