Transcript 슬라이드 제목 없음 - Softcomputing Lab, Department

4 장 웹 브라우저의 사용
4장 웹 브라우저의 사용
4.1 World Wide Web의 개요
4.1.1 웹이란?
 WWW, Web, World Wide Web, W3 등의 호칭
 Hypertext를 기반으로 한 문서의 집합
 멀티미디어 정보들을 도입하여 사용 - Hypermedia 기반
 웹의 특징
• GUI(Graphic User Interface) 제공으로 사용이 간편함
• 대부분의 기존 인터넷 서비스를 통합하여 지원
• Hypermedia 정보 시스템
1
4장 웹 브라우저의 사용
4.1.2 웹의 기본 개념
 Hypertext : Hyperlink를 이용한 비선형 구조의 텍스트
 Hyperlink와 Hypermedia
• Hyperlink : 문서내 혹은 문서 사이의 이동을 위한 링크
- Hot Word, 문서내 이동 링크, 이미지 / URL 이용 링크 등
• Hypermedia : 텍스트 외의 다른 종류 미디어를 이용한 링크
 HTML (Hyper Text Markup Language)
• 웹의 하이퍼미디어 문서를 작성하고 표현하기 위한 표준 언어
• SGML(Standard Generalized ML) 형식의 텍스트 문서
• Tag를 이용하여 문서 형식 작성함
2
4장 웹 브라우저의 사용
 HTTP (Hyper Text Transfer Protocol)
; 웹 서버와 클라이언트가 HTML 문서를 송수신하기 위해
사용하는 통신규약
 웹 브라우저 (Web Browser)
; HTML 문서를 접근하고 다른 문서를 참조할 수 있도록
도와주는 클라이언트 프로그램
웹 브라우저
HTML
url
Hyperlink/
Hypermedia
3
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]
4
4장 웹 브라우저의 사용
4.1.4 웹의 운영 방식
 웹 서버
; 클라이언트의 요청에 따라 홈페이지의 전송, 검색, 메시지 제공
 웹 클라이언트
; 사용자의 입력에 따라 웹 서버에게 하이퍼미디어 문서를 요청하는
컴퓨터 또는 프로그램
 서비스 제공 과정
• 웹 클라이언트에서 하이퍼링크 선택
• 하이퍼링크에 수반된 URL에 대해 HTTP를 이용하여 웹 서버에
접근함
• 웹 서버에 대해 관련된 문서를 요청함
• 서버는 텍스트와 관련된 다른 미디어를 클라이언트에 전송함
• 클라이언트는 브라우저를 이용해서 텍스트와 미디어를 화면상에
표시함
5
4장 웹 브라우저의 사용
웹 서비스의 개념
6
4장 웹 브라우저의 사용
4.2 웹 브라우저의 소개
4.2.1 웹 브라우저란?
 웹 서버의 하이퍼텍스트 문서를 보여주는 클라이언트 P/G
 하이퍼텍스트의 네비게이션을 도와주는 도구
 하이퍼미디어 기능 쉽게 표현 : GUI, 멀티미디어 정보 처리
 인터넷 대중화의 근원
 관련 기술 발전 속도 매우 빠름
 종류에 따라 기능 및 속도 다름
4.2.2 웹 브라우저의 일반적 기능
 웹 페이지 열기
 책갈피 기능 : 최근 방문한 URL, 자주 방문하는 URL 정보 기억 관리
 웹 페이지의 저장 및 인쇄
 전자우편, 뉴스그룹 클라이언트 프로그램 및 HTML 문서 편집기
7
 Off-line 및 공동 작업 기능
4장 웹 브라우저의 사용
다양한 기술을 적용한 웹 페이지의 예
8
4장 웹 브라우저의 사용
4.2.3 하이퍼링크를 이용한 네비게이션
 하이퍼링크의 이용
• HTML 3.0까지 :
밑줄이 있는 단어,
색깔있는 이미지/
아이콘 등
9
• Dynamic HTML :
어떠한 단어나
이미지도 모두
가능
4장 웹 브라우저의 사용
4.2.4 대표적인 Web Browser들
 NCSA의 Mosaic : 멀티미디어 최초 지원
 Netscape Communicator : Mosaic의 발전 형태
 Internet Explorer : 마이크로소프트사에서 개발
 Opera : 작고 빠른 웹 브라우저
