4 장 웹 브라우저의 사용. 1 4.1 World Wide Web 의 개요  1990 년 말 스위스의 CERN 연구센터에서 많은 사용자가 쉽게 사용할 수 있도록 그래픽을 제공하는 환경을 개발  WWW, Web, World Wide Web, W3 등의 호칭  Hypertext.

Presentation on theme: "4 장 웹 브라우저의 사용. 1 4.1 World Wide Web 의 개요  1990 년 말 스위스의 CERN 연구센터에서 많은 사용자가 쉽게 사용할 수 있도록 그래픽을 제공하는 환경을 개발  WWW, Web, World Wide Web, W3 등의 호칭  Hypertext."— Presentation transcript:

1 4 장 웹 브라우저의 사용

2 1 4.1 World Wide Web 의 개요  1990 년 말 스위스의 CERN 연구센터에서 많은 사용자가 쉽게 사용할 수 있도록 그래픽을 제공하는 환경을 개발  WWW, Web, World Wide Web, W3 등의 호칭  Hypertext 를 기반으로 한 문서의 집합  멀티미디어 정보들을 도입하여 사용 - Hypermedia 기반 4.1.1 웹의 개념과 역사

3 2  문자 뿐만이 아니라 그림, 그래픽, 소리와 영상 등을 포함  Hypertext : Hyperlink 를 이용한 비선형 구조의 텍스트  Hyperlink 와 Hypermedia Hyperlink : 문서내 혹은 문서 사이의 이동을 위한 링크 - Hot Word, 문서내 이동 링크, 이미지 / URL 이용 링크 등 Hypermedia : 텍스트 외의 다른 종류 미디어를 이용한 링크  HTML (Hyper Text Markup Language) 웹의 하이퍼미디어 문서를 작성하고 표현하기 위한 표준 언어 SGML(Standard Generalized ML) 형식의 텍스트 문서 Tag 를 이용하여 문서 형식 작성함 4.1.2 웹의 특징

4 3  HTTP (Hyper Text Transfer Protocol) ; 웹 서버와 클라이언트가 HTML 문서를 송수신하기 위해 사용하는 통신규약  웹 브라우저 (Web Browser) ; HTML 문서를 접근하고 다른 문서를 참조할 수 있도록 도와주는 클라이언트 프로그램 하이퍼미디어 문서를 이용한 인터넷 TV 보기

5 4 HTML 과 HTTP 의 동작원리

6 5 4.1.3 URL 이란 ?  형식 : “ 접근 Protocol:// 호스트 주소 / 문서 경로 / 문서 이름 ”  URL 의 종류 HTTP : 웹에서 주로 이용 예 ) http://java.sun.com/applets/index.html FTP : FTP 서비스 이용시 사용 예 ) ftp://ftp.uu.net FILE : 자신의 컴퓨터에 서 파일 읽음 예 ) file://c:\autoexec.bat Gopher : Gopher 서비스를 웹을 이용하여 검색함 예 ) gopher://cair-archive.kaist.ac.kr/70/ Telnet, News, Mailto : 텔넷과 뉴스그룹, 전자우편 서비스 예 ) telnet://swallow.yonsei.ac.kr 예 ) news://news.nownuri.net/han.comp 예 ) mailto://sunrise@rainbow.yonsei.ac.kr

7 6 4.2 웹 브라우저의 소개  웹 서버의 하이퍼텍스트 문서를 보여주는 클라이언트 P/G  하이퍼텍스트의 네비게이션을 도와주는 도구  하이퍼미디어 기능 쉽게 표현 : GUI, 멀티미디어 정보 처리  인터넷 대중화의 근원  관련 기술 발전 속도 매우 빠름  종류에 따라 기능 및 속도 다름 4.2.1 웹 브라우저란 ?  웹 브라우저의 기본적 기능  웹 페이지 열기  책갈피 기능 : 최근 방문한 URL, 자주 방문하는 URL 정보 기억  웹 페이지의 저장 및 인쇄  전자우편, 뉴스그룹 클라이언트 프로그램 및 HTML 문서 편집기  Off-line 및 공동 작업 기능

8 7  NCSA 의 Mosaic : 멀티미디어 최초 지원  Netscape Communicator : Mosaic 의 발전 형태 4.2.3 웹브라우저의 종류 넷스케이프 커뮤니케이터 웹브라우저

