Transcript 인터넷이란?(3) - Prof. Byoungcheon Lee's Homepage

01 : 준비학습: 인터넷 과 웹
학습 내용
01장. 인터넷 이해하기
02장. 홈페이지를 만들기 전에
01 :
01장. 인터넷 이해하기
학습 내용
인터넷이란
도메인명과 URL
웹 페이지 동작 원리
웹 문서 제작 표준 언어의 변천 과정
웹 브라우저 소개
Section
01
인터넷과 웹
인터넷 이해하기 – 인터넷이란?
인터넷이란?
망(Network)들의 망, 망들의 결합체
Section
01
인터넷과 웹
인터넷 이해하기 – 인터넷이란?
1969
1972
1974
1975
1979
1983
1991
1993
1994
1995
미 국방성 알파넷(ARPANET) 등장
이메일 탄생
인터넷(Internet) 용어 처음 사용
TCP/IP 개발, 시운전 개시
USENET 구축(net* 뉴스그룹 생성)
Apple, LISA 컴퓨터(GUI 탑제 최초 PC)발표
팀 버너스 리에 의해 WWW 개발
상용 인터넷 서비스 개시
넷스케이프 네비게이터 1.0 발표
본격 상업화, 대중화, 정보 고속화
Section
01
인터넷과 웹
인터넷 이해하기 – 인터넷이란?
WWW : 문자, 이미지 등을 포함한 문서를 제공
FTP : 파일 송수신 서비스
E-Mail : 메일 서비스
Usenet : 뉴스그룹 서비스
Telnet : 원격지 접속
Chatting : 채팅 서비스
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[WWW와 HTML]
www(World-Wide-Web)
HyperText
HyperLink
HTML(Hyper-Text Markup language)


<Tag>로 구성
확장자 htm, html
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[IP 주소와 도메인명]
IP 주소: 컴퓨터 고유 넘버
도메인명(Domain Name): 서버이름
DNS(Domain Name Server): 도메인 이름
을 IP 주소로 변경하기 위해 사용된다.
사용자 PC의
웹 브라우저
DNS
웹 서버
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[기관의 성격코드]
COM : company, 영리를 목적으로 하는 업체
NET : network,네트워크 관리 기구
EDU : education, 교육기관
GOV : government, 정부기관
MIL : military, 군사기관
ORG : organization, 비영리기관
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[국가코드]
Kr 대한민국
Jp 일본
Uk 영국
De 독일
Tw 대만
Ru 러시아
Fr 프랑스
Ca 캐나다
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[KrNIC 도메인 기관코드]
Ac : academy, 교육기관
Co : company, 영리를 목적으로 하는 업체
Go : govermment, 정부기관
Ne : network, 네트워크 관리 기구
Or : organization, 비영리기관
Re : research, 연구기관
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[URL]
Uniform Resource Locator
형식
프로토콜://호스트주소[포트번호]/파일의 전체경
로/파일이름
예
http://www.mbc.co.kr/news/news7.htm
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[프로토콜]
네트워크에서 사용하는 인터넷 표준 규약
TCP/IP : 프로토콜의 하나
인터넷에 참여하기 위해서 준수해야 할 규칙
HTTP(HyperText Transfer Protocol)
프로토콜 : http, gopher, wais, ftp, news,
mailto, telnet
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[포탈 사이트]
포탈은 으리으리한 집의 현관이나 정문 또는
터널의 입구를 가리키는 말이다.
최근 웹사이트의 관문(關門)이라는 의미를 갖
는 새로운 용어로 사용되고 있다.
사용자들이 웹에 접속할 때 제일 먼저 나타나
거나 가장 많이 머무르는 사이트로 웹 서핑
을 시작하는 주요 사이트를 의미한다.
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[스팸 메일]
허락받지 않고 아무에게나 마구잡이로 살포하
는 상업적 광고메일
일명 UCE(Unsolicited Commercial E-mail)
Junk(잡동사니) 메일이라고도 한다.
스팸 메일은 전자 우편 주소를 가진 사람에게
무차별적으로 배달되어 원치 않는 사람들에
게 많은 시간과 비용 낭비를 초래한다.
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[이메일]
형식




사용자ID@인터넷 서비스 업체의 컴이름
[email protected]
[email protected]
[email protected]
계정(Account)
SMTP : 보내는 메일 서버
POP3 : 받는 메일 서버 (Post Office Protocol3)
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[FTP 사이트]
File Transfer Protocol의 약자
FTP 프로그램 : Ws-Ftp, CuteFtp, LeapFtp
웹브라우저로 개인계정에 업로드하는 법

