인터넷이란?(3) - cris.joongbu.ac.krcris.joongbu.ac.kr/course/2013-1/wp1/ppt/1_Internet.pdf · 웹 페이지 동작 원리 웹 문서 제작 표준 언어의 변천 과정 웹

01

학습 내용

: 준비학습: 인터넷 과 웹

01장. 인터넷 이해하기

02장. 홈페이지를 만들기 전에

01

학습 내용

: 01장. 인터넷 이해하기

인터넷이란

도메인명과 URL

웹 페이지 동작 원리

웹 문서 제작 표준 언어의 변천 과정

웹 브라우저 소개

Section 01 인터넷과 웹

인터넷이란?

망(Network)들의 망, 망들의 결합체

인터넷 이해하기 – 인터넷이란?


1969 미 국방성 알파넷(ARPANET) 등장

1972 이메일 탄생

1974 인터넷(Internet) 용어 처음 사용

1975 TCP/IP 개발, 시운전 개시

1979 USENET 구축(net* 뉴스그룹 생성)

1983 Apple, LISA 컴퓨터(GUI 탑제 최초 PC)발표

1991 팀 버너스 리에 의해 WWW 개발

1993 상용 인터넷 서비스 개시

1994 넷스케이프 네비게이터 1.0 발표

1995 본격 상업화, 대중화, 정보 고속화



WWW : 문자, 이미지 등을 포함한 문서를 제공

FTP : 파일 송수신 서비스

E-Mail : 메일 서비스

Usenet : 뉴스그룹 서비스

Telnet : 원격지 접속

Chatting : 채팅 서비스



[WWW와 HTML]

www(World-Wide-Web)

HyperText

HyperLink

HTML(Hyper-Text Markup language)

<Tag>로 구성

확장자 htm, html

인터넷 이해하기 – 도메인명과 URL


[IP 주소와 도메인명]

IP 주소: 컴퓨터 고유 넘버

도메인명(Domain Name): 서버이름

DNS(Domain Name Server): 도메인 이름을 IP 주소로 변경하기 위해 사용된다.

사용자 PC의

웹 브라우저 웹 서버 DNS



[기관의 성격코드]

COM : company, 영리를 목적으로 하는 업체

NET : network,네트워크 관리 기구

EDU : education, 교육기관

GOV : government, 정부기관

MIL : military, 군사기관

ORG : organization, 비영리기관



[국가코드]

Kr 대한민국

Jp 일본

Uk 영국

De 독일

Tw 대만

Ru 러시아

Fr 프랑스

Ca 캐나다



[KrNIC 도메인 기관코드]

Ac : academy, 교육기관

Co : company, 영리를 목적으로 하는 업체

Go : govermment, 정부기관

Ne : network, 네트워크 관리 기구

Or : organization, 비영리기관

Re : research, 연구기관



[URL]

Uniform Resource Locator

형식

프로토콜://호스트주소[포트번호]/파일의 전체경로/파일이름

예

http://www.mbc.co.kr/news/news7.htm


http://www.mbc.co.kr/news/news7.htm


[프로토콜]

네트워크에서 사용하는 인터넷 표준 규약

TCP/IP : 프로토콜의 하나

인터넷에 참여하기 위해서 준수해야 할 규칙

HTTP(HyperText Transfer Protocol)

프로토콜 : http, gopher, wais, ftp, news, mailto, telnet



[포탈 사이트]

포탈은 으리으리한 집의 현관이나 정문 또는 터널의 입구를 가리키는 말이다.

최근 웹사이트의 관문(關門)이라는 의미를 갖는 새로운 용어로 사용되고 있다.

사용자들이 웹에 접속할 때 제일 먼저 나타나거나 가장 많이 머무르는 사이트로 웹 서핑을 시작하는 주요 사이트를 의미한다.



[스팸 메일]

허락받지 않고 아무에게나 마구잡이로 살포하는 상업적 광고메일

일명 UCE(Unsolicited Commercial E-mail)

Junk(잡동사니) 메일이라고도 한다.