9 8  Internet Explorer : 마이크로소프트사에서 개발  Opera : 작고 빠른 웹 브라우저 Operasoftware 사의 Opera 인터넷 익스프로러 웹브라우저

10 9 4.3. Netscape Communicator  버전 4.0 이전까지 Netscape Navigator 라고 불림  웹 브라우저와 전자우편, 뉴스그룹 리더, 저작도구 등 포함  플랫폼에 상관 없이 지원됨 ( 윈도즈, Maccintosh, X-windows)  JAVA 에 대해 호환성이 좋음  구성 프로그램 Navigator : 웹 브라우저 Messenger : 전자 우편 및 뉴스 그룹 리더 (Collabra 가 통합됨 ) Composer : 웹 페이지 작성 및 편집 AOL : 쪽지 기능 User Profile Notification, Mail NotificationConference, Netcaster 4.3.1 Netscape Communicator 의 개요

11 10 4.3.2 Netscape Navigator 의 구성 (1) 제목표시줄 메뉴바 검색도구모음 위치도구모음 개인도구모음 웹페이지영역 보안 표시기 전송량 표시 상태표시줄구성요소줄

12 11  Windows Title Bar : 현재 웹 페이지의 제목 표시  Menu Bar : 모든 명령어들을 포함함  Navigation Tool Bar : 자주 사용하는 주 메뉴 명령어 모음  Location Tool Bar : URL 입력, 표시 및 책갈피 기능 포함  Personal Tool Bar : 사용자 요구에 맞는 url 의 버튼 모음  Company Logo : 웹브라우저 상태 표시, 넷스케이프사 연결  Security Indicator : 현재 표시된 웹 페이지의 암호화 여부 알려줌  Progress Bar : 이미지와 웹 페이지 요소의 전송량 표시  Status Message Area : 전송 완료 여부나 연결 상태 표시  Page Display : 일반 텍스트, 멀티미디어 요소, 하이퍼링크 표시  Component Bar : 커뮤니케이터의 각종 구성 요소 모음 4.3.2 Netscape Navigator 의 구성 (2)

13 12 4.3.3 웹 페이지 보기 (1) Home : [Preference] 메뉴에 설정된 기본 홈페이지로 이동함 (2) 페이지 읽기 명령을 이용한 방법  [File] 메뉴의 [Open Page] 선택 (3) Netsite 에 URL 입력하는 방법 / 드롭 다운 버튼 이용하기 Url 입력 Drop Down Button

14 13 4.3.3 웹 페이지 보기 (4) 방문 기록 (History) 이용하기 [communicatior] 메뉴에서 [History] 메뉴 선택 [Go] 메뉴에서 페이지 제목 선택

15 14 4.3.4 도구모음 (Toolbar) (1) 도구 모음 감추기 / 보여주기 [View] 메뉴의 [Show] 메뉴에서 해당 도구 모음의 체크 여부 도구 모음 Tab( ) 사용하기 도구모음 위치 바꾸기 : 왼쪽 마우스 버튼으로 드래깅함 도구 모음 감추기 / 보여주기 : 탭을 클릭함

16 15 (2) 검색도구모음 (Navigation Toolbar ) Back : 바로 전에 검색했던 페이지로 이동 Forward : 다음 페이지로 이동 ([Back] 버튼 이용 후에만 유효 ) Reload : 현재 읽은 웹 페이지 다시 읽음. Home : [Preference] 에 등록된 시작 페이지로 이동 Search : 원하는 검색 엔진 이용을 가능케 함 My Netscape : 미리 등록한 개인 홈페이지로 이동함 Print : 현재 표시된 페이지 (Frame) 이 인쇄됨 Security : 현재 페이지에 암호를 부여하여 보안을 유지함 Stop : 현재 읽고 있는 페이지의 전송을 중단함

17 16 (3) 위치도구모음 (Location Toolbar) Bookmarks Quick File : 책갈피 저장 및 관리 기능 Page Proxy : 이 아이콘을 [Bookmarks] 나 [Personal Toolbar] 에 드래깅하면 책갈피에 추가됨 Location Field : URL 입력하여 바로 이동하기 What’s Related : 현재 웹 사이트와 관련된 다른 웹 사이트 목록 표시 (4) 개인도구모음 (Personal Toolbar) 사용자가 즐겨 찾는 웹 사이트와 뉴스그룹, 전자우편 및 주소록 관리