ftp://사용자아이디:비밀번호@호스트Full주소
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[유즈넷(USENET)]
게시판에서 주제별 토론 및 회의를 하는 곳
주제별로 분류된 일련의 “뉴스그룹”으로 구성
뉴스그룹 이름


Han.announce : 모든 한국 유즈넷 독자 대상
Han.test : 뉴스 포스팅 시험
ISP별 뉴스서버(NNTP)


신비로 news.shinbiro.com
유니텔 news.unitel.co.kr
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[분야별 한글뉴스그룹 목록A]
Han.binaries : binary 파일을 게시팔 수 있는 그룹
Han.comp.lang : 컴퓨터 언어
Han.comp.os : Operating System
Han.comp.periphs : 컴퓨터 주변장치
Han.comp.sys : 컴퓨터 시스템
Han.comp.www : 인터넷
Han.net : 네트워크
Han.news : 유즈넷(뉴스그룹)
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[분야별 한글뉴스그룹 목록B]
Han.arts : 예술
Han.rec : Recreation
Han.school : 학교
Han.sci : 과학
Han.sco : 사회
Han.soc.religion : 종교
Han.talk : 토론
Han.misc : 기타 그룹
Section
01
인터넷과 웹
인터넷 이해하기 – 도메인명과 URL
[플러그인(Plus-In)]
인터넷 익스플로러와 같은 웹 브라우저를 도
와 웹 브라우저 자체의 기능인 것처럼 만들
어주는 도우미 프로그램이다.
분명히 다른 회사에서 만들었고, 따로 설치를
해주어야 하지만 웹 브라우저 내에서 움직이
기 때문에 외부 프로그램이라는 인식을 할
수 없을 정도이다.
매크로미디어의 쇽 웨이브와 플래시가 그 대
표적인 예다.
Section
01
인터넷과 웹
인터넷 이해하기 – 웹 페이지 동작 원리
[클라이언트측 페이지 동작 원리]
2. Response(응답)
LINUX or
Window
1. Request(요청)
20
00
3. 해석
Client(Local Computer)
사용자 PC
Web Server(Remote Computer)
서버
Section
01
인터넷과 웹
인터넷 이해하기 – 웹 페이지 동작 원리
[서버측 페이지 동작 원리]
ㄴ 00
5. 해석
Client(Local Computer)
사용자 PC
LINUX or
Window
1. Request(요청)
20
Web Server(Remote Computer)
서버
4. 응답
2. 해석
일반 HTML 문서
3. 변환
IIS(ASP.DLL)
Section
01
인터넷과 웹
인터넷 이해하기 – 웹 페이지 동작 원리
구분
문서
클라이언트측 페이지
서버측 페이지
정적 페이지(static page)
동적 페이지(dynamic page)
처리 방식
수동적, 고정적
사용자의 입력을 실시간으로 처리
통신 방식
클라이언트에서 고정페이지
를 전송받는 단방향 통신
서버와 클라이언트 사이의 양방향
통신
해석위치
클라이언트측
서버측
웹사이트
운영면
내용을 변경하려면 일일이
편집해야 하므로 비효율적.
내용이 추가되어도 문서를 재편집
할 필요가 없어 효율적.
활용 분야
내용이 변하지 않는 일반 문
서
내용이 수시로 변하는 게시판, 설
문조사, 회원가입, 검색엔진 등
제작 기술
HTML, CSS, 자바스크립트
PHP, ASP, JSP
Section
01
인터넷과 웹
인터넷 이해하기 – 웹 문서 제작 표준 언어의 변천 과정
SGML(Standard Generalized Markup Language)

1986년 ISO에서 지정한 문서 처리 표준의 하나이며, 프
로그래밍 언어는 아니다.
HTML(Hyper Text Markup Language)


1989년도에 CERN에 있던 팀 버너스 리가 개발.
웹에서 사용하는 표준 언어로 HTML 4.0은 HTML의 최
신 버전이다.
XML(eXtensible Markup Language)

