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 웹의 발전 인터넷과 웹환경의 발전

인터넷의 발전과정 ARPANET의 탄생 인터넷 용어의 유래 : 인터-네트워크(inter-network) 미국 국방성에서 1969년 미국 내 4개 대학 연결 데이터 전송에 IP(Internet Protocol) 전송 규약 사용 인터넷과 웹환경의 발전

TCP/IP 프로토콜의 발전 NSFNET의 구축 이더넷 방식의 LAN기술과 TCP/IP 프로토콜의 통신 기술 발전 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)에서 개발 이전에 선보였던 하이퍼텍스트란 개념을 채택 연관된 여러 데이터를 링크로 연결하여 사용자가 필요한 정보를 탐색할 수 있게 도와주는 정보탐색 구조 인터넷과 웹환경의 발전

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

1.2 HTML의 발전 1.2.1 마크업 언어 및 HTML 언어의 역사 1.2.2 HTML5 언어의 특징 인터넷과 웹환경의 발전

마크업 언어 및 HTML 언어의 역사 마크업 언어(Markup Language) 문서의 속성을 설정하기 위한 마크업을 태그의 형태로 표시 대표적인 마크업 언어 : 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 이후 요구사항 HTML5의 방향 다양한 인터페이스, 다양한 형식의 미디어 파일, 비동기 처리 웹 표준 기술을 사용하자는 시도 웹 애플리케이션 개발에 XML, CSS, 자바스크립트 등 이용 HTML5의 방향 마크업에 보다 의미를 부여, 스타일은 분리하도록 CSS3 활용 플러그인 대신 웹 표준을 적용하도록 SVG, MathML 지원 인터랙션 개발을 위해 자바스크립트를 지원 웹 애플리케이션의 개발을 위하여 다양한 API를 제공 특히 위치관련 및 오프라인 등 모바일 환경까지 고려한 API 제공 인터넷과 웹환경의 발전

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

(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 드래그앤 드롭(Drag & Drop), 위치정보(Geo-Location), 웹 스토리지(Web Storage), 웹 소켓(Web Sockets), 파일(File), 오프라인 웹 애플리케이션(Offline Web Application), 인덱스드 데이터베이스(Indexed Database) 등 이들 모두가 HTML5의 기능 자바스크립트로 매우 다양하고 강력한 기능의 웹애플리케이션 구현 가능해짐 (자바스크립트는 8~10장에서 설명) 인터넷과 웹환경의 발전

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

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

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

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

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

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

주소체계 도메인 이름(Domain Name) IP 주소는 숫자로 구성되어 있어서 이용/기억하기 불편 도메인 이름 서버(Domain Name Server) : 도메인 이름을 IP주소로 변환 국가별 도메인 방식 “호스트이름.소속기관.단체성격.소속국가”의 4단계 예, www.daum.co.kr 일반 도메인 방식: “호스트이름.소속기관.단체성격”의 3단계 최상위 도메인이 소속국가가 아닌 단체성격 예, www.yahoo.com 인터넷과 웹환경의 발전

URL(Uniform Resource Locator) 웹에서 각종 파일 등 자원의 위치를 표시하는 표준 서버에서 지원되는 다양한 서비스를 표현하도록 HTTP, FTP, Telnet, mail-to 등 구성형식: “서비스프로토콜://도메인주소/폴더경로/파일이름” 예, http://cafe.naver.com/swimmingtraining/10294 예, ftp://it.sookmyung.ac.kr/~sblim/intro.html 인터넷과 웹환경의 발전

1.4 웹브라우저의 종류 1.4.1 웹브라우저의 소개 1.4.2 대표적인 웹브라우저들 인터넷과 웹환경의 발전

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

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

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

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