월드 와이드 웹 (WWW)

1. 5 월드 와이드 웹(WWW)

2. 학습목표 • 웹의 개념을 이해한다. • 웹 브라우저의 종류와 사용법을 알아본다. • 다양한 웹 브라우저의 특징을 알아본다. • 웹을 이용한 각종 응용 서비스를 살펴본다. • 목차 • 웹 서비스 • 웹 브라우저 • 정보 검색

3. 웹의 출현 • 웹 출현 이전에 인터넷은? • (컴퓨터) 전문가들의 외부 컴퓨터에 접속, 정보를 공유하는 수단 • 주로 telnet, ftp 등이 인터넷 서비스의 대표적 수단이었음 • 일반인이 인터넷을 사용하기에는 어려움이 많았음 • Tim Berners-Lee (스위스 원자연구센터 CERN의 연구원) • 하이퍼링크 기반의 문서 구조를 제안 문서에서 링크를 통해 다른 링크로 연결하는 (당시에는) 혁신적 개념 • 하이퍼링크를 지원하는 HTTP(hypertext transfer protocol)에 대한 RFC 제출 • 위키: http://en.wikipedia.org/wiki/Tim_Berners-Lee • 하이퍼링크와 HTTP는 오늘날 웹이 있게 한 인터넷 역사에서 중요한 기술로 인정 받음

4. 01_웹 서비스 • 웹의 개념과 발전 • 스위스의 입자물리연구소(CERN)에서 원거리의 연구자끼리 새로운 아이디어나 연구 결과 정보를 효과적으로 공유할 수 있는 수단을 찾는 데서부터 시작 • 1989년 CERN에 근무하고 있던 팀 버너스 리(Tim Berners Lee)는 하이퍼텍스트 프로젝트라고 명명된 정보 전달 방법을 제안 • 하이퍼텍스트프로젝트의 최초 과제 : 물리학협회 회원 간의 정보 교환과 의사 소통을 위해 네트워크로 정보들을 연결해 주는 시스템 구축 • 1992년 11월에 모자익(Mosaic) 웹 브라우저를 개발하여 사용자에게 무료로 배포

5. 01_웹 서비스 • 웹의 개념과 발전 • 하이퍼텍스트 문서 • 문서 간 연결이 존재하는 문서 • 하이퍼미디어 • 단순히 텍스트 간의 연결뿐만 아니라 음성, 이미지, 동영상과 같은 다양한 매체가 서로 결합한 문서 형태

6. WWW 관련 용어 (1/5) • 하이퍼텍스트 (hypertext) • 어떤 자료를 가지고 있으면서, 다른 문서로의 링크(hyperlink)를 가지고 있는 문서 • 인터넷 언어인 HTML로 만들어짐 • 확장자는 *.HTML 혹은 *.HTM 임 • 하이퍼미디어(hypermedia) • 텍스트이외에오디오, 그림 또는 동영상 등의 다양한 멀티미디어 정보를 말함 • 하이퍼텍스트와 마찬가지로 하이퍼링크를 통해 다른 문서로의 연결고리를 가짐 • 하이퍼링크 (hyperlink) • 문서간의 이동이나 한 문서 내에서의 이동을 위해 사용되는 링크

7. WWW 관련 용어 (2/5) 하이퍼텍스트(하이퍼미디어)와 하이퍼링크

8. WWW 관련 용어 (3/5) • HTML (HyperText Markup Language) • WWW에서 사용하는 표준 문서 양식 • 하이퍼텍스트를 만드는 수단/언어 • 사용자에게 보여줄 문서의 표현 형식을 문서 내부에 지정 • (소스 보기를 통해 웹 사이트의 HTML 문서를 볼 수 있음, 아래는 동아일보 소스 보기)

9. WWW 관련 용어 (4/5) • 브라우저 (or 클라이언트 프로그램) • 웹에서 사용자 인터페이스를 제공해 주는 프로그램 • HTML 문서를 보여 주며, HTML 문서의 특정부분을 클릭하면 연결된 자료를 보여주는 하이퍼링크 기능을 가짐 • 전에 찾았던 문서로의 이동 등을 처리 • 대표적 예제:MS Explorer, Google Chrome, Firefox, Apple Safari, Opera 등

