1 장. 인터넷과 웹환경의 발전 HTML5 웹 프로그래밍 입문 ( 교수용 ). 목차 1.1 인터넷의 역사 1.2 HTML 의 발전 1.3 웹브라우저의 종류 소스코드 실행 사이트 주소 :

Presentation on theme: "1 장. 인터넷과 웹환경의 발전 HTML5 웹 프로그래밍 입문 ( 교수용 ). 목차 1.1 인터넷의 역사 1.2 HTML 의 발전 1.3 웹브라우저의 종류 소스코드 실행 사이트 주소 :"— Presentation transcript:

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

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

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

4 인터넷의 발전과정 인터넷 용어의 유래 : 인터 - 네트워크 (inter-network) ■ ARPANET( 알파넷 ) 의 탄생 미국 국방성에서 1969 년 미국 내 4 개 대학 연결 데이터 전송에 IP(Internet Protocol) 전송 규약 사용 ■ TCP/IP 프로토콜의 발전 이더넷 방식의 LAN 기술과 TCP/IP(Transmission Control Protocol/Internet Protocol) 프로토콜의 통신 기술 발전 TCP/IP 는 1982 년 인터넷의 표준 프로토콜로 제정

5 ■ NSFNET 의 구축 1986 년 미국과학재단 (NSF) 에서 5 곳의 슈퍼컴퓨터를 TCP/IP 프로 토콜로 연결하여 학술정보망인 NSFNET 을 구축 슈퍼컴퓨터 간에는 케이블망으로 연결하여 백본역할, 인근 지역 의 대학과 회사의 LAN 과 연결 ■ 웹과 브라우저의 출현 1989 년 유럽입자물리연구소 (CERN) 의 팀 버너스 - 리  웹 (WWW, World Wide Web) 을 처음 제안하고  1994 년 웹컨소시엄 (W3C, WWW Consortium) 결성 1993 년 GUI 방식의 모자익 (Mosaic) 웹브라우저 개발, 1994 년 상업용 웹브라우저인 넷스케이프 내비게이터 보급

6 ■ 인터넷의 발전과정

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

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

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

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

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

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

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

14 ■ 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 년 최종 표준안 완성 예정

15 ■ HTML 의 발전 역사

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

17 (1) 강화된 마크업 요소 ■ 의미를 부여할 수 있는 구조적 마크업 요소 [2 장에서 설명 ] 페이지 단위의 문서 구조를 표현 와 요소, 요소, 요소 ■ 다양하고 편리한 웹 폼 (WebForm) 입력 기능 [4 장 참조 ] 편리한 사용자 인터페이스 개발을 위해 Form 기능 대폭 개선 요소에 date, number, color, file 등 각종 type 속성 추가

18 ■ 웹 미디어 기능의 강화 [3 장, 10 장 참조 ] 멀티미디어 및 그래픽스 관련 기능의 추가 요소와 요소 : 동영상이나 비디오 스트리밍 처리 요소 : 래스터 그래픽스 그리기 기능 SVG(Scalable Vector Graphics): 벡터 그래픽스 처리 MathML 언어 : 수식의 의미와 모양까지 표현

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

20 (3) 다양한 API 지원 [11~12 장 ] ■ 웹 애플리케이션 개발에 많은 도움을 줄 수 있는 다양한 API(Application Programming Interface) 제공 자바스크립트로 구현 가능 와 요소를 제어하는 API 요소에 그림을 그리는 API ■ 별도의 사양으로 분리된 API 웹 소켓, 웹 워커, 웹 스토리지, 로컬 데이터베이스, 웹 메세징, 위 치정보 등의 API 도 지원 넓은 범위에서 보면 이들 모두가 HTML5 의 기능 자바스크립트로 매우 다양하고 강력한 기능의 웹애플리케이션 구 현 가능해짐 ( 자바스크립트는 8~9 장에서 설명 )

