웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 1
04 웹페이지와웹브라우저 04 Web page & Web Browser - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 2
차례 4.1 하이퍼미디어와웹의개념 4.1.1 하이퍼텍스트의개념 4.1.2 하이퍼미디어의발전과정 4.1.3 웹의기본개념 4.1.4 웹컨소시엄 (W3C) 의소개 4.2 웹페이지의개념 4.2.1 웹페이지의개념과이해 4.2.2 웹사이트와홈페이지 4.3 웹브라우저의종류 4.3.1 웹브라우저의소개 4.3.2 웹브라우저의역사 4.3.3 대표적인웹브라우저들 4.4 웹브라우저의기능및설정 4.4.1 웹브라우저의작동원리 4.4.2 웹브라우저의기본기능 4.5 웹브라우저의멀티미디어 4.5.1 멀티미디어플러그인이란? 4.5.2 대표적인플러그인프로그램 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 3
하이퍼텍스트의개념 웹 (Web) 의목표 스위스유럽입자물리연구소 (CERN) 에서흩어져있는다양한유형의정보를공유하고자 하이퍼텍스트개념 : 연관된여러데이터를링크로연결하여사용자가필요한정보를탐색할수있게도와주는정보탐색구조 하이퍼텍스트 (Hypertext) 상호연관된텍스트조각 (Text Fragment) 들을비순차적 (Non-sequential) 으로연결하여구성 1965 년 Ted Nelson 이 Xanadu 프로젝트에서처음으로소개 텍스트정보조각의단위를노드 (Node), 노드를연결하는포인터를링크 (Link) - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 4
하이퍼텍스트의개념 하이퍼미디어 (Hypermedia) 텍스트뿐만아니라이미지, 그래픽, 사운드, 애니메이션, 비디오등의멀티미디어정보가서로연결되어있는것 노드와링크 노드 : 멀티미디어정보를표현하는기본단위 링크 : 노드들을연결하여탐색이가능토록 앵커 (Anchor): 노드내에서링크의출발점 (Source) 과도착점 (Destination) 앵커영역 : 앵커가설정되어있는영역 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 5
하이퍼미디어의발전과정 _1 Memex(1945) : Vannevar Bush 최초로제시된하이퍼텍스트개념의가상기계 Xanadu(1965) : Ted Nelson 하이퍼텍스트라는용어가처음으로사용 현재의인터넷과 HTML로현실화된것임 NLS(oNLine System, 1968) Doug Engelbart 최초로하이퍼텍스트개념이구현 그룹웨어시스템 : 이메일, 하이퍼텍스트문서탐색 마우스와 GUI를최초로구현 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 6
하이퍼미디어의발전과정 _2 Aspen Movie Map(1978): MIT 의 Lippman 최초의하이퍼미디어시스템, 이미지간브라우징 미국콜로라도주 Aspen 시를가상으로여행 HyperCard(1987) : 애플사 대중적인하이퍼미디어저작도구 카드방식에기반한하이퍼미디어시스템을제작 Web(1989) 유럽입자물리연구소 (CERN) 팀버너스리 (Tim Berners-Lee) 개발 인터넷에서정보교환을위한최초의하이퍼미디어시스템 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 7
웹의기본개념 _1 World-Wide Distributed Hypertext 1989, 팀버너스리가제안, 인터넷상정보교환을위한분산형멀티미디어하이퍼텍스트시스템을구축하는프로젝트 웹의특징 인터넷서비스중의한가지방법 하이퍼링크개념, 그래픽환경의 GUI 제공, 멀티미디어정보제공 웹의표준기술 인터넷상정보표현언어 HTML(HyperText Markup Language) 서비스프로토콜 HTTP(HyperText Transfer Protocol) TCP/IP 통신규약위에서인터넷애플리케이션서비스를위한규약 표준주소표기방식 URL(Uniform Resource Locator) 프로토콜 :// 컴퓨터주소 / 파일경로 형태 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 8
웹의기본개념 _2 웹브라우저 컴퓨터화면에서웹정보를볼수있도록만든프로그램 1993, 모자익 (Mosaic), 일리노이대학 Marc Andreessen이개발 오늘날인터넷이전세계적으로널리사용되게한결정적인기술 클라이언트 - 서버모델 웹서버 : 데이터교환이나웹사이트를제공하는호스트역할 웹의애플리케이션실행, 해당정보는웹사이트로저장 웹브라우저 : 클라이언트역할 사용자의입력을웹서버에전송, 처리결과를화면에출력 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 9
웹컨소시엄 (W3C) 의소개 World Wide Web Consortium(W3C) 1994 년 10 월팀버너스리를중심으로결성 웹관련표준안을제정하고, 이를기술적으로사회적으로확산하려노력 미국 MIT, 유럽 INRIA, 일본게이오대학에대륙별호스트서버 한국전자통신연구원 (ETRI) 에서 W3C 대한민국사무국 W3C 표준안 (W3C Recommendation) HTML, CSS, XML, XSL, DOM 등기본적인웹문서기술뿐아니라모바일, 시맨틱웹, 웹접근성등다양한활용분야의기술도포함 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 10
웹페이지의개념과이해 _1 웹페이지 (Webpage) 웹서버에저장 인터넷검색및각종요청의처리결과가기록되는대부분의문서 텍스트나이미지외에도그래픽, 오디오, 비디오등다양한멀티미디어자료들이포함 웹페이지를표현하는대표적인언어 HTML(HyperText Markup Language) 정교한레이아웃스타일을위해 CSS(Cascading StyleSheet) 사용 풍부한인터랙션을위해자바스크립트 (Javascript) 사용 정보의교환이나다양한활용을원할때에는 XML(eXtensible Markup Language) 로표현 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 11
웹페이지의개념과이해 _2 URL 형식의주소 웹서버에저장되어있는모든웹페이지접근 웹페이지주소의예 : www.google.co.kr URL 요청예 : http://www.newdaily.co.kr/news/article.html?no=101915 웹페이지의요청과웹서버의응답과정 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 12
웹사이트와홈페이지 웹사이트 (Website), 사이트 관련된웹페이지들의묶음 하나또는하이퍼링크로연결된여러개의웹페이지로구성 최초의웹사이트 : info.cern.ch 홈페이지 (Homepage) 특정도메인이나웹사이트에접속할때맨처음나타나는페이지 시작페이지의파일이름을보통 index.html 이라는이름 웹사이트의주소까지만입력해도자동으로홈페이지가실행 http://visual.sm.co.kr/index.html => http://visual.sm.co.kr - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 13
웹브라우저의소개 _1 웹브라우저의역할 사용자쪽의클라이언트소프트웨어 하이퍼미디어정보를사용자기기의화면에보여주는역할 하이퍼링크의내비게이션을도와주는기능도포함 그래픽사용자인터페이스 (GUI) 와멀티미디어처리기능도포함 웹브라우저에적용되는웹기술 Dynamic HTML, HTML5, CSS, JavaScript, DOM, XML, SVG, VRML, mobile Web 등 매우빠르게발전하므로웹브라우저버전마다상이 표준안최종확정되기전에미리구현, 예, HTML5 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 14
웹브라우저의소개 _2 웹브라우저의주요기능 하이퍼텍스트를탐색하는도구이므로주소관리기능 다양한서비스를통합하여제공하므로이들을관리하는기능 웹브라우저가제공하는기본적인기능 웹페이지열기 최근방문한 URL 목록제공 자주방문하는즐겨찾기주소록관리 웹페이지의저장및인쇄 탭을이용하여여러화면보기 소스파일 (HTML) 보기 보안및필터에관련된각종도구 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 15
웹브라우저의역사 _1 WorldWideWeb(1991) 팀버너스리가개발한최초의웹브라우저 넥스트 (Next) 워크스테이션에서사용가능 GUI 방식의웹브라우저들 (1992) Erwise : 핀란드헬싱키공대학생, 유닉스 X-윈도우환경실행 ViolaWWW : UC Berkley 학생 Pei-Yuan Wei, 유닉스 X-윈도우 그외 MidasWWW, MacWWW 등 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 16
웹브라우저의역사 _2 모자익 (Mosaic, 1993) 일리노이대학교 NCSA 연구원 Marc Andreessen과 Eric Bina GUI 방식의본격적인웹브라우저를개발하여널리보급 처음에는유닉스전용, 이어매킨토시와 PC 윈도우용으로개발 웹의대중화에결정적인기여 최초의 GUI 방식 PC 웹브라우저인모자익 (Mosaic) 기념비 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 17
웹브라우저의역사 _3 넷스케이프 (Netscape) 의상업화 (1994~1999) 마크안드리센이 Netscape Communications라는회사설립 모자익을더욱발전시켜상업화에성공 다양한플랫폼을지원, 상당히빠르고안정적 여러가지편리한도구를제공 닷컴기업성공시대의대표적인회사로 1995 년주식상장시주당 28 달러의당일주가가 70 달러까지상승 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 18
웹브라우저의역사 _4 넷스케이프와익스플로러의브라우저전쟁 (1995~1999) 1995 년마이크로소프트사, 인터넷익스플로러출시 출시 3개월후 2.0 버전, 1996년 3.0 버전 넷스케이프사가 80% 이상의시장점유율을유지 1997년익스플로러 4.0버전이출시되면서경쟁치열 넷스케이프사도커뮤니케이터 4.0 출시 마이크로소프트의윈도우끼워팔기 ( 번들 ) 전략으로점유율급격하락 1998년넷스케이프사는웹브라우저오픈소스라이선스정책을채택 AOL 사가넷스케이프사를인수 그이후 2002 년까지익스플로러의시장점유율 95% - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 19
웹브라우저의역사 _5 마이크로소프트사에대한반독점소송 1998 년미국법무부, 윈도우 95 묶음판매는불공정거래행위로마이크로소프트제소 연방지방법원불공정거래사실일부인정, 끼워팔기금지판결 몇년간의법정소송끝에 2000 년미국연방대법원에서는마이크로소프트사가독점금지법을위반하였다고최종적으로판결 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 20
웹브라우저의역사 _6 모질라재단 1998년넷스케이프소스공개이후 AOL에서지속하여개발하던모질라프로젝트에서시작 2003년 AOL에서중단하자독자적으로비영리재단을설립 2004년에모질라재단에서파이어폭스 (Firefox) 발표 자유소프트웨어기반의웹브라우저 2000 년대중반이후모질라기반브라우저의점유율증가 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 21
대표적인웹브라우저들 _1 대표적인웹브라우저들의시장점유율변화 인터넷익스플로러, 파이어폭스, 크롬, 사파리, 오페라 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 22
대표적인웹브라우저들 _2 인터넷익스플로러 (Internet Explorer; IE) 윈도우 95 에기본포함되어제공된후부터사용자급격히증가 2001 년발표된 6.0 버전은시장점유율이 95% 상회 웹표준호환성이떨어지는편이라서다른브라우저와갈등 액티브 X 등으로보안이나표준호환성이취약 모질라파이어폭스 (Mozilla Firefox) 비영리단체인모질라재단에서 2004년 1.0버전발표 gecko라는레이아웃엔진기반의자유소프트웨어웹브라우저 표준준수율이나다양한부가기능으로사용편리성이매우좋다 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 23
대표적인웹브라우저들 _3 구글크롬 (Google Chrome) 구글에서 2008년출시한오픈소스웹브라우저 웹킷 (Webkit) 레이아웃엔진기반으로간단하고효율적인사용자인터페이스를제공 모바일안드로이드환경과의호환성으로점유율대폭상승 애플사파리 (Safari) 2003년애플이매킨토시용으로개발한웹브라우저 아이폰, 아이패드등애플모바일기기에서동일브라우저사용 오페라 (Opera) 오페라소프트웨어가 1996년부터출시, 지금까지명맥유지 작은용량과빠른속도가가장큰특징 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 24
웹브라우저의작동원리 _1 웹브라우저작동순서 사용자가 URL 형식으로자료요청 서버에서정보처리후 브라우저에서결과보여주기 (1) 웹서버에문서요청 원하는웹페이지의주소를 URL 형식으로입력하여자료요청 URL(Uniform Resource Locator) 주소형식 프로토콜 :// 웹서버주소 / 파일경로 프로토콜에는 http 혹은 https 외에 ftp, mailto, usenet, file 등도가능 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 25
웹브라우저의작동원리 _2 웹브라우저에서서버에요청하는형식 ( 사례 ) 1 브라우저주소창에직접주소입력 http://www.daum.net/ 다음포털 2 문서에링크된하이퍼링크클릭 http://media.daum.net/issue/498?newsid=20130 703202404140 뉴스문서주소 3 검색창에단어를입력하여검색요청 http://search.daum.net/search?w=tot&da=yzrr &t nil_searchbox=btn&sug=&q=%ec%95%84 %EC%9D%B4%EC%9C%A0 검색요청 ( 버튼 ) 4 분류되어있는뉴스를검색요청 http://media.daum.net/economic/ 미리분류된목록 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 26
웹브라우저의작동원리 _3 (2) 서버전달및실행결과 사용자요청은일단사용자측의웹서버에전달 해당하는서버에도달하도록게이트웨이를통해요청을전송 단순자료요청의경우해당하는문서를찾아오고, 응용프로그램실행요청의경우에는프로그램실행 결과를 HTML 문서로구성하여처리결과를반환 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 27
웹브라우저의작동원리 _4 (3) 수행결과보기 일반텍스트혹은이미지, 비디오, 자바애플릿, 스트리밍파일등다양한형식의자료로구성 웹브라우저에서는다양한형식의파일이나다양한기능을수행 표준의역할이중요 => 대표적인표준형식 프로토콜 : HTTP, HTTPS 문서파일 : HTML, XML, CSS 등하이퍼텍스트문서및스타일시트 그래픽파일 : GIF, PNG, JPEG 등이미지, SVG 등그래픽파일 미디어파일 : MPEG 등비디오파일, MIDI, MP3 등오디오파일 스크립트 : 자바스크립트, Ajax 기타 : 쿠키, 디지털인증서등 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 28
웹브라우저의기본기능 _1 브라우저창의구성 제목표시줄 (Windows Title Bar): 현재웹페이지의제목 메뉴모음 (Menu Bar): 파일, 편집, 보기, 등에대한풀다운메뉴 탭표시 (Tab Browsing): 항상선택된탭의제목표시가앞에 주소창 (Address Bar): 방문을원하는사이트의 URL 주소를입력 웹페이지영역 (Page Display): 접속한웹페이지내용을보여준다. 파이어폭스브라우저 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 29
웹브라우저의기본기능 _2 주소찾아가기기능 주소창에 URL 입력및자동완성 찾아가기아이콘버튼 방문기록도움받기 북마크 ( 즐겨찾기 ) 이용하기 RSS 피드받아보기 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 30
웹브라우저의기본기능 _3 페이지보기및파일관리하기 새탭열기, 새창열기 각종도구및탐색창보기선택 메뉴바, 주소창모음, 북마크모음, 부가기능모음등을선택적보기 보기메뉴선택 글자크기조정, 문서의스타일시트적용여부, 문자인코딩등 편집기능 문서의일부분선택하기, 복사하기, 문서내에서단어찾기등 파일관련기능 문서인쇄하기, 인쇄미리보기, 다른이름으로저장하기등 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 31
웹브라우저의기본기능 _4 환경설정및보안기능 플러그인확인및관리기능 도구모음선택 버튼이나아이콘등의도구모음을원하는대로선택하여추가 개인사용정보보호하기 최근방문기록지우기, 사생활보호모드, 온라인행위추적거부등 안전하게사이트방문하기 위조사이트나위험사이트확인, 안전한연결확인 개인화설정 원하는스타일의웹브라우저스킨설정 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 32
멀티미디어플러그인이란? 소프트웨어플러그인 기능을추가적으로설치하여소프트웨어기능이확장된것처럼원하는작업을지원해주는프로그램 플러그인 : 전원플러그를꽂기만하면가전제품이자동으로설치되어추가 (Add-on) 기능이실행된다는의미 웹브라우저플러그인 새로운형식의멀티미디어파일을지원하는플레이어프로그램을플러그인형태로제공 원래부터실행되는것과같은효과를제공 지속적으로새로운버전으로갱신가능 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 33
대표적인플러그인프로그램 _1 Adobe PDF Reader 어도비사의 PDF 파일형식의문서읽기 Adobe Flash Player 웹페이지에서 2차원애니메이션을실행 벡터그래픽스에적합, 최근에는동영상및 TV 기능도지원 SVG viewer 웹컨소시엄의벡터그래픽스표준인 SVG 파일을실행 HTML5부터는기본사양에포함 Apple QuickTime Player 애플사가멀티미디어기술을표현하기위해개발한파일형식 퀵타임비디오뿐아니라퀵타임 VR 및인터랙션기능도지원 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 34
대표적인플러그인프로그램 _2 RealPlayer (RealNetworks) 리얼네트웍스, 가장대표적인스트리밍방식의미디어플레이어 리얼오디오와리얼비디오외에 MP3, MPEG-4, 퀵타임등 50여가지의미디어파일을재생 Microsoft Windows Media Player MS 윈도우운영체제에서기본으로지원하는미디어플레이어 곰플레이어 (Gretech Online Movie Player) 국내기업인그래텍에서제작한동영상재생프로그램 매우다양한형식의코덱및미디어파일을지원하고 - 웹과인터넷활용및실습 (Web & Internet) - 04 웹페이지와웹브라우저 35