Operasoftware사의 Opera
10
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
11 NotificationConference, Netcaster
4장 웹 브라우저의 사용
4.3.2 Netscape Navigator의 구성(1)
12
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 : 커뮤니케이터의 각종 구성 요소 모음
13
4장 웹 브라우저의 사용
4.3.3 웹 페이지 보기
(1) Home : [Preference] 메뉴에 설정된 기본 홈페이지로 이동함
(2) 페이지 읽기 명령을 이용한 방법
 [File]메뉴의 [Open Page] 선택
(3) Netsite에 URL 입력하는 방법 / 드롭 다운 버튼 이용하기
Url 입력
14
Drop Down Button
4장 웹 브라우저의 사용
4.3.3 웹 페이지 보기
(4) 방문 기록(History) 이용하기
• [Go]메뉴에서 페이지 제목 선택
• [communicatior]메뉴에서
[History] 메뉴 선택
15
4장 웹 브라우저의 사용
4.3.4 Toolbar
(1) 도구 모음 감추기 / 보여주기
• [View] 메뉴의 [Show]메뉴에서 해당 도구 모음의 체크 여부
• 도구 모음 Tab( ) 사용하기
• 도구모음 위치 바꾸기 : 왼쪽 마우스 버튼으로 드래깅함
• 도구 모음 감추기/보여주기 : 탭을 클릭함
16
4장 웹 브라우저의 사용
(2) Navigation Toolbar
• Back : 바로 전에 검색했던 페이지로 이동
• Forward : 다음 페이지로 이동([Back] 버튼 이용 후에만 유효)
• Reload : 현재 읽은 웹 페이지 다시 읽음.
• Home : [Preference]에 등록된 시작 페이지로 이동
• Search : 원하는 검색 엔진 이용을 가능케 함
• My Netscape : 미리 등록한 개인 홈페이지로 이동함
• Print : 현재 표시된 페이지(Frame)이 인쇄됨
• Security : 현재 페이지에 암호를 부여하여 보안을 유지함
• Stop : 현재 읽고 있는 페이지의 전송을 중단함
17
4장 웹 브라우저의 사용
(3) Location Toolbar
• Bookmarks Quick File : 책갈피 저장 및 관리 기능
• Page Proxy : 이 아이콘을 [Bookmarks]나 [Personal Toolbar]에
드래깅하면 책갈피에 추가됨
• Location Field : URL 입력하여 바로 이동하기
• What’s Related : 현재 웹 사이트와 관련된 다른 웹 사이트 목록 표시
(4) Personal Toolbar
• 사용자가 즐겨 찾는 웹 사이트와 뉴스그룹, 전자우편 및 주소록 관리
18
4장 웹 브라우저의 사용
4.3.5 웹 페이지의 정보 저장
(1) 화면의 내용을 직접 저장하기
• [File] 메뉴 > [Save As..] : HTML/텍스트 형식 저장. 이미지 제외)
• [File] 메뉴 > [Save Frame As..] : 프레임 단위 저장
• 이미지 저장 : 그림에서 우측 마우스 버튼 클릭 후 [Save Image..] 선택
• 일부 텍스트 저장
(2) 링크가 지정하는 페이지나 이미지 저장하기
• 링크 위에서 마우스 우축 버튼을 클릭 후 [Save Link As..] 나
[Save Image As..] 선택함
> FTP link의 경우 자동으로 다운로드하여 해당 형식 지원 보조
프로그램이 실행됨
19
4장 웹 브라우저의 사용
4.3.6 환 경 (Preference) 설정
(1) 시작 페이지의 설정
• [Edit] 메뉴 > [Preferences] > [Navigator] 항목 선택
20
4장 웹 브라우저의 사용
(2) Cache 설정
• 자주 방문하는 사이트의 정보들을 미리 저장하여 접근 속도 빠르게 함
• [Advanced] 의 세부 항목인 [Cache] 클릭
• Memory Cache
• Disk Cache
• Disk Cache Folder
(3) Proxy 설정
• 사용자 컴퓨터와 외부 사이에서 불필요한 네트워크 접근 줄임
• 네트워크의 Cache 역할과 보안 담당
• [Advanced] 의 세부 항목인 [Proxy] 클릭
21
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
22
4장 웹 브라우저의 사용
4.4.2 Internet Explorer의 구성
23
4장 웹 브라우저의 사용
 제목 표시줄 : 현재 웹 페이지의 제목 표시
 메뉴 표시줄 : 모든 명령어들을 포함함
 표준 단추 모음 : 자주 사용하는 주 메뉴 명령어 모음
 주소 표시줄 : URL 입력, 표시 및 책갈피 기능 포함
 링크 모음 (Link Tool Bar) : 사용자 요구에 맞는 url의 버튼 모음
 Company Logo : 웹브라우저 상태 표시, 마이크로소프트사 연결
 상태 표시줄 : 전송 완료 여부나 연결 상태 표시
 Page Display : 일반 텍스트, 멀티미디어 요소, 하이퍼링크 표시