18 17 4.3.5 웹 페이지의 정보 저장 (1) 화면의 내용을 직접 저장하기 [File] 메뉴 > [Save As..] : HTML/ 텍스트 형식 저장. 이미지 제외 ) [File] 메뉴 > [Save Frame As..] : 프레임 단위 저장 이미지 저장 : 그림에서 우측 마우스 버튼 클릭 후 [Save Image..] 선택 일부 텍스트 저장

19 18 (2) 링크가 지정하는 페이지나 이미지 저장하기 링크 위에서 마우스 우축 버튼을 클릭 후 [Save Link As..] 나 [Save Image As..] 선택함 > FTP link 의 경우 자동으로 다운로드하여 해당 형식 지원 보조 프로그램이 실행됨

20 19 4.3.6 환 경 (Preference) 설정 (1) 시작 페이지의 설정 [Edit] 메뉴 > [Preferences] > [Navigator] 항목 선택

21 20 (2) Cache 설정 자주 방문하는 사이트의 정보들을 미리 저장하여 접근 속도 빠르게 함 [Advanced] 의 세부 항목인 [Cache] 클릭 Memory Cache Disk Cache Disk Cache Folder (3) Proxy 설정 사용자 컴퓨터와 외부 사이에서 불필요한 네트워크 접근 줄임 네트워크의 Cache 역할과 보안 담당 [Advanced] 의 세부 항목인 [Proxy] 클릭

22 21 4.4. Internet Explorer  Microsoft 사에서 개발한 Windows 용 웹 브라우저  Active-X 에 의한 동적 HTML 작성이 가능함  Windows 98 에는 Explorer 4.0 이 기본 내장됨  Windows 운영 체제와 통합되어 사용하므로 편리함  JAVA 에 대해 호환성이 좋지 않음  한글이 지원되므로 사용이 간편함  구성 프로그램 Internet Explorer : 웹 브라우저 Outlook Express : 전자 우편 및 뉴스 그룹 리더 Frontpage : 웹 페이지 작성 및 편집 Microsoft Netmeeting, Microsoft Chat, Netshow Player 4.4.1 Internet Explorer 의 개요

23 22 4.4.2 Internet Explorer 의 구성

24 23  제목 표시줄 : 현재 웹 페이지의 제목 표시  메뉴 표시줄 : 모든 명령어들을 포함함  표준 단추 모음 : 자주 사용하는 주 메뉴 명령어 모음  주소 표시줄 : URL 입력, 표시 및 책갈피 기능 포함  링크 모음 (Link Tool Bar) : 사용자 요구에 맞는 url 의 버튼 모음  Company Logo : 웹브라우저 상태 표시, 마이크로소프트사 연결  상태 표시줄 : 전송 완료 여부나 연결 상태 표시  Page Display : 일반 텍스트, 멀티미디어 요소, 하이퍼링크 표시

25 24 4.4.3 웹 페이지 보기 (1) : [ 보기 ] > [ 인터넷옵션 ] > [ 일반 ] 설정된 홈페이지로 이동 (2) 페이지 열기 명령을 이용한 방법  [ 파일 ] 메뉴의 [ 열기...] 선택 (3) 주소표시줄에 URL 입력 / 드롭 다운 버튼 이용 Url 입력 Drop Down Button

26 25 (4) 목록 보기 이용하기 표준 도구모음에서 [ 목록 보기 ] 선택 : 날짜별로 정리됨

27 26 (5) [ 즐겨찾기 ] 이용하기 즐겨찾기 추가 : [ 즐겨찾기 ] 메 뉴에서 [ 즐겨찾기에 추가 ] 선택 [ 즐겨찾기 추가 ] 에서 [ 위치 지 정 ] 을 선택하면 추가할 폴더 선 택 가능 즐겨찾기 목록 정리하기 : [ 즐겨찾기 ] 메뉴의 [ 즐겨찾기 구성 ] 선택

28 27 (6) [ 바로 가기 ] 이용하기 바탕화면에 URL 을 등록하여 빠르게 접속할 수 있게 함 현재 문서에서 우측 마우스 버튼을 누르고 [ 바로 가기 만들기 ] 선택