1996년 W3C에서 제안하였으며 SGML의 장점과 HTML
의 장점을 수용하여 만든 언어다.
XHTML (Extensible Hypertext Markup Language)
VRML(Virtual Reality Modeling Language)
Section
01
인터넷과 웹
인터넷 이해하기 – 웹 문서 제작 표준 언어의 변천 과정
구분
태그 사용
문서의 재사용
SGML
HTML
XML
사용자 정의 불가능, 사용자 정의 가능, 무제 사 용 자 정 의 가 능 ,
한적
SGML보다는 제한적
제한적
불가능
가능
가능
응용 분야
단순한 구조의 문서
방대한 내용과 구조를 SGML과 동일
및 내용이 길지 않은
요하는 기술적인 문서
웹상의 교환문서
문서
문서작성
간단하고 용이함
논 리 구 조 작 성 의 매우 복잡함
어려움
문서검색
정확한 검색 가능
효과적인 검색이 어려
문서 구조에 대한 검색 SGML과 동일
움
가능
링크
출력형식 언어
HTML
CSS
SGML 을 단 순 화 시 켜
편리하게 작성 가능
HyTime
XLL
DSSSL
XSL
Section
01
인터넷과 웹
인터넷 이해하기 – 웹 브라우저
[종류]
NCSA의 모자이크
오페라 소프트웨어(Opera Software)의 Opera
마이크로소프트의 인터넷 익스플로러
AOL의 넷스케이프 네비게이터
선 마이크로 시스템의 Hot Java
Section
01
인터넷과 웹
인터넷 이해하기 – 웹 브라우저
구분
사이트 동시 접속
링크 문서 새 창으로 열기
원하는 단어를 찾을 때
자주 방문하는 사이트 등록
원본 문서 다시 읽어오기
주소 창 바로가기
페이지 다운
페이지 업
현재 페이지 저장
이미지 파일 저장
링크 주소 복사
소스보기
즐겨찾기 메뉴 관리
환경설정
메뉴
[파일 → 새로 만들기 → 창]
단축 키
Ctrl + N
-
Shift+링크클릭
[편집 → 이 페이지에서 찾기]
Ctrl + F
[즐겨찾기 → 즐겨찾기에 추가]
Ctrl + B
[보기 → 새로 고침]
F5
[파일 → 다른 이름으로 저장]
ALT + D
Space
Shift + Space
-
팝업 메뉴[다른 이름으로 그림저장]
팝업 메뉴 [바로가기 복사]
[보기 → 소스]
[파일 → 가져오기 및 내보내기]
[도구 → 인터넷 옵션]
-
Section
01
인터넷과 웹
인터넷 이해하기 – 정보검색
[정보검색법]
검색엔진을 이용한 검색방법
데이터베이스 사용방법
원하는 사이트로 바로 접속하는 방법
Section
01
인터넷과 웹
인터넷 이해하기 – 정보검색
[문제접근방법]
문제를 분석하고 이해한다.
단서를 찾아 정리한다. (고유명사, 구 유리)
문제 해답을 찾기 위한 접근 방법을 결정한다.
(검색엔진, 데이터베이스, 기타방법)
검색결과에서 문제에 가장 근접하게 링크된
정보가 요약된 사이트로 이동한다.
정답을 확인한다.
Section
01
인터넷과 웹
인터넷 이해하기 – 정보검색
[검색엔진이란?]
검색엔진은 사용자가 요구하는 정보를 ‘검색로
봇’을 이용하여 정보를 찾아 제공한다.
검색로봇의 DB구축으로 인한 네트워크 트래픽
이 발생하므로 서버의 성능이 저하되는단점
도 있다.
Section
01
인터넷과 웹
인터넷 이해하기 – 정보검색
[검색엔진의 종류]
주제별 검색 : yahoo.com
단어별 검색 : altavista.com
전문 데이터베이스



프로그램 검색 : Download.com
영화전문검색 : imdb.com
음악정보검색 : worldwidemusic.com
01 :
2장. 홈페이지를 만들기 전에
학습 내용
홈페이지 제작 목적과 제작 과정
홈페이지 제작 관련 기술들
홈페이지 제작에 필요한 준비물
어떤 웹 에디터를 사용할 것인가?
에디터플러스 설치와 환경설정
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 홈페이지 제작 목적과 과정
[홈페이지 제작 목적]
자기 만족 및 개인 홍보
기업 홍보 및 물건 판매
정보 공유
인터넷 프로그래밍의 이해
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 홈페이지 제작 목적과 과정
[홈페이지 제작 과정]
기획 단계

홈페이지를 제작하기 전에 제작 목적, 주제, 대상층 등을
명확히 정해야 한다.
제작 단계

홈페이지 기획이 끝나면 실제로 홈페이지를 제작한다.
배포와 관리, 평가 단계

