4 장 웹 브라우저의 사용

4.1 World Wide Web의 개요 4.1.1 웹이란? WWW, Web, World Wide Web, W3 등의 호칭 4장 웹 브라우저의 사용 4.1 World Wide Web의 개요 4.1.1 웹이란? WWW, Web, World Wide Web, W3 등의 호칭 Hypertext를 기반으로 한 문서의 집합 멀티미디어 정보들을 도입하여 사용 - Hypermedia 기반 웹의 특징 GUI(Graphic User Interface) 제공으로 사용이 간편함 대부분의 기존 인터넷 서비스를 통합하여 지원 Hypermedia 정보 시스템 1

4.1.2 웹의 기본 개념 Hypertext : Hyperlink를 이용한 비선형 구조의 텍스트 4장 웹 브라우저의 사용 4.1.2 웹의 기본 개념 Hypertext : Hyperlink를 이용한 비선형 구조의 텍스트 Hyperlink와 Hypermedia Hyperlink : 문서내 혹은 문서 사이의 이동을 위한 링크 - Hot Word, 문서내 이동 링크, 이미지 / URL 이용 링크 등 Hypermedia : 텍스트 외의 다른 종류 미디어를 이용한 링크 HTML (Hyper Text Markup Language) 웹의 하이퍼미디어 문서를 작성하고 표현하기 위한 표준 언어 SGML(Standard Generalized ML) 형식의 텍스트 문서 Tag를 이용하여 문서 형식 작성함 2

url HTTP (Hyper Text Transfer Protocol) 웹 브라우저 (Web Browser) 4장 웹 브라우저의 사용 HTTP (Hyper Text Transfer Protocol) ; 웹 서버와 클라이언트가 HTML 문서를 송수신하기 위해 사용하는 통신규약 웹 브라우저 (Web Browser) ; HTML 문서를 접근하고 다른 문서를 참조할 수 있도록 도와주는 클라이언트 프로그램 HTML 웹 브라우저 url Hyperlink/ Hypermedia 3

4.1.3 URL의 구조 형식 : “접근 Protocol://호스트 주소/문서 경로/문서 이름” URL의 종류 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://sunrise@rainbow.yonsei.ac.kr 4

4.1.4 웹의 운영 방식 웹 서버 ; 클라이언트의 요청에 따라 홈페이지의 전송, 검색, 메시지 제공 웹 클라이언트 4장 웹 브라우저의 사용 4.1.4 웹의 운영 방식 웹 서버 ; 클라이언트의 요청에 따라 홈페이지의 전송, 검색, 메시지 제공 웹 클라이언트 ; 사용자의 입력에 따라 웹 서버에게 하이퍼미디어 문서를 요청하는 컴퓨터 또는 프로그램 서비스 제공 과정 웹 클라이언트에서 하이퍼링크 선택 하이퍼링크에 수반된 URL에 대해 HTTP를 이용하여 웹 서버에 접근함 웹 서버에 대해 관련된 문서를 요청함 서버는 텍스트와 관련된 다른 미디어를 클라이언트에 전송함 클라이언트는 브라우저를 이용해서 텍스트와 미디어를 화면상에 표시함 5

4장 웹 브라우저의 사용 웹 서비스의 개념 6

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

4장 웹 브라우저의 사용 다양한 기술을 적용한 웹 페이지의 예 8

4.2.3 하이퍼링크를 이용한 네비게이션 하이퍼링크의 이용 HTML 3.0까지 : 밑줄이 있는 단어, 색깔있는 이미지/ 4장 웹 브라우저의 사용 4.2.3 하이퍼링크를 이용한 네비게이션 하이퍼링크의 이용 HTML 3.0까지 : 밑줄이 있는 단어, 색깔있는 이미지/ 아이콘 등 Dynamic HTML : 어떠한 단어나 이미지도 모두 가능 9

Operasoftware사의 Opera 4장 웹 브라우저의 사용 4.2.4 대표적인 Web Browser들 NCSA의 Mosaic : 멀티미디어 최초 지원 Netscape Communicator : Mosaic의 발전 형태 Internet Explorer : 마이크로소프트사에서 개발 Opera : 작고 빠른 웹 브라우저 Operasoftware사의 Opera 10