24
4장 웹 브라우저의 사용
4.4.3 웹 페이지 보기
(1)
: [보기] > [인터넷옵션] > [일반] 설정된 홈페이지로 이동
(2) 페이지 열기 명령을 이용한 방법
 [파일]메뉴의 [열기...] 선택
(3) 주소표시줄에 URL 입력 / 드롭 다운 버튼 이용
Url 입력
25
Drop Down Button
4장 웹 브라우저의 사용
(4) 목록 보기 이용하기
• 표준 도구모음에서 [목록 보기] 선택 : 날짜별로 정리됨
26
4장 웹 브라우저의 사용
(5) [즐겨찾기] 이용하기
• 즐겨찾기 추가 : [즐겨찾기] 메
뉴에서 [즐겨찾기에 추가] 선택
• [즐겨찾기 추가]에서 [위치 지
정]을 선택하면 추가할 폴더 선
택 가능
• 즐겨찾기 목록 정리하기 : [즐겨찾기] 메뉴의 [즐겨찾기 구성] 선택
27
4장 웹 브라우저의 사용
(6) [바로 가기] 이용하기
• 바탕화면에 URL을 등록하여 빠르게 접속할 수 있게 함
• 현재 문서에서 우측 마우스 버튼을 누르고 [바로 가기 만들기] 선택
28
4장 웹 브라우저의 사용
4.3.4 도구 모음
(1) 도구 모음 감추기 / 보여주기
• [보기] 메뉴의 [도구모음] 메뉴에서 해당 도구 모음의 체크 여부
• 도구모음 위에서 우측 마우스 버튼 누름
• 도구 모음 Tab을 드래깅하면 위치 바꿈이 가능함
29
4장 웹 브라우저의 사용
(2) 표준단추 모음
• 뒤로 : 바로 전에 검색했던 페이지로 이동
• 앞으로 : 다음 페이지로 이동([뒤로] 버튼 이용 후에만 유효)
• 중지 : 현재 읽고 있는 페이지의 전송을 중단함
• 새로고침 : 현재 읽은 웹 페이지 다시 읽음.
• 시작 : 등록된 시작 페이지로 이동
• 검색 : 원하는 검색 엔진 이용을 가능케 함
• 즐겨찾기 : 미리 등록한 웹 페이지로 이동함
• 목록보기 : 방문한 사이트들의 날짜별 목록
• 전체화면 : 화면을 프레젠테이션에 적합하도록 도구줄 등 숨김
• 메일 : 전자우편 및 뉴스그룹 관리 기능
• 글꼴 : 국가별 글꼴 선택 가능함
• 인쇄 : 현재 표시된 페이지(Frame)이 인쇄됨
30
• Security : 현재 페이지에 암호를
부여하여 보안을 유지함
4장 웹 브라우저의 사용
(3) 주소 표시줄 : URL 주소 입력으로 사이트 찾아감
(4) 링크 모음
• 사용자가 등록한 웹 사이트를 버튼화하여 관리함
• 주소표시줄에 보이는 아이콘을 링크모음에 드래깅시 버튼으로 등록
31
4장 웹 브라우저의 사용
4.4.5 웹 페이지의 정보 저장
 화면의 내용을 직접 저장하기