스팸 메일은 전자 우편 주소를 가진 사람에게 무차별적으로 배달되어 원치 않는 사람들에게 많은 시간과 비용 낭비를 초래한다.



[이메일]

형식

사용자ID@인터넷 서비스 업체의 컴이름

[email protected]

[email protected]

[email protected]

계정(Account)

SMTP : 보내는 메일 서버

POP3 : 받는 메일 서버 (Post Office Protocol3)


mailto:[email protected]




[FTP 사이트]

File Transfer Protocol의 약자

FTP 프로그램 : Ws-Ftp, CuteFtp, LeapFtp

웹브라우저로 개인계정에 업로드하는 법

ftp://사용자아이디:비밀번호@호스트Full주소



[유즈넷(USENET)]

게시판에서 주제별 토론 및 회의를 하는 곳

주제별로 분류된 일련의 “뉴스그룹”으로 구성

뉴스그룹 이름 Han.announce : 모든 한국 유즈넷 독자 대상

Han.test : 뉴스 포스팅 시험

ISP별 뉴스서버(NNTP) 신비로 news.shinbiro.com

유니텔 news.unitel.co.kr



[분야별 한글뉴스그룹 목록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 : 유즈넷(뉴스그룹)



[분야별 한글뉴스그룹 목록B]

Han.arts : 예술

Han.rec : Recreation

Han.school : 학교

Han.sci : 과학

Han.sco : 사회

Han.soc.religion : 종교

Han.talk : 토론

Han.misc : 기타 그룹



[플러그인(Plus-In)]

인터넷 익스플로러와 같은 웹 브라우저를 도와 웹 브라우저 자체의 기능인 것처럼 만들어주는 도우미 프로그램이다.

분명히 다른 회사에서 만들었고, 따로 설치를 해주어야 하지만 웹 브라우저 내에서 움직이기 때문에 외부 프로그램이라는 인식을 할 수 없을 정도이다.

매크로미디어의 쇽 웨이브와 플래시가 그 대표적인 예다.



LIN

UX

or

Win

dow

2000

1. Request(요청)

2. Response(응답)

Client(Local Computer)

사용자 PC

Web Server(Remote Computer)

서버

인터넷 이해하기 – 웹 페이지 동작 원리

[클라이언트측 페이지 동작 원리]

3. 해석


LIN

UX

or

Win

dow

20

00 ㄴ 1. Request(요청)

Client(Local Computer)

사용자 PC

IIS(ASP.DLL)

2. 해석

Web Server(Remote Computer)

서버

일반 HTML 문서 3. 변환

4. 응답


[서버측 페이지 동작 원리]

5. 해석


문서

정적 페이지(static page)

동적 페이지(dynamic page)

구분

처리 방식

통신 방식

해석위치

웹사이트 운영면

활용 분야

제작 기술

클라이언트측 페이지

수동적, 고정적 클라이언트에서 고정페이지를 전송받는 단방향 통신 클라이언트측 내용을 변경하려면 일일이 편집해야 하므로 비효율적.

내용이 변하지 않는 일반 문서 HTML, CSS, 자바스크립트

서버측 페이지

사용자의 입력을 실시간으로 처리 서버와 클라이언트 사이의 양방향 통신 서버측 내용이 추가되어도 문서를 재편집할 필요가 없어 효율적.

내용이 수시로 변하는 게시판, 설문조사, 회원가입, 검색엔진 등 PHP, ASP, JSP



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)

인터넷 이해하기 – 웹 문서 제작 표준 언어의 변천 과정


HTML SGML XML

사용자 정의 불가능, 제한적

사용자 정의 가능, 무제한적

사용자 정의 가능 , SGML보다는 제한적

불가능 가능 가능

단순한 구조의 문서 및 내용이 길지 않은 문서

방대한 내용과 구조를 요하는 기술적인 문서

SGML과 동일 웹상의 교환문서

간단하고 용이함 논리 구조 작성의 어려움

매우 복잡함 SGML을 단순화시켜 편리하게 작성 가능

효과적인 검색이 어려움

정확한 검색 가능 문서 구조에 대한 검색 가능