21 드래그앤 드롭 (Drag & Drop) API  아이콘, 텍스트, 이미지, 파일 등 요소를 드래깅할 때 동작을 제어 오프라인 웹 어플리케이션 (Offline Web Applications) API  인터넷에 접속 못할 때에 웹 애플리케이션을 사용하도록 하는 기능 웹 스토리지 (Web Storage) API  클라이언트 쪽 로컬 스토리지에 저장 인덱스드 데이터베이스 (Indexed Database) API  클라이언트에 데이터베이스를 저장하고 사용 파일 (File) API  클라이언트 내의 로컬 파일을 읽고 쓸 수 있는 기능 웹 소켓 (Web Sockets) API  서버와 브라우저 사이에 양방향 통신 채널을 제공 웹 메세징 (Web Messaging) API  애플리케이션 간에 메시지를 주고받을 수 있는 기능 위치정보 (Geo-Location) API  모바일 단말기에서 현재 위치를 파악할 수 있게 해주는 기능

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

23 1.3.1 웹브라우저의 소개 1.3.2 대표적인 웹브라우저들 1.3 웹브라우저의 종류

24 웹브라우저의 소개 ■ 웹브라우저 사용자 쪽의 클라이언트 소프트웨어 웹서버에 있는 하이퍼텍스트정보를 사용자 화면에 보여주는 역할 하이퍼링크의 내비게이션 (navigation) 을 도와주는 기능도 포함 텍스트와 이미지 뿐만 아니라 멀티미디어 처리 기능까지 포함 ■ 웹은 기술의 발전 속도가 매우 빠른 분야 dynamic HTML, HTML5, CSS, Javascript, DOM, XML, mobile Web 등 표준안이 정착되기도 전에 새로운 기술이 개발되어 신속히 적용 웹브라우저는 버전에 따라서 제공되는 정보의 종류가 다르다  예, 현재 HTML5 는 표준안으로 최종 확정되지 않은 상태, 그러나 웹브 라우저에서는 미리 포함하여 현재 버전의 HTML5 문서 실행 가능

25 ■ 웹브라우저의 특징적인 기능 다양한 서비스를 위한 주소 관리 기능이 필요 화면 자체가 하나의 문서이므로 이를 관리하기 위한 기능 ■ 웹브라우저가 제공하는 기본적인 기능 웹페이지 열기 최근 방문한 URL 목록 제공 자주 방문하는 즐겨찾기 주소록 관리 웹페이지의 저장 및 인쇄 탭을 이용하여 여러 화면 보기 소스파일 (HTML) 보기 보안 및 필터에 관련된 각종 도구

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

27 ■ 인터넷 익스플로러 (Internet Explorer; IE) 윈도우 95 운영체제에 기본 제공 이후부터 사용자 급격히 증가 1998 년 넷스케이프 몰락이후 가장 널리 사용 2001 년 발표된 6.0 버전은 시장점유율이 한때 95% 상회 경쟁이 거세진 이후 2007 년 버전 7.0 출시, 2012 년 현재 버전 10 웹표준 호환성이 떨어지는 편, 국내의 경우 액티브 X 사용 문제점 ■ 모질라 파이어폭스 (Mozilla Firefox) 비영리 단체인 모질라 재단에서 2004 년 1.0 버전 발표 모질라 재단 내에서 자유 소프트웨어 웹브라우저로 개발  오픈소스 개발 자원자를 통해 모든 개발 작업 진행 다양한 운영체제에서 실행이 가능, 표준준수율이 매우 높은 편

28 ■ 구글 크롬 (Google Chrome) 2008 년 출시, 오픈소스 웹브라우저 간단하면서도 효율적인 사용자 인터페이스 제공 더 나은 속도와 안정성 및 보안성을 갖는 것을 목표로 개발 웹표준을 준수하는 사이트에 대한 호환성이 우수 모바일 안드로이드 환경과의 호환성으로 점유율 대폭 상승

29 ■ 애플 사파리 (Safari) 2003 년 애플이 매킨토시용으로 개발 아이폰, 아이패드 등 애플사 기기에서 동일한 브라우저를 사용 아이튠즈와 유사한 북마크 관리 체계를 사용 ■ 오페라 (Opera) 노르웨이의 오페라 소프트웨어가 1996 년부터 출시 다양한 플랫폼 대상, 작은 용량과 빠른 속도가 가장 큰 특징 모바일용 웹브라우저 시장에서 상당한 주목