29 28 4.4.4 도구 모음 (1) 도구 모음 감추기 / 보여주기 [ 보기 ] 메뉴의 [ 도구모음 ] 메뉴에서 해당 도구 모음의 체크 여부 도구모음 위에서 우측 마우스 버튼 누름 도구 모음 Tab 을 드래깅하면 위치 바꿈이 가능함

30 29 (2) 표준단추 모음 뒤로 : 바로 전에 검색했던 페이지로 이동 앞으로 : 다음 페이지로 이동 ([ 뒤로 ] 버튼 이용 후에만 유효 ) 중지 : 현재 읽고 있는 페이지의 전송을 중단함 새로고침 : 현재 읽은 웹 페이지 다시 읽음. 시작 : 등록된 시작 페이지로 이동 검색 : 원하는 검색 엔진 이용을 가능케 함 즐겨찾기 : 미리 등록한 웹 페이지로 이동함 목록보기 : 방문한 사이트들의 날짜별 목록 전체화면 : 화면을 프레젠테이션에 적합하도록 도구줄 등 숨김 메일 : 전자우편 및 뉴스그룹 관리 기능 글꼴 : 국가별 글꼴 선택 가능함 인쇄 : 현재 표시된 페이지 (Frame) 이 인쇄됨 Security : 현재 페이지에 암호를 부여하여 보안을 유지함

31 30 (3) 주소 표시줄 : URL 주소 입력으로 사이트 찾아감 (4) 링크 모음 사용자가 등록한 웹 사이트를 버튼화하여 관리함 주소표시줄에 보이는 아이콘을 링크모음에 드래깅시 버튼으로 등록

32 31 4.4.5 웹 페이지의 정보 저장  화면의 내용을 직접 저장하기 [ 파일 ] 메뉴 > [ 다른 이름으로 저장 ] : HTML/ 텍스트 / 전체 저장 이미지 저장 : 그림에서 우측 마우스 버튼 클릭 후 [ 다른 이름으로 그림 저장 ] 선택 일부 텍스트 저장

33 32 4.4.6 환 경 (Preference) 설정 (1) 계정 설정하기 Explorer 의 일반 환경 설정 : [ 보기 ] 메뉴 > [ 인터넷 옵션 ] 전자우편과 뉴스서버 설정 : Express 에서 [ 도구 ] > [ 계정 ] 선택 (2) 시작 페이지 설정 Explorer 의 [ 보기 ] 메뉴 > [ 인터넷 옵션 ] > [ 일반 ]

34 33 (3) Cache 설정 [ 일반 ] 탭 선택 > [ 임시 인터넷 파일 ] 의 [ 설정 ] 버튼 클릭 [ 저장한 페이지의 새버전 확인 ] 과 [ 임시 인터넷 파일 폴더 ] 설정

35 34 (4) 프록시 서버 설정 [ 인터넷 옵션 ] 대화창에서 [ 연결 ] 탭 선택 [ 설정 ] 항목을 누르고 [ 프록시 서버 사용 ] 에 체크 표시함 프록시 서버 항목에 주소 입력 후 [ 고급 ] 버튼 누름 [Proxy 설정 ] 에서 “ 모든 프로토콜에 같은 Proxy 서버 사용 ” 선택 다른 방법 : [ 연결 ] 메뉴의 [ 연결 마법사 ] 이용 (5) 글꼴 및 언어 설정 [ 인터넷 옵션 ] 의 [ 일반 ] 항목에서 [ 언어 ] 및 [ 글꼴 ] 선택 다양한 나라의 글자를 이용할 수 있음

36 35 4.5 플러그인 (Plug-In)  웹 브라우저의 기능을 확장시켜 주는 Media Play & Presentation 프로그램  새로운 미디어 파일이 출현하면 플러그인을 설치하여 브라우저가 이를 지원할 수 있음  플러그인 프로그램  Animation : SHOCKWAVE  Video : RealPlayer Plus G2, Vivoactive Player, Nettoob Stream, Indeo Driver, Media Player  Sound : RealAudio  Graphics : TruDef, CMX Viewer, Phantone Webimage Viewer  Document : Adobe Acrobat  VRML(Virtual Reality Markup Language) : Cosmo Player, Live 3D  Web Chatting : iCHAT