Embed Size (px)
Citation preview
Chapter 02. 웹의 이해
1. 웹 기술과 웹 브라우저
2. 웹 브라우저 설정
3. 웹 2.0과 웹 3.0
• 웹을 정의할 수 있다.
• 웹 브라우저의 개발 역사와 발전 내용을 숙지한다.
• 하이퍼텍스트와 HTML에 관하여 이해한다.
• 웹 브라우저의 메뉴 체계와 사용 방법을 이해한다.
• 웹 브라우저의 홈페이지 설정과 즐겨찾기 방법을 설명할 수 있다.
• 웹 브라우저의 개인 정보를 위한 도구 사용 방법을 숙달한다.
• 웹 2.0과 차세대 웹인 웹 3.0을 이해한다.
01. 웹 기술과 웹 브라우저
웹 기술의 개발 웹 기술은 유럽입자물리연구소(CERN)에서 처음 구상
최초 목적은 연구에 참여하는 많은 과학자들의 연구성과 공유를 목적으로 함
컴퓨터 초보자인 과학자들이 네트워크에 좀더 쉽게 접근하기 위해 개발
웹은 인터넷의 HTTP, FTP, Finger, 유즈넷, 텔넷, 전자우편, 웹 디스크 등의 자원을 통일된 하나의 인터페이스로제공
웹의 인터페이스는 매우 직관적이고 일관되어 한번 방법을 익히면 초보자도 쉽게 사용가능
[그림 2-1] 유럽입자물리연구소
01. 웹 기술과 웹 브라우저
웹 기술의 특징 최초의 인터넷은 오직 문자로만 서비스되는 텔넷, FTP, 전자메일, 유즈넷 등에 국한
각각의 서비스가 목적이 다르고 작동 방법과 사용되는 프로토콜이 모두 달라서 각각의 기능을 사용하려면 사용법도 매번 따로 익혀야 함
인터넷 서비스는 국가나 지역 단위의 폐쇄적인 서비스가 아니라 전 세계가 범위
웹은 HTTP(HyperText Transfer Protocol)라는 프로토콜을 사용하는 네트워크
웹은 하이퍼텍스트 정보 시스템. 기존의 인터넷 문서나 파일과는 달리 HTML로 구성된 문서와 이들을 서로 연계해주는 링크로 구성된 웹 페이지들의 집합체.
멀티미디어 : 웹은 텍스트 정보뿐만 아니라 그래픽, 오디오, 비디오, 프로그램 파일 등을 하이퍼텍스트 형태로제공
[그림 2-1] 테드 넬슨
하이퍼텍스트(Hyper Text) 1965년 테드 넬슨(Ted Nelson)이 만든 신조어로, 3차원 이상의 공간이라는 뜻의
‘Hyper’와 문서를 의미하는 ‘Text’를 붙여서 만든 합성어
하이퍼텍스트는 다른 문서와 상호 연결된 텍스트
한 문서에서 특정 단어나 이미지를 클릭하면 그것과 연결된 다른 문서가 나타나도록 구성
인터넷의 영자 신문 사이트에서 어려운 영어 단어를 클릭하면 그 단어의 뜻, 사용 예문 그리고 정확한 발음을 제공하는 문서로 이동
01. 웹 기술과 웹 브라우저
HTML(Hyper Text Markup Language) 1990년 팀 버너스 리(Tim Berners Lee)가 최초로 개발
인터넷 서비스의 하나인 웹에서 사용되는 프로그래밍 언어의 한 종류
HTML은 태그(Tag)라는 일종의 명령어로 구성
글자 크기, 글자 색, 글자 모양, 그래픽, 문서 이동(하이퍼링크) 등을 정의하여 웹 서버를 구성하는 전자문서(홈페이지)를 작성하는 용도로 사용
국제표준 SGML(Standard Generalized Markup Language)의 부분 집합으로 정의
별도의 컴파일러가 필요 없으며 작성하기 편리하고 이해하기 쉽다는 장점
태그는 꺾쇠 괄호인 ‘< >’로 표시하며, 일반적으로 시작과 끝을 표시하는 2개의 쌍으로 구성
종료 태그는 슬래시 문자 ‘/’로 시작
[그림 2-2] 팀 버너스 리
01. 웹 기술과 웹 브라우저
웹 브라우저의 개발 역사 주요 웹 브라우저
• 엔콰이어 : 최초의 웹 브라우저
• 모자이크 : 미국 NCSA 개발
• 넷스케이프 : 인터넷의 폭발적 성장에 기여한 브라우저
• 인터넷 익스플로러 : 최근까지 가장 많이 사용되던 브라우저
• 사파리 : 애플 계열 컴퓨터에서 사용
• 크롬 : 전 세계 1위의 웹 브라우저
• 파이어폭스 : 미국 모질라 재단 개발
• 오페라 : 노르웨이 오페라사에서 개발
그밖의 웹 브라우저
• Lynx : 유닉스 환경 브라우저
• 아라크네 : 도스기반의 브라우저
• 삼바 : 매킨토시 애플 계열에서 사용
[그림 2-3] 넷스케이프브라우저
01. 웹 기술과 웹 브라우저
[그림 2-4] 전 셰계 브라우저점유율
웹사이트 통계와 웹 페이지 통계(2012년 통계)
• 전 세계 웹 사이트의 총 수 : 6억 3,400만 개(대략 1011개로 추정)
• 한 해 동안 개설되는 웹사이트의 개수 : 5,100만 개
• 매일 평균적으로 약 1,300만 개의 페이지가 생성
전 세계 웹 페이지 통계(2012년 StatCounter자료)
1위는 구글 크롬(33.59%)
2위는 MS 인터넷 익스플로러(32.85%)
3위는 파이어폭스(22.85%)
국내 웹 페이지 통계
• 1위는 MS 인터넷 익스플로러(68.57%)
• 2위는 구글 크롬(21.59%)
• 3위는 파이어폭스(8%)
[그림 2-5] 국내 브라우저 점유율
웹 브라우저의 동작모델 클라이언트는 접속을 원하는 웹 서버에 HTTP 메시지를 보내 필요한 문서를 요청
서버는 클라이언트에게 이에 해당되는 하이퍼텍스트 문서로 요청에 응답
클라이언트의 웹에서는 하이퍼텍스트 형식의 자료를 이용하기 때문에 이를 해석해주는 웹 브라우저 프로그램이 필요
브라우저는 전송 받은 하이퍼텍스트 문서를 해석하여 사용자의 모니터로 출력
HTML명령어는 데이터베이스에 접근하여 데이터를 입력하거나 수정하는 등의 복잡한 일은 하지 못하므로 CGI 모듈을이용하여 작업
01. 웹 기술과 웹 브라우저
[그림 2-6] 웹 서버와 클라이언트
웹 브라우저의 화면 구성
• ① 주소표시줄, ② 메뉴바, ③ 즐겨찾기 모음, ④ 명령모음 등으로 구성
홈페이지 설정하기
• 익스플로러가 실행될 때 가장 먼저 접속되는 사이트를 홈페이지라고 부름
• 먼저 설정하려는 웹 페이지의 주소인 ‘www.naver.com’을 입력하여 네이버 홈페이지로 이동
• 집 모양의 홈페이지 버튼 옆에 있는 역삼각형 콤보 버튼을 누르면 현재 설정된 페이지를 홈페이지로 설정 가능
02. 웹 브라우저 설정
웹 브라우저 메뉴 [파일] 메뉴
• 새 탭 : [새 탭]을 선택하면 구글 화면 옆에 빈 페이지라는 이름의 새로운 탭을 생성
– 빈 페이지 탭을 선택하고 주소창에서 사이트의 주소를 입력하여 해당 사이트로 이동
• 탭 복제 : 지금 조회하고 있는 것과 똑같은 사이트를 가진 새 탭을 생성
02. 웹 브라우저 설정
[그림 2-10] 새 탭 생성
[보기 메뉴]
• 현재 보이는 웹 페이지 문서의 모습을 조정하는 메뉴
• 브라우저의 메뉴 바가 나오지 않게 수정하고 싶다면 아래의 오른쪽 메뉴에서 [메뉴 모음]을 선택하여 체크 표시를 지움
• 확대/축소 : 페이지의 화면을 확대하거나 축소 (마우스의 스크롤 바를 이용해도 됨)
02. 웹 브라우저 설정
[그림 2-11] 웹메뉴-보기
[즐겨찾기] 메뉴
• 자주 방문하는 사이트의 주소를 저장
• 메뉴의 [즐겨찾기]에서 [즐겨찾기에 추가] 메뉴를 누르면 지금 접속된 사이트가 즐겨찾기 됨
02. 웹 브라우저 설정
[그림 2-12] 즐겨찾기
[도구] 메뉴
• [도구]는 인터넷 보안과 개인정보 관련 사항을 설정
• 검색 기록 삭제 : 자신이 방문했던 사이트의 내용, 인터넷 조회를 위해 다운로드한 자료, 자신이 접속하기 위해 입력한 암호 등을 삭제
• I,n Private 브라우징 : 인터넷을 사용하면서 개인이 조회하고 입력한 각종 정보가 인터넷 임시 파일에 저장되지 않음
• 인터넷 옵션 : 인터넷 옵션은 홈페이지 설정, 보안, 개인 정보, 검색 기록 삭제 등의 기능
02. 웹 브라우저 설정
[그림 2-13] 도구
웹 1.0 인터넷에서 단순히 정보를 모아서 보여주는 기능 위주의 환경
웹 2.0 데이터를 소유한다거나 독점하지 않고, 누구나 손쉽게 데이터를 생산하고 공유할 수 있도록 한 사용자 참여 중심의 인터넷 환경
2004년 10월, 오라일리 미디어사(O’reillyMedia)의 대표인 팀 오라일리(Tim O’reilly)가 사용
블로그(Blog), 위키피디아(Wikipedia)가 대표적인 사이트. 즉 인터넷만 있다면 어느 곳에서도 데이터를 생성, 공유, 저장, 출판 및 비즈니스가 가능
03. 웹 2.0과 웹 3.0
[그림 2-14] 팀 오라일리
[그림 2-15] 위키피디아
웹 3.0 웹 3.0은 웹 2.0을 정의한 이후 미래의 웹은 어떤 점이 달라질 것인지에 대한 상상에서 출발함
웹 3.0은 창조적이고 독보적으로 보이기도 하나, 많은 부분에서 상상 속의 신화처럼 현실과 동떨어진 부분이 존재
‘에이전트라는 컴퓨터 프로그램이 인터넷에 있는 방대한 데이터의 내용을 메타 데이터 등으로 수집한 후 인간에게필요한 정보를 추출해내는 기술(시맨틱 웹 이라고도 함)
시맨틱 웹(Semantic Web)은 컴퓨터가 정보자원의 뜻을 이해하고, 논리적 추론까지 할 수 있게 하는 차세대 지능형웹
시맨틱 웹이 실현되면 컴퓨터가 자동으로 정보를 처리할 수 있어 정보시스템의 생산성과 효율성이 극대화
컴퓨터 스스로 전자상거래를 할 수 있고, 기업의 시스템 통합(SI), 지능형 로봇 시스템, 의료 정보화 등 다양한 분야에 응용 가능
03. 웹 2.0과 웹 3.0
[그림 2-16] 웹3.0
빅데이터의 정의 기존의 정보 처리 기술로서는 다룰 수 없는 막대한 정보, 혹은 정형화되지 않고 발생하는 수많은 불규칙적인 정보
인터넷 데이터의 용량, 발생 주기, 형식 등이 기존 데이터에 비해 지나치게 크기 때문에, 기존의 방법으로는 수집, 저장, 검색, 분석이 어려움
각종 센서와 인터넷의 발달, SNS의 활성화 등으로 인해 송수신되는 데이터가 늘어나면서 이것을 처리하여 유용한 데이터를 추출하려는 노력이 시도됨
03. 웹 2.0과 웹 3.0
[그림 2-17] 빅데이터개념도
빅데이터의 크기(출처 : 매킨지)
• 현재 매달 300억 개의 콘텐츠가 페이스북에서 유통, 1분마다 24시간 분량의 동영상이 유튜브에 업로드됨
• 트위터에서는 매월 1억 1,000만 개의 정보가 트윗(Twit)
• 월마트에는 시간당 100만 개의 거래 정보가 축적
• 전 세계 디지털 공간에 축적된 정보량이 약 12억 테라바이트 (2010년 기준)
빅데이터의 활용
• 구글의 GOOG-411 서비스
• 전염병의 예측
• 볼보의 생산혁명
03. 웹 2.0과 웹 3.0
[그림 2-18] 구글의 411서비스
감사합니다.
