Transcript 슬라이드 제목 없음

4 장 웹 브라우저의 사용
4장 웹 브라우저의 사용
4.1 World Wide Web의 개요
4.1.1 웹의 개념과 역사
1990년 말 스위스의 CERN 연구센터에서 많은 사용자가 쉽게
사용할 수 있도록 그래픽을 제공하는 환경을 개발
 WWW, Web, World Wide Web, W3 등의 호칭
 Hypertext를 기반으로 한 문서의 집합
 멀티미디어 정보들을 도입하여 사용 - Hypermedia 기반
1
4장 웹 브라우저의 사용
4.1.2 웹의 특징
 문자 뿐만이 아니라 그림, 그래픽, 소리와 영상 등을 포함
 Hypertext : Hyperlink를 이용한 비선형 구조의 텍스트
 Hyperlink와 Hypermedia
• Hyperlink : 문서내 혹은 문서 사이의 이동을 위한 링크
- Hot Word, 문서내 이동 링크, 이미지 / URL 이용 링크 등
• Hypermedia : 텍스트 외의 다른 종류 미디어를 이용한 링크
 HTML (Hyper Text Markup Language)
• 웹의 하이퍼미디어 문서를 작성하고 표현하기 위한 표준 언어
• SGML(Standard Generalized ML) 형식의 텍스트 문서
2
• Tag를 이용하여 문서 형식 작성함
4장 웹 브라우저의 사용
하이퍼미디어 문서를
이용한 인터넷 TV보기
 HTTP (Hyper Text Transfer Protocol)
; 웹 서버와 클라이언트가 HTML 문서를 송수신하기 위해
사용하는 통신규약
 웹 브라우저 (Web Browser)
; HTML 문서를 접근하고 다른 문서를 참조할 수 있도록
3
도와주는 클라이언트 프로그램
4장 웹 브라우저의 사용
HTML과 HTTP의 동작원리
4
4장 웹 브라우저의 사용
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://[email protected]
5
4장 웹 브라우저의 사용
4.2 웹 브라우저의 소개
4.2.1 웹 브라우저란?
 웹 서버의 하이퍼텍스트 문서를 보여주는 클라이언트 P/G
 하이퍼텍스트의 네비게이션을 도와주는 도구
 하이퍼미디어 기능 쉽게 표현 : GUI, 멀티미디어 정보 처리
 인터넷 대중화의 근원
 관련 기술 발전 속도 매우 빠름
 종류에 따라 기능 및 속도 다름
 웹 브라우저의 기본적 기능
 웹 페이지 열기
 책갈피 기능 : 최근 방문한 URL, 자주 방문하는 URL 정보 기억
 웹 페이지의 저장 및 인쇄
 전자우편, 뉴스그룹 클라이언트 프로그램 및 HTML 문서 편집기
 Off-line 및 공동 작업 기능 6
4장 웹 브라우저의 사용
4.2.3 웹브라우저의 종류
 NCSA의 Mosaic : 멀티미디어 최초 지원
 Netscape Communicator : Mosaic의 발전 형태
넷스케이프
커뮤니케이터
웹브라우저
7
4장 웹 브라우저의 사용
 Internet Explorer : 마이크로소프트사에서 개발
 Opera : 작고 빠른 웹 브라우저
인터넷 익스프로러 웹브라우저
8
Operasoftware사의 Opera
4장 웹 브라우저의 사용
4.3. Netscape Communicator
4.3.1 Netscape Communicator의 개요
 버전 4.0 이전까지 Netscape Navigator라고 불림
 웹 브라우저와 전자우편, 뉴스그룹 리더, 저작도구 등 포함
 플랫폼에 상관 없이 지원됨(윈도즈, Maccintosh, X-windows)
 JAVA에 대해 호환성이 좋음
 구성 프로그램
• Navigator : 웹 브라우저
• Messenger : 전자 우편 및 뉴스 그룹 리더(Collabra가 통합됨)
• Composer : 웹 페이지 작성 및 편집
• AOL : 쪽지 기능
• User Profile Notification, Mail
9 NotificationConference, Netcaster
4장 웹 브라우저의 사용
4.3.2 Netscape Navigator의 구성(1)
제목표시줄
메뉴바
검색도구모음
위치도구모음
개인도구모음
웹페이지영역
보안 표시기
전송량 표시
상태표시줄 10
구성요소줄
4장 웹 브라우저의 사용
4.3.2 Netscape Navigator의 구성(2)
 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 : 커뮤니케이터의 각종 구성 요소 모음
11
4장 웹 브라우저의 사용
4.3.3 웹 페이지 보기
(1) Home : [Preference] 메뉴에 설정된 기본 홈페이지로 이동함
(2) 페이지 읽기 명령을 이용한 방법
 [File]메뉴의 [Open Page] 선택