10. WWW 관련 용어 (5/5) • HTTP (HyperText Transfer Protocol) • WWW 상에서 웹 서버와 웹 클라이언트가 HTML 문서를 송수신하기 위해서 사용하는 프로토콜(통신규약) • URL (Uniform Resource Locator) • 웹 서비스에서 제공되는 여러 가지 자료들에 대한 접근형식, 존재하는 위치 및 자료의 이름을 표시하는 역할 • 인터넷 상의 모든 자료가 갖는 유일한 주소 접근 프로토콜://IP 주소 또는 도메인 이름/문서의 경로/문서이름 예)http://cs.kangwon.ac.kr/~ysmoon/courses.html

11. 01_웹 서비스 • 웹의 특징 • 복잡한 정보를 빠르고 체계적으로 이용가능함 • 예 1) 영어 소설을 읽다가 단어를 모를 경우, 링크 연결 혹은 키워드 검색으로 신속히 해당 단어의 의미를 확인할 수 있음 • 예 2) 해외여행을 가기 전에, 여행지 정보를 웹 검색을 통해 확인하고, 숙박, 교통편 등의 예약이 가능함 • 인간에게 친숙한 그래픽으로 구현됨 • 텍스트, 그래픽, 사운드, 동영상 등을 동시에 표현할 수 있음 • WYSWYG(What You See What You Get) 환경을 제공하여 남녀노소 인터넷/웹 사용이 편리함

12. 01_웹 서비스 • 웹의 특징 • 인터넷을 통하여 정보를 제공하는 방법을 변화시킴 • 과거: 특정 서버(예: 도서관)에 정보와 데이터가 집중됨 • 현재: 정보 및 데이터가 다양한 제공자 서버에 분산되어 관리됨 예: 온라인 서점 – 저자 홈페이지 – 대학 도서관 – 도서 평가 사이트 • 인터넷을 통하여 제공되는 응용 서비스의 형태를 변화시킴 • 과거: 이메일, 퍼일 전송(FTP), 뉴스 그룹 등이 별도 서버에서별도 서비스로 제공됨 • 현재: 하이퍼텍스트, 하이퍼미디어 등을 통해통합 관리가 가능함

13. 01_웹 서비스 • 웹 서비스 동작 과정 ① 사용자는 해당 서버에 접속하여 TCP/IP 연결 설정하고 ②HTTP를 통하여 문서를 요청. 서버는 자신의 파일 시스템에서 요청한 문서를 찾아서 ③HTTP를 통하여 클라이언트에 전송 ④ 전송이 끝나면 TCP/IP 접속 해제

14. INTERNET 웹 서비스 (홈페이지) 작동 원리 ① 웹 브라우저에서 URL 입력 ④ 웹 브라우저에 표시 웹 브라우저 웹 브라우저 ② 입력된 URL주소의 웹서버에게 요청 ③ 요청받은 객체 전송 웹서버

15. 웹 호스트 서버의 작동 원리 호스트는 필요한 통신 프로토콜을 관리하고, 웹 사이트를 생성하기 위한 페이지와 관련 소프트웨어를 가지고 있음 서버 소프트웨어는 호스트에 상주하면서 페이지를 지원하고 클라이언트 웹 브라우저로부터 오는 요구에 응함 서버 소프트웨어에는 데이터베이스 서버, FTP 서버, 네트워크 서버 등이 있음 일반적으로, 유닉스, 윈도우 NT, 리눅스, 매킨토시 운영체제 등을 사용 브라우저에 정보를 보내는 일 이외에, JSP(Java Server Page), ASP(Active Server Page)를 수행하기도 함

16. JSP, ASP, PHP?

17. 학습목표 • 웹의 개념을 이해한다. • 웹 브라우저의 종류와 사용법을 알아본다. • 다양한 웹 브라우저의 특징을 알아본다. • 웹을 이용한 각종 응용 서비스를 살펴본다. • 목차 • 웹 서비스 • 웹 브라우저 • 정보 검색

18. 02_웹 브라우저 • 인터넷 익스플로러 • 1995년에 만들어져 운영 체제에 포함되어 배포 • 버전 2에서 SSL 프로토콜을, 버전 3에서 ActiveX를 구동할 수 있게 되면서 많은 사용자 확보 • 현재까지 지속적으로 버전업을 하여 기능을 개선 • 특징 • ActiveX 컨트롤러, 비주얼베이직 스크립트, 확장 규약, 자바 컴파일러 JIT( Just In Time), HTML 레이아웃 등