SGML과 동일

HTML HyTime XLL

구분

태그 사용

문서의 재사용

응용 분야

문서작성

링크

출력형식 언어

문서검색

CSS DSSSL XSL

인터넷 이해하기 – 웹 문서 제작 표준 언어의 변천 과정


[종류]

NCSA의 모자이크

오페라 소프트웨어(Opera Software)의 Opera

마이크로소프트의 인터넷 익스플로러

AOL의 넷스케이프 네비게이터

선 마이크로 시스템의 Hot Java

인터넷 이해하기 – 웹 브라우저


구분

메뉴

단축 키 사이트 동시 접속 [파일 → 새로 만들기 → 창]

Ctrl + N 링크 문서 새 창으로 열기

-

Shift+링크클릭

원하는 단어를 찾을 때

[편집 → 이 페이지에서 찾기]

Ctrl + F 자주 방문하는 사이트 등록

[즐겨찾기 → 즐겨찾기에 추가]

Ctrl + B 원본 문서 다시 읽어오기

[보기 → 새로 고침]

F5 주소 창 바로가기

-

ALT + D 페이지 다운

-

Space 페이지 업

-

Shift + Space 현재 페이지 저장

[파일 → 다른 이름으로 저장]

- 이미지 파일 저장

팝업 메뉴[다른 이름으로 그림저장]

- 링크 주소 복사

팝업 메뉴 [바로가기 복사]

- 소스보기

[보기 → 소스]

- 즐겨찾기 메뉴 관리 [파일 → 가져오기 및 내보내기] -

환경설정

[도구 → 인터넷 옵션]

-

인터넷 이해하기 – 웹 브라우저


[정보검색법]

검색엔진을 이용한 검색방법

데이터베이스 사용방법

원하는 사이트로 바로 접속하는 방법

인터넷 이해하기 – 정보검색


[문제접근방법]

문제를 분석하고 이해한다.

단서를 찾아 정리한다. (고유명사, 구 유리)

문제 해답을 찾기 위한 접근 방법을 결정한다. (검색엔진, 데이터베이스, 기타방법)

검색결과에서 문제에 가장 근접하게 링크된 정보가 요약된 사이트로 이동한다.

정답을 확인한다.



[검색엔진이란?]

검색엔진은 사용자가 요구하는 정보를 ‘검색로봇’을 이용하여 정보를 찾아 제공한다.

검색로봇의 DB구축으로 인한 네트워크 트래픽이 발생하므로 서버의 성능이 저하되는단점도 있다.



[검색엔진의 종류]

주제별 검색 : yahoo.com

단어별 검색 : altavista.com

전문 데이터베이스

프로그램 검색 : Download.com

영화전문검색 : imdb.com

음악정보검색 : worldwidemusic.com


01

학습 내용

: 2장. 홈페이지를 만들기 전에

홈페이지 제작 목적과 제작 과정

홈페이지 제작 관련 기술들

홈페이지 제작에 필요한 준비물

어떤 웹 에디터를 사용할 것인가?

에디터플러스 설치와 환경설정


[홈페이지 제작 목적]

자기 만족 및 개인 홍보

기업 홍보 및 물건 판매

정보 공유

인터넷 프로그래밍의 이해

홈페이지를 만들기 전에 – 홈페이지 제작 목적과 과정


[홈페이지 제작 과정]

기획 단계

홈페이지를 제작하기 전에 제작 목적, 주제, 대상층 등을 명확히 정해야 한다.

제작 단계

홈페이지 기획이 끝나면 실제로 홈페이지를 제작한다.

배포와 관리, 평가 단계

홈페이지 제작이 완료되면 이제 자신의 홈페이지를 홍보할 차례다. 하이홈, 네이버 등의 계정을 받아 홈페이지를 올린다. 또한 홈페이지를 올린 후 원하는 대로 제작되었는지, 효용성 등을 체크해 본다.



항목

설명

전체적인 구성

텍스트 위주, 그래픽 위주

용도

학술 연구, 교육 학습, 개인, 오락, 여가 생활

유형

공공기관, 교육용, 상업용, 개인용