• [파일] 메뉴 > [다른 이름으로 저장] : HTML/텍스트/전체 저장
• 이미지 저장 : 그림에서 우측 마우스 버튼 클릭 후 [다른 이름으로
그림 저장] 선택
• 일부 텍스트 저장
32
4장 웹 브라우저의 사용
4.4.6 환 경 (Preference) 설정
(1) 계정 설정하기
• Explorer의 일반 환경 설정 : [보기] 메뉴 > [인터넷 옵션]
• 전자우편과 뉴스서버 설정 : Express에서 [도구] > [계정] 선택
(2) 시작 페이지 설정
• Explorer의[보기] 메뉴
> [인터넷 옵션]
> [일반]
33
4장 웹 브라우저의 사용
(3) Cache 설정
• [일반] 탭 선택 > [임시 인터넷 파일]의 [설정] 버튼 클릭
• [저장한 페이지의 새버전 확인]과 [임시 인터넷 파일 폴더] 설정
34
4장 웹 브라우저의 사용
(4) 프록시 서버 설정
• [인터넷 옵션] 대화창에서 [연결] 탭 선택
• [설정] 항목을 누르고 [프록시 서버 사용]에 체크 표시함
• 프록시 서버 항목에 주소 입력 후 [고급] 버튼 누름
• [Proxy 설정]에서 “모든 프로토콜에 같은 Proxy 서버 사용” 선택
• 다른 방법 : [연결]메뉴의 [연결 마법사] 이용
(5) 글꼴 및 언어 설정
• [인터넷 옵션]의 [일반] 항목에서 [언어] 및 [글꼴] 선택
• 다양한 나라의 글자를 이용할 수 있음
35
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
36
4장 웹 브라우저의 사용
4.6 웹의 발전과 미래
 WWW의 탄생 (1991) : Tim Berners Lee, 하이퍼텍스트 지원
 Mosaic (1993.1)
 일리노이 대학의 NCSA 연구소의 학부생인 Marc Andreesen 주도
 GUI와 다양한 플랫폼 지원
 인터넷과 WWW의 대중화를 선도함
 Netscape Navigator (1994.10)
 Netscape Communication사에서 개발
 Jim Clark와 Marc Andreesen, 전 NCSA의 Mosaic팀 중심
 웹 환경 개선 및 신기술 도입 지원 : VRML, JAVA, 검색엔진 등
 웹 검색엔진 (1994)
 Jerry’s World Wide Web Guide (1994)
 Yahoo!(1995) : Jerry Yang, Dave Filo (스탠포드 대학원)
37
 정보 검색도구로서 웹의 활성화와 상업화에 기여함
4장 웹 브라우저의 사용
 Plug-In (1995)
 RealAudio : ProgreesiveNetworks가 시초임
 브라우저에 플러그인 형태로 오디오 지원
 오디오 및 비디오의 압축 기법 활용으로 실시간 방송 및 정보 표현 가능
 JAVA (1995)
 Sun Microsystems : James Gosling 등
 웹 기능 확장, 플랫폼에 독립적인 프로그래밍 가능
 웹 정보 서비스, 보안, 전자상거래, 게임 등에 이용됨
 VRML (1995)
 Virtual Reality Modeling Language : 3D 표현
 Mark Pesce와 SGI를 중심으로 한 각국 전문가 그룹의 작업에 의해 제정됨
 VRML 1.0 (1995) : 정적인 3차원 공간 표현
 VRML 2.0 (1996) : 동적인 3차원 공간과 음향 지원
 VRML97 (1997) : 국제 그래픽 표준화
38
4장 웹 브라우저의 사용
 웹과 미디어 (1995)
 HotWired : Andrew Anker
 뉴 저널리즘 : 웹의 시각적 특성과 하이퍼텍스트 기능 활용
 웹 광고 실시로 수익 얻음
 CNET : Halsey Minor
 컴퓨터 전문 채널 케이블 TV와 웹 사이트 병행 운영
 멀티미디어 정보 제공과 광고 수익 사업으로 성공
 광고 분석 (1995)
 I/COUNT : Ariel Poler (I/PRO사)
 로그 파일 분석으로 접속 통계 프로그램 개발
 광고조회수 분석 사업 의 시초임
39
4장 웹 브라우저의 사용
 인터넷 사업의 전망
 인터넷 사업은 여전히 초기 단계임
 젊고 참신한 아이디어를 가진 이들이 벤처자금을 이용하여 주도함
 고수익을 얻을 수 있으나 전망이 불확실한 경우도 많음
40