홈페이지 제작이 완료되면 이제 자신의 홈페이지를 홍보
할 차례다. 하이홈, 네이버 등의 계정을 받아 홈페이지를
올린다. 또한 홈페이지를 올린 후 원하는 대로 제작되었
는지, 효용성 등을 체크해 본다.
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 홈페이지 제작 목적과 과정
[대상층과 서비스 제공 방식]
항목
설명
전체적인 구성
텍스트 위주, 그래픽 위주
용도
학술 연구, 교육 학습, 개인, 오락, 여가 생활
유형
공공기관, 교육용, 상업용, 개인용
주요 고객
계층, 연령, 배경, 관심 분야, 기술, 이용 능력 수준
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 홈페이지 제작 관련 기술
웹 프로그래밍 분야




HTML
CSS
자바스크립트
CGI, ASP, PHP, JSP
웹 디자인 분야



일러스트레이터
포토샵
플래시
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 홈페이지 제작 준비물(필수)
준비물
정의
종류
우리가 사용할
도구
웹 에디터
홈페이지 문서를 제작하
는툴
메모장, 에디트플러스,
나모, 드림위버 등
에디트플러스
웹 브라우
저
홈페이지 문서를 보여주
는툴
인터넷 익스플로러, 넷
스케이프 네비게이터,
오페라 등
인터넷 익스플로
러
계정
홈페이지 공간을 할당해
주고 홈페이지 파일을 올
릴 수 있도록 서비스해 주
는 업체에 가입하는 것
네이버, 드림위즈, 네
티앙, 하이홈 등
네이버
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 홈페이지 제작 준비물(선택)
FTP 전용 프로그램
웹 서버
이미지 제작 툴
애니메이션 제작 툴
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 무료 계정 제공 사이트
제공 회사
사이트 주소
제공 용량
네이버
http://www.naver.com
25M
컴내꺼
http://www.com.ne.kr
50M
하이홈
http://www.hihome.com
50M
드림위즈
http://www.dreamwiz.com
5M
네이트
http://www.nate.com
12M
신비로
http://www.shinbiro.com
10M
네띠앙
http://www.netian.com
20M
한미르
http://www.hanmir.com
20M
오마이포탈
http://www.ohmyportal.com
100M
홈피
http://www2.hompy.com
20M
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 어떤 웹 에디터를 사용할 것인가
[웹 에디터의 종류]
소스 위주의 웹 에디터



메모장
에디터플러스
홈사이트
편집 위주의 웹 에디터


나모
드림위버
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 어떤 웹 에디터를 사용할 것인가
[소스 위주의 웹 에디터]
종류
설명
메모장
흰색 배경에 검은색 글자로만 소스를 코딩하므로 간단한 소스
의 경우 문제 없지만 복잡한 소스를 코딩할 경우 불편하다.
에디트
플러스
홈페이지 소스를 구성하고 있는 태그, 속성, 값의 색상을 다양
하게 구별하여 표시하므로 복잡한 소스를 코딩하더라도 원하는
곳을 쉽게 찾아볼 수 있어 편리하다.
홈사이트
에디터플러스와 같이 태그, CSS, 자바스크립트 소스의 색상을
다양하게 표현해 주므로 소스 편집이 훨씬 수월하다. 특히 태그
속성 자동 생성 기능이나 위자드(Wizard) 기능이 막강하여 복잡
한 태그도 쉽게 생성, 편집할 수 있다.
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 어떤 웹 에디터를 사용할 것인가
[편집 위주의 웹 에디터]
구분
장/단점
내용
나모
장점
- 국산품이라 우리나라 정서에 맞고 메뉴가 한글로
구성되어 있어 쉽게 배울 수 있다.
- 초보자들도 쉽게 자바스크립트를 사용할 수 있도록
자바스크립트 마법사를 제공한다.
- 나모 자체로 이미지를 간단히 편집할 수 있다.
단점
- HTML 소스가 지저분하게 생성되는 편이다.
장점
- 초보자들도 쉽게 자바스크립트를 사용할 수 있도록 비
헤비어(Behavior)를 제공한다.
- HTML 소스가 깔끔하게 생성되는 편이다.
- 같은 매크로미디어 제품군인 플래시 애니메이션과
연동하기 편리하다.
단점
- 외국 제품이라 우리나라 정서에 맞지 않고 메뉴가 영문
으로 되어 있어 배우기 어렵다.
드림위버
Section
01
인터넷과 웹
홈페이지를 만들기 전에 – 에디트플러스 설치와 환경설정
[에디트플러스의 특징]
http://editplus.co.kr/kr/download.html
쉐어웨어로 30일 평가판이다.
구문 강조 기능을 지원한다.
자체 내장 브라우저를 제공한다.
자체 FTP를 제공한다.