4.3. Netscape Communicator 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 NotificationConference, Netcaster 11

4.3.2 Netscape Navigator의 구성(1) 4장 웹 브라우저의 사용 4.3.2 Netscape Navigator의 구성(1) 12

4.3.2 Netscape Navigator의 구성(2) 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.3.3 웹 페이지 보기 (1) Home : [Preference] 메뉴에 설정된 기본 홈페이지로 이동함 4장 웹 브라우저의 사용 4.3.3 웹 페이지 보기 (1) Home : [Preference] 메뉴에 설정된 기본 홈페이지로 이동함 (2) 페이지 읽기 명령을 이용한 방법 [File]메뉴의 [Open Page] 선택 (3) Netsite에 URL 입력하는 방법 / 드롭 다운 버튼 이용하기 Url 입력 Drop Down Button 14

4.3.3 웹 페이지 보기 (4) 방문 기록(History) 이용하기 [Go]메뉴에서 페이지 제목 선택 4장 웹 브라우저의 사용 4.3.3 웹 페이지 보기 (4) 방문 기록(History) 이용하기 [Go]메뉴에서 페이지 제목 선택 [communicatior]메뉴에서 [History] 메뉴 선택 15

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

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

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

4.3.5 웹 페이지의 정보 저장 (1) 화면의 내용을 직접 저장하기 (2) 링크가 지정하는 페이지나 이미지 저장하기 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.3.6 환 경 (Preference) 설정 (1) 시작 페이지의 설정 4장 웹 브라우저의 사용 4.3.6 환 경 (Preference) 설정 (1) 시작 페이지의 설정 [Edit] 메뉴 > [Preferences] > [Navigator] 항목 선택 20

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

4.4. Internet Explorer 4.4.1 Internet Explorer의 개요 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.3 웹 페이지 보기 (1) : [보기] > [인터넷옵션] > [일반] 설정된 홈페이지로 이동 4장 웹 브라우저의 사용 4.4.3 웹 페이지 보기 (1) : [보기] > [인터넷옵션] > [일반] 설정된 홈페이지로 이동 (2) 페이지 열기 명령을 이용한 방법 [파일]메뉴의 [열기...] 선택 (3) 주소표시줄에 URL 입력 / 드롭 다운 버튼 이용 Url 입력 Drop Down Button 25

4장 웹 브라우저의 사용 (4) 목록 보기 이용하기 표준 도구모음에서 [목록 보기] 선택 : 날짜별로 정리됨 26

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

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

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

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

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

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

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

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

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

4.5 플러그인 (Plug-In) 웹 브라우저의 기능을 확장시켜 주는 Media Play & Presentation 프로그램 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.6 웹의 발전과 미래 WWW의 탄생 (1991) : Tim Berners Lee, 하이퍼텍스트 지원 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

Plug-In (1995) JAVA (1995) VRML (1995) 4장 웹 브라우저의 사용 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

웹과 미디어 (1995) 광고 분석 (1995) 4장 웹 브라우저의 사용 HotWired : Andrew Anker 4장 웹 브라우저의 사용 웹과 미디어 (1995) HotWired : Andrew Anker 뉴 저널리즘 : 웹의 시각적 특성과 하이퍼텍스트 기능 활용 웹 광고 실시로 수익 얻음 CNET : Halsey Minor 컴퓨터 전문 채널 케이블 TV와 웹 사이트 병행 운영 멀티미디어 정보 제공과 광고 수익 사업으로 성공 광고 분석 (1995) I/COUNT : Ariel Poler (I/PRO사) 로그 파일 분석으로 접속 통계 프로그램 개발 광고조회수 분석 사업 의 시초임 39

인터넷 사업의 전망 4장 웹 브라우저의 사용 인터넷 사업은 여전히 초기 단계임 4장 웹 브라우저의 사용 인터넷 사업의 전망 인터넷 사업은 여전히 초기 단계임 젊고 참신한 아이디어를 가진 이들이 벤처자금을 이용하여 주도함 고수익을 얻을 수 있으나 전망이 불확실한 경우도 많음 40