(3) Netsite에 URL 입력하는 방법 / 드롭 다운 버튼 이용하기
Url 입력
12
Drop Down Button
4장 웹 브라우저의 사용
4.3.3 웹 페이지 보기
(4) 방문 기록(History) 이용하기
• [Go]메뉴에서 페이지 제목 선택
• [communicatior]메뉴에서
[History] 메뉴 선택
13
4장 웹 브라우저의 사용
4.3.4 도구모음(Toolbar)
(1) 도구 모음 감추기 / 보여주기
• [View] 메뉴의 [Show]메뉴에서 해당 도구 모음의 체크 여부
• 도구 모음 Tab( ) 사용하기
• 도구모음 위치 바꾸기 : 왼쪽 마우스 버튼으로 드래깅함
• 도구 모음 감추기/보여주기 : 탭을 클릭함
14
4장 웹 브라우저의 사용
(2) 검색도구모음(Navigation Toolbar )
• Back : 바로 전에 검색했던 페이지로 이동
• Forward : 다음 페이지로 이동([Back] 버튼 이용 후에만 유효)
• Reload : 현재 읽은 웹 페이지 다시 읽음.
• Home : [Preference]에 등록된 시작 페이지로 이동
• Search : 원하는 검색 엔진 이용을 가능케 함
• My Netscape : 미리 등록한 개인 홈페이지로 이동함
• Print : 현재 표시된 페이지(Frame)이 인쇄됨
• Security : 현재 페이지에 암호를 부여하여 보안을 유지함
• Stop : 현재 읽고 있는 페이지의 전송을 중단함
15
4장 웹 브라우저의 사용
(3) 위치도구모음(Location Toolbar)
• Bookmarks Quick File : 책갈피 저장 및 관리 기능
• Page Proxy : 이 아이콘을 [Bookmarks]나 [Personal Toolbar]에
드래깅하면 책갈피에 추가됨
• Location Field : URL 입력하여 바로 이동하기
• What’s Related : 현재 웹 사이트와 관련된 다른 웹 사이트 목록 표시
(4) 개인도구모음(Personal Toolbar)
• 사용자가 즐겨 찾는 웹 사이트와 뉴스그룹, 전자우편 및 주소록 관리
16
4장 웹 브라우저의 사용
4.3.5 웹 페이지의 정보 저장
(1) 화면의 내용을 직접 저장하기
• [File] 메뉴 > [Save As..] : HTML/텍스트 형식 저장. 이미지 제외)
• [File] 메뉴 > [Save Frame As..] : 프레임 단위 저장
• 이미지 저장 : 그림에서 우측 마우스 버튼 클릭 후 [Save Image..] 선택
• 일부 텍스트 저장
17
4장 웹 브라우저의 사용
(2) 링크가 지정하는 페이지나 이미지 저장하기
• 링크 위에서 마우스 우축 버튼을 클릭 후 [Save Link As..] 나
[Save Image As..] 선택함
> FTP link의 경우 자동으로 다운로드하여 해당 형식 지원 보조
프로그램이 실행됨
18
4장 웹 브라우저의 사용
4.3.6 환 경 (Preference) 설정
(1) 시작 페이지의 설정
• [Edit] 메뉴 > [Preferences] > [Navigator] 항목 선택
19
4장 웹 브라우저의 사용
(2) Cache 설정
• 자주 방문하는 사이트의 정보들을 미리 저장하여 접근 속도 빠르게 함
• [Advanced] 의 세부 항목인 [Cache] 클릭
• Memory Cache
• Disk Cache
• Disk Cache Folder
(3) Proxy 설정
• 사용자 컴퓨터와 외부 사이에서 불필요한 네트워크 접근 줄임
• 네트워크의 Cache 역할과 보안 담당
• [Advanced] 의 세부 항목인 [Proxy] 클릭
20
4장 웹 브라우저의 사용
4.4. Internet Explorer
4.4.1 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
21
4장 웹 브라우저의 사용
4.4.2 Internet Explorer의 구성
22
4장 웹 브라우저의 사용
 제목 표시줄 : 현재 웹 페이지의 제목 표시
 메뉴 표시줄 : 모든 명령어들을 포함함
 표준 단추 모음 : 자주 사용하는 주 메뉴 명령어 모음
 주소 표시줄 : URL 입력, 표시 및 책갈피 기능 포함
 링크 모음 (Link Tool Bar) : 사용자 요구에 맞는 url의 버튼 모음
 Company Logo : 웹브라우저 상태 표시, 마이크로소프트사 연결
 상태 표시줄 : 전송 완료 여부나 연결 상태 표시
 Page Display : 일반 텍스트, 멀티미디어 요소, 하이퍼링크 표시