주요 고객 계층, 연령, 배경, 관심 분야, 기술, 이용 능력 수준


[대상층과 서비스 제공 방식]


웹 프로그래밍 분야

HTML

CSS

자바스크립트

CGI, ASP, PHP, JSP

웹 디자인 분야

일러스트레이터

포토샵

플래시

홈페이지를 만들기 전에 – 홈페이지 제작 관련 기술


준비물 정의 종류 우리가 사용할

도구

웹 에디터 홈페이지 문서를 제작하

는 툴 메모장, 에디트플러스, 나모, 드림위버 등

에디트플러스

웹 브라우저

홈페이지 문서를 보여주는 툴

인터넷 익스플로러, 넷스케이프 네비게이터,

오페라 등

인터넷 익스플로러

계정

홈페이지 공간을 할당해 주고 홈페이지 파일을 올릴 수 있도록 서비스해 주는 업체에 가입하는 것

네이버, 드림위즈, 네티앙, 하이홈 등

네이버

홈페이지를 만들기 전에 – 홈페이지 제작 준비물(필수)


FTP 전용 프로그램

웹 서버

이미지 제작 툴

애니메이션 제작 툴

홈페이지를 만들기 전에 – 홈페이지 제작 준비물(선택)


제공 회사

사이트 주소

제공 용량 네이버

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

홈페이지를 만들기 전에 – 무료 계정 제공 사이트


[웹 에디터의 종류]

소스 위주의 웹 에디터

메모장

에디터플러스

홈사이트

편집 위주의 웹 에디터

나모

드림위버

홈페이지를 만들기 전에 – 어떤 웹 에디터를 사용할 것인가


종류 설명

메모장

흰색 배경에 검은색 글자로만 소스를 코딩하므로 간단한 소스의 경우 문제 없지만 복잡한 소스를 코딩할 경우 불편하다.

에디트 플러스

홈페이지 소스를 구성하고 있는 태그, 속성, 값의 색상을 다양하게 구별하여 표시하므로 복잡한 소스를 코딩하더라도 원하는 곳을 쉽게 찾아볼 수 있어 편리하다.

홈사이트

에디터플러스와 같이 태그, CSS, 자바스크립트 소스의 색상을 다양하게 표현해 주므로 소스 편집이 훨씬 수월하다. 특히 태그 속성 자동 생성 기능이나 위자드(Wizard) 기능이 막강하여 복잡한 태그도 쉽게 생성, 편집할 수 있다.


[소스 위주의 웹 에디터]


구분

장/단점

내용

나모

장점

- 국산품이라 우리나라 정서에 맞고 메뉴가 한글로 구성되어 있어 쉽게 배울 수 있다. - 초보자들도 쉽게 자바스크립트를 사용할 수 있도록 자바스크립트 마법사를 제공한다. - 나모 자체로 이미지를 간단히 편집할 수 있다.

단점

- HTML 소스가 지저분하게 생성되는 편이다.

드림위버

장점

- 초보자들도 쉽게 자바스크립트를 사용할 수 있도록 비헤비어(Behavior)를 제공한다. - HTML 소스가 깔끔하게 생성되는 편이다. - 같은 매크로미디어 제품군인 플래시 애니메이션과 연동하기 편리하다.

단점

- 외국 제품이라 우리나라 정서에 맞지 않고 메뉴가 영문으로 되어 있어 배우기 어렵다.


[편집 위주의 웹 에디터]


http://editplus.co.kr/kr/download.html

쉐어웨어로 30일 평가판이다.

구문 강조 기능을 지원한다.

자체 내장 브라우저를 제공한다.

자체 FTP를 제공한다.

홈페이지를 만들기 전에 – 에디트플러스 설치와 환경설정

[에디트플러스의 특징]

http://editplus.co.kr/kr/download.html

Documents

인터넷이란?(3) - cris.joongbu.ac.krcris.joongbu.ac.kr/course/2013-1/wp1/ppt/1_Internet.pdf · 웹 페이지 동작 원리 웹 문서 제작 표준 언어의 변천 과정 웹