01 장 웹개요와실습환경구축
목차 1. 인터넷과웹소개 2. 웹의동작원리 3. 보조웹표준기술소개 4. HTML5 주요기능소개 5. 실습환경구축
학습목표 1. 웹의개념과특징을이해한다. 2. 웹의동작원리를이해한다. 3. 대표적인웹표준기술의특징을이해한다. HTML5, CSS3, 자바스크립트 4. 웹프로그래밍을위한개발환경을구축한다.
1. 인터넷과웹소개 인터넷 (Internet) 전세계를연결하는국제정보통신망 ARPA(Advanced Research Project Agency) 에서개발
1. 인터넷과웹소개 세계최초인공위성 (1957 년 ) 미항공우주국설립 교육철학의변경 ARPA 설립및 ARPANET 개발 MILNET NSFNET 인터넷
1. 인터넷과웹소개 월드와이드웹 (WWW : World Wide Web ) 인터넷에서작동하는서비스 인터넷에연결된컴퓨터로사람들이정보를공유할수있는정보공간 팀버너스리의제안으로시작 (1989), 웹브라우저개발 물리학자들의신속한정보교환과공동연구를위해고안 사이트정보열람소프트웨어인웹브라우저로입수 문자, 사진, 동영상, 음성등이조합된데이터베이스 WorldWideWeb(1991) Nexus
1. 인터넷과웹소개 월드와이드웹 (WWW: World Wide Web ) 하이퍼텍스트 (hyper text) 한문서에서다른문서로즉시접근할수있는텍스트 철학자테드넬슨이처음고안 (1960년대) 'hyper' 와 'text' 를합성 인터넷과결합하여 HTML의주된구성요소가됨 하이퍼링크개념을바탕으로월드와이드웹개발 (1991) HTML : hyper text markup language Erwise(1992) ViolaWWW(1992)
1.1 인터넷의시작 W3C(World Wide Web Consortium) 1994년팀버너스리가창설 HTML 표준을비롯한웹표준안을제작및제안 표준을강제하지는않음 버전 HTML 1 HTML 2 HTML 3 HTML 4 HTML 5 발표연도 1991년 10월 1995년 11월 1997년 1월 1997년 12월 2014년 10월
1.2 1 차웹브라우저전쟁 모자이크 미국일리노이공대의 NCSA가 1993년에발표 최초의 GUI 웹브라우저 X 윈도우를지원하는웹브라우저개발시작 마크안데르센, 에릭비나 모자이크커뮤니케이션, 넷스케이프커뮤니케이션 넷스케이프 발표
1.2 1 차웹브라우저전쟁 넷스케이프 넷스케이프네비게이션브라우저 웹브라우저소스공개, 모질라재단을세워일반개발자의참여유도 아메리카온라인 (AOL) 이넷스케이프인수, 퇴보 이후파이어폭스개발 네비게이터 커뮤니케이션
1.2 1 차웹브라우저전쟁 인터넷익스플로러 마이크로소프트에서개발한웹브라우저 ie 4.0 버전부터윈도우에기본포함 급증 (ie 5, 6버전 : 점유율 95%) ie 3.0 ie 5.0
1.2 1 차웹브라우저전쟁 넷스케이프와인터넷익스플로러의경쟁 웹의발전속도를따라가지못하는 W3C에불만 W3C의표준을무시하여개발 플러그인 웹브라우저와연동되는특정프로그램 PC 에추가로설치해웹브라우저의기능확장
1.2 1 차웹브라우저전쟁 대표적인플러그인 액티브 X C++ 을사용해개발 기업의웹응용프로그램제작 플래시 액션스크립트를사용해개발 웹표준인자바스크립트보다편리하게제작할수있음
1.2 1 차웹브라우저전쟁
1.2 1 차웹브라우저전쟁
1.3 2 차웹브라우저전쟁 인터넷익스플로러의독점 사실상의표준 플러그인의문제 플러그인으로웹사이트가무거워짐 표준과의이질성 이를막고자 새로운 HTML 표준제안서제출 모질라재단, 오페라소프트웨어 W3C 에서거절됨 웹혁명을위한지향점에위배
1.3 2 차웹브라우저전쟁 WHATWG (2004) Web Hypertext Application Technology Working Group 웹브라우저제공기업들이설립 애플사파리, 모질라, 오페라 (MS ie 제외 ) Web Application 1.0 표준작성 웹표준의변화 W3C XHTML 2.0 표준작성 ( 마이크로소프트와함께 ) 기존표준과이질 개발자들사용안함 폐기 (2009) Web Application 1.0 표준 W3C가새표준채택 HTML5 표준작성 W3C와 WHATAG 가 HTML W/G 결성 2012년초안작성 2014년 10월, HTML5 표준안확정
1.3 2 차웹브라우저전쟁 2 차브라우저전쟁시작 XHTML 2.0 표준붕괴및 HTML5 표준제정 인터넷익스플로러만최신표준을지원하지못하는상황발생 웹브라우저점유율을뒤집을수있는기회 빠른업데이트 모질라두달단위, 크롬 10 주단위 웹브라우저마케팅 유튜브광고제작 자사브라우저에서만동작하는웹페이지및응용프로그램장려» 크롬웹스토어» 모질라마켓플레이스
1.3 2 차웹브라우저전쟁 크롬웹스토어 모질라마켓플레이스
1.3 2 차웹브라우저전쟁 웹브라우저세계점유율변화
1.3 2 차웹브라우저전쟁 웹브라우저세계점유율변화
1.3 2 차웹브라우저전쟁 우리나라브라우저점유율변화
2 웹의동작원리 치킨주문과웹페이지주문 서버 클라이언트 고객 치킨집 치킨 : 웹페이지
2 웹의동작원리 웹 : 클라이언트가서버에요청하면요청에응답하여웹페이지를제공하는장소 클라이언트 ( 사용자 ) 요청하는쪽 서버 ( 제공자 ) 응답하는쪽
2 웹의동작원리 서버프로그램 서버에서실행되는프로그램 클라이언트의요청에따라적절한파일과데이터를제공 자바, C#, 루비, 파이썬, 자바스크립트와같은언어로개발 기본웹프레임워크 (ASP, JSP, PHP) MVC 프레임워크 (Spring Framework, Ruby on Rails) 비동기프레임워크 (Node.js, Jetty) 클라이언트프로그램 클라이언트 ( 웹브라우저 ) 에서실행되는프로그램 HTML로요소생성 CSS로디자인 자바스크립트
3 보조웹표준기술소개
3.1 HTML5 소개 HTML5 협의 : 웹문서의문법 광의 : 웹표준기술총칭 CSS : Casacading Style Sheet 웹페이지의스타일을지정할때사용하는언어 1996년웹표준채택 / 현재 CSS3 버전을사용중 모듈기반 그래픽디자인에의존하던영역가능 소스코딩으로가능
3.3 자바스크립트 자바스크립트 HTML 페이지에서사용자반응처리 표준명칭은 ECMAScript5 ECMA-262라는이름으로정식채택 ECMAScript 표준으로불림 1994 년 넷스케이프에서모카라는이름으로개발 브랜든아이히 사용제품이름 모질라파이어폭스 / 구글크롬마이크로소프트인터넷익스플로러오페라소프트웨어오페라애플사파리마이크로소프트닷넷프레임워크어도비플래시어도비아크로벳 구현이름 JavaScript Jscript ECMAScript JavaScript Jscript.Net ActionScript JavaScript
4 HTML5 주요기능소개 HTML5 에서추가된주요기능 멀티미디어기능 그래픽기능 통신 디바이스접근 오프라인및저장소 시맨틱 CSS3 스타일시트 웹의성능극대화및통합
4.1 멀티미디어 기존사이트 플래시이용해동영상재생
4.1 멀티미디어 멀티미디어기능강화 플러그인의도움없이스스로음악과동영상재생
4.1 멀티미디어 유투브
4.2 그래픽기능 2 차원 /3 차원그래픽구현 2 차원그래픽구현방법 HTML 태그를이용해 2차원벡터그래픽구현 자바스크립트캔버스를사용해 2차원래스터그래픽구현 http://dc-js.github.io/dc.js/
4.2 그래픽기능 3 차원그래픽구현방법 CSS3 로 3 차원그래픽구현 https://www.clicktorelease.com/code/
4.2 그래픽기능 자바스크립트 WebGL 을사용해 3 차원그래픽구현 http://www.awwwards.com/22-experimental-webgl-demo-examples.html
4.3 통신 서버와소켓통신가능 서버와실시간으로쌍방향통신수행가능 채팅, 온라인게임개발가능
4.4 디바이스접근 디바이스접근 디바이스의정보와기능사용가능 컴퓨터하드웨어접근가능 인터넷미연결상태에서응용프로그램동작가능 HTML5( 웹브라우저 ) 기반운영체제등장 크롬북, 크롬스토어
4.4 디바이스접근 크롬북 브라우저 ( 크롬 OS) 기반컴퓨터 ( 노트북 ) 브라우저가운영체제, 브라우저가디바이스제어가능 일반노트북에도크롬 OS 설치가능 노트북내프로그램설치안함 구글스토어에서웹앱을통해사용 데이터은구글크라우드에저장 2011 년 6 월처음출시 10~30 만원에구매가능
4.5 시맨틱 & CSS 지원 시맨틱웹을구현하는데필요한시맨틱태그추가 시맨틱웹 - 검색엔진같은프로그램이정보의의미를분석하고, 자료를검색및처리하여제공하는지능형웹 CSS3 스타일시트를완벽하게지원 2/3차원그래픽 3차원변환 애니메이션효과
4.6 웹의성능극대화 추가가능을통해기존웹의성능극대화가능 HTML5 부터는웹페이지자체가하나의응용프로그램 하이브리드응용프로그램 HTML5 는웹페이지뿐만아니라운영체제로확장시도
5. 실험환경구축 크롬설치하기 크롬의공식홈페이지에서다운로드후설치 www.google.com/chrome
실험환경구축 에디터설치하기 서브라임텍스트 3 홈페이지 (http://sublimetext.com) 에서다운후설치 windows 64bit 다운, 설치 에디트플러스 3 https://www.editplus.com/kr/download.html 노트패드 ++ https://notepad-plus-plus.org/ 크림슨에디터 아톰에디터 아크로에디터
예제 빈문서 저장 : ctrl + s
예제 디렉터리위치확인 파일명및확장자확인 000.html
파일명변경
탐색기에서실행
창제목 글자적기