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

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

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

인터넷의 발전과정 ARPANET의 탄생 TCP/IP 프로토콜의 발전 인터넷 용어의 유래 : 인터-네트워크(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)에서 개발 이전에 선보였던 하이퍼텍스트란 개념을 채택 연관된 여러 데이터를 링크로 연결하여 사용자가 필요한 정보를 탐색할 수 있게 도와주는 정보탐색 구조

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

HTML의 발전 역사

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

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

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

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

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

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

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

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

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

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

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

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

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

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