19. 02_웹 브라우저 • 웹 브라우저 검색 공급자 선택 창에서 검색 공급자 [Naver]를 선택한다. 실습 5-1 사용자가 원하는 검색 공급자 추가하기 1 [그림 5-9] 인터넷 익스플로러8 검색 공급자 추가 창

20. 02_웹 브라우저 • ‘이 공급자를 기본 검색 공급자로 지정(M)’을 체크하고 <추가> 버튼을 선택한다. 2 [그림 5-10] 인터넷 익스플로러8 검색 공급자 추가 확인 창

21. 02_웹 브라우저 • 다음과 같이 [Naver]가 사용자가 입력한 키워드를 검색할 기본 검색 공급자로 지정한다. 3

22. 02_웹 브라우저 • 다른 검색 공급자를 이용하여 검색하려면 검색어 입력 창에서 다음과 같이 검색 공급자를 선택할 수 있다. 4

23. 02_웹 브라우저 • 오른쪽의 콤보 버튼을 클릭하면검색 공급자에 대해 몇 가지 설정을 할 수 있다. 먼저 검색 공급자 추가 방법을 알아보자. • [추가 검색 공급자 찾기…]클릭 5 6

24. 02_웹 브라우저 • 다음 화면에서 [Google]을 추가 검색 공급자로 추가 7

25. 02_웹 브라우저 • Google 검색이 추가된 것을 확인한다. 8

26. 02_웹 브라우저 • 검색창의 오른쪽 콤보버튼을 클릭하여 [검색 공급자 관리]를 선택한다. 실습 5-2 검색 공급자 관리하기 1

27. 02_웹 브라우저 • 검색 공급자 관리 화면이 나타난다. 2 [그림 5-19] 인터넷 익스플로러8 기본 검색 공급자 변경 창 1

28. 02_웹 브라우저 • 다음과 같이 Google을 선택한 후 [기본값으로 설정]을 클릭하면 기본 검색 공급자를 Google로 변경할 수 있다. 3 [그림 5-20] 인터넷 익스플로러8 기본 검색 공급자 변경 창 2

29. 02_웹 브라우저 • 검색창의 오른쪽 콤보버튼을 클릭하여 [이 페이지에서 찾기…]를 선택한다. 실습 5-3 현재 접속한 웹 페이지에서 키워드 검색하기 1

30. 02_웹 브라우저 • ‘internet’이라는 키워드를 검색하고 [이 페이지에서 찾기…]를 선택한 결과 화면이다. 2 [그림 5-22] 인터넷 익스플로러8 현재 페이지에서‘internet ’키워드 검색 결과

31. 02_웹 브라우저 • 다음은‘you’라는 키워드를 검색한 결과이다. 3 [그림 5-23] 인터넷 익스플로러8 현재 페이지에서‘you’키워드 검색 결과

32. 02_웹 브라우저 • [즐겨찾기]-[즐겨찾기에 추가…]를 클릭한 후 [즐겨찾기 모음에 추가]를 선택한다. 실습 5-4 즐겨찾기 도구 모음에 추가, 삭제하기 1

33. 02_웹 브라우저 • 즐겨찾기 도구 모음에 현재 사이트가 등록된 것을 확인할 수 있다. • 추가된 즐겨찾기 도구는 [즐겨찾기]-[즐겨찾기 모음]에서 마우스 오른쪽 버튼을 클릭하거나 해당 도구 모음에서 마우스 오른쪽 버튼을 클릭하여 삭제할 수 있다. 2 3

34. 02_웹 브라우저 • 임의의 기사 위에 마우스를 놓고 마우스의 휠을 누른다. (오른쪽 버튼 후 새탭에서 열기) 실습 5-5 새로운 탭에 링크 열기 1 [그림 5-40] 인터넷 익스플로러8 링크 열기

35. 02_웹 브라우저 • 원래의 문서 탭 바로 옆에 새로운 탭으로 연결된 기사를 보여 준다. 2 [그림 5-41] 인터넷 익스플로러8 새 탭 연결 결과 화면

36. 02_웹 브라우저 • InPrivate브라우징은 웹 서핑 과정에서의 방문 기록, 쿠기 등을 남기지 않는 기법이다. • 공공장소에서 웹 브라우저를 사용할 때, 프라이버시 보호를 위해 유용하다. 실습 5-6 InPrivate브라우징이란?