23
4장 웹 브라우저의 사용
4.4.3 웹 페이지 보기
(1)
: [보기] > [인터넷옵션] > [일반] 설정된 홈페이지로 이동
(2) 페이지 열기 명령을 이용한 방법
 [파일]메뉴의 [열기...] 선택
(3) 주소표시줄에 URL 입력 / 드롭 다운 버튼 이용
Url 입력
24
Drop Down Button
4장 웹 브라우저의 사용
(4) 목록 보기 이용하기
• 표준 도구모음에서 [목록 보기] 선택 : 날짜별로 정리됨
25
4장 웹 브라우저의 사용
(5) [즐겨찾기] 이용하기
• 즐겨찾기 추가 : [즐겨찾기] 메
뉴에서 [즐겨찾기에 추가] 선택
• [즐겨찾기 추가]에서 [위치 지
정]을 선택하면 추가할 폴더 선
택 가능
• 즐겨찾기 목록 정리하기 : [즐겨찾기] 메뉴의 [즐겨찾기 구성] 선택
26
4장 웹 브라우저의 사용
(6) [바로 가기] 이용하기
• 바탕화면에 URL을 등록하여 빠르게 접속할 수 있게 함
• 현재 문서에서 우측 마우스 버튼을 누르고 [바로 가기 만들기] 선택
27
4장 웹 브라우저의 사용
4.4.4 도구 모음
(1) 도구 모음 감추기 / 보여주기
• [보기] 메뉴의 [도구모음] 메뉴에서 해당 도구 모음의 체크 여부
• 도구모음 위에서 우측 마우스 버튼 누름
• 도구 모음 Tab을 드래깅하면 위치 바꿈이 가능함
28
4장 웹 브라우저의 사용
(2) 표준단추 모음
• 뒤로 : 바로 전에 검색했던 페이지로 이동
• 앞으로 : 다음 페이지로 이동([뒤로] 버튼 이용 후에만 유효)
• 중지 : 현재 읽고 있는 페이지의 전송을 중단함
• 새로고침 : 현재 읽은 웹 페이지 다시 읽음.
• 시작 : 등록된 시작 페이지로 이동
• 검색 : 원하는 검색 엔진 이용을 가능케 함
• 즐겨찾기 : 미리 등록한 웹 페이지로 이동함
• 목록보기 : 방문한 사이트들의 날짜별 목록
• 전체화면 : 화면을 프레젠테이션에 적합하도록 도구줄 등 숨김
• 메일 : 전자우편 및 뉴스그룹 관리 기능
• 글꼴 : 국가별 글꼴 선택 가능함
• 인쇄 : 현재 표시된 페이지(Frame)이 인쇄됨
29
• Security : 현재 페이지에 암호를
부여하여 보안을 유지함
4장 웹 브라우저의 사용
(3) 주소 표시줄 : URL 주소 입력으로 사이트 찾아감
(4) 링크 모음
• 사용자가 등록한 웹 사이트를 버튼화하여 관리함
• 주소표시줄에 보이는 아이콘을 링크모음에 드래깅시 버튼으로 등록
30
4장 웹 브라우저의 사용
4.4.5 웹 페이지의 정보 저장
 화면의 내용을 직접 저장하기
• [파일] 메뉴 > [다른 이름으로 저장] : HTML/텍스트/전체 저장
• 이미지 저장 : 그림에서 우측 마우스 버튼 클릭 후 [다른 이름으로
그림 저장] 선택
• 일부 텍스트 저장
31
4장 웹 브라우저의 사용
4.4.6 환 경 (Preference) 설정
(1) 계정 설정하기
• Explorer의 일반 환경 설정 : [보기] 메뉴 > [인터넷 옵션]
• 전자우편과 뉴스서버 설정 : Express에서 [도구] > [계정] 선택
(2) 시작 페이지 설정
• Explorer의[보기] 메뉴
> [인터넷 옵션]
> [일반]
32
4장 웹 브라우저의 사용
(3) Cache 설정
• [일반] 탭 선택 > [임시 인터넷 파일]의 [설정] 버튼 클릭
• [저장한 페이지의 새버전 확인]과 [임시 인터넷 파일 폴더] 설정
33
4장 웹 브라우저의 사용
(4) 프록시 서버 설정
• [인터넷 옵션] 대화창에서 [연결] 탭 선택
• [설정] 항목을 누르고 [프록시 서버 사용]에 체크 표시함
• 프록시 서버 항목에 주소 입력 후 [고급] 버튼 누름
• [Proxy 설정]에서 “모든 프로토콜에 같은 Proxy 서버 사용” 선택
• 다른 방법 : [연결]메뉴의 [연결 마법사] 이용
(5) 글꼴 및 언어 설정
• [인터넷 옵션]의 [일반] 항목에서 [언어] 및 [글꼴] 선택
• 다양한 나라의 글자를 이용할 수 있음
34
4장 웹 브라우저의 사용
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
35