37. 02_웹 브라우저 • [안전] 도구에서 [InPrivate브라우징]을 클릭한다. (IE10에서는 [도구]에서 선택) 실습 5-7 InPrivate 브라우징 열기 1

38. 02_웹 브라우저 • 주소 표시줄 앞에 표시가 있는 브라우징 창이 새롭게 열린다. • 이 상태에서 브라우저를 이용하여 웹에 접속하면 사용자 정보를 저장하지 않는다. InPrivate 브라우징 모드에서는 사용자가 사용 중인 외부 툴바도 사용을 중지한 상태로 실행된다. 2 3

39. 02_웹 브라우저 • [Google 크롬 테마…]를 클릭한다. (크롬 실행 후, 우측상단 탭에서 [설정] 선택) 실습 5-7 테마 변경하기 1 [그림 5-50] 테마 변경하기 1

40. 02_웹 브라우저 • 주소 표시줄 앞에 표시가 있는 브라우징 창이 새롭게 열린다. 2 [그림 5-51] 테마 변경하기 2

41. 02_웹 브라우저 • 다음과 같이 테마가 변경된다. 3 [그림 5-51] 테마 변경하기 2

42. 02_웹 브라우저 • 주소 표시줄에 검색어‘파이어폭스’를 입력한다. 실습 5-8 바로 검색하기 1 [그림 5-53] 구글 크롬 주소 표시줄에서 검색어 입력하기

43. 02_웹 브라우저 • ‘파이어폭스’에 대한 검색 결과 페이지를 보여 준다. 2 [그림 5-54] 구글 크롬 주소 표시줄에 검색어를 입력한 결과

44. 02_웹 브라우저 • 기본 검색엔진을 변경하려면 설정을 클릭하여 옵션을 선택한다. (우측상단 – [설정]) 3 [그림 5-55] 기본 검색 엔진 변경 설정

45. 02_웹 브라우저 • 기본 검색엔진에서 원하는 검색엔진을 선택한다. 4 [그림 5-56] 기본 검색엔진 선택 창

46. 학습목표 • 웹의 개념을 이해한다. • 웹 브라우저의 종류와 사용법을 알아본다. • 다양한 웹 브라우저의 특징을 알아본다. • 웹을 이용한 각종 응용 서비스를 살펴본다. • 목차 • 웹 서비스 • 웹 브라우저 • 정보 검색

47. 03_정보 검색 • 포털 사이트 • 인터넷에 있는 수많은 정보에 접속하기 위한 관문 역할을 하는 사이트 • 초기에는 정보 검색과 메일 위주의 서비스를 제공했으나, 각각의 포털 사이트는 더 많은 접속자를 확보하기 위하여 뉴스, 블로그, 커뮤니티, 사전, 지도 등 다양한 서비스를 제공 • 가장 널리 이용되고 있는 사이트 : 구글(Google),MSN, Yahoo • 국내의 대표적인 포털 사이트 : NAVER, Daum, Nate

48. 03_정보 검색 • 포털은 어떻게 돈을 벌까? • 배너 등을 이용한 광고 수익 • 클릭 당 광고 수익

49. 03_정보 검색 • 검색엔진 • 사용자가 인터넷에서 자신이 원하는 정보만을 빠른 시간에 찾기란 결코 쉬운 일이 아니기 때문에 웹 서비스를 통해 원하는 정보를 찾을 수 있는 수단이 필요해졌고, 이를 해결하기 위한 도구로 검색엔진(Search Engine)이 사용 • 검색엔진이란 수많은 정보를 분류, 정리하여 사용자에게 필요한 정보가 담긴 사이트를 찾아 주는 서비스를 말함

50. 03_정보 검색 • 검색엔진구분: 주제별, 키워드, 메타 엔진 • 주제별 검색엔진 • 특정 주제별로 각 페이지를 분류하여 정리해 놓은 검색엔진 • 검색어를 잘 모르거나 정보를 광범위하게 찾을 때 이용 • 장점 : 찾고자 하는 것에 대해 아무런 지식이 없어도 원대분류 정도만 알아도 찾을 수 있음 • 단점 : 원하는 정보를 얻기까지 여러 단계를 거쳐야 하므로 중간에 길을 잘못 들어서면 엉뚱한 정보만 찾을 수도 있음 • 주제별 검색엔진의 예 • 네이트: http://www.nate.com네이버: http://www.naver.com