01

학습 내용

: 준비학습 : 인터넷 과 웹

01 장 . 인터넷 이해하기02 장 . 홈페이지를 만들기 전에

01

학습 내용

: 01 장 . 인터넷 이해하기

인터넷이란도메인명과 URL 웹 페이지 동작 원리 웹 문서 제작 표준 언어의 변천 과정웹 브라우저 소개

Section01

인터넷과 웹

인터넷이란 ?

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

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

Section01

인터넷과 웹

1969 미 국방성 알파넷 (ARPANET) 등장1972 이메일 탄생1974 인터넷 (Internet) 용어 처음 사용1975 TCP/IP 개발 , 시운전 개시1979 USENET 구축 (net* 뉴스그룹 생성 )1983 Apple, LISA 컴퓨터 (GUI 탑제 최초 PC) 발표1991 팀 버너스 리에 의해 WWW 개발1993 상용 인터넷 서비스 개시 1994 넷스케이프 네비게이터 1.0 발표 1995 본격 상업화 , 대중화 , 정보 고속화

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

Section01

인터넷과 웹

WWW : 문자 , 이미지 등을 포함한 문서를 제공FTP : 파일 송수신 서비스E-Mail : 메일 서비스Usenet : 뉴스그룹 서비스Telnet : 원격지 접속 Chatting : 채팅 서비스

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

Section01

인터넷과 웹

[WWW 와 HTML]www(World-Wide-Web)HyperTextHyperLinkHTML(Hyper-Text Markup language)

<Tag> 로 구성 확장자 htm, html

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

Section01

인터넷과 웹

[IP 주소와 도메인명 ]IP 주소 : 컴퓨터 고유 넘버도메인명 (Domain Name): 서버이름DNS(Domain Name Server): 도메인 이름을

IP 주소로 변경하기 위해 사용된다 .

사용자 PC 의웹 브라우저 웹 서버DNS

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

Section01

인터넷과 웹

[ 기관의 성격코드 ]COM : company, 영리를 목적으로 하는 업체NET : network, 네트워크 관리 기구EDU : education, 교육기관GOV : government, 정부기관MIL : military, 군사기관ORG : organization, 비영리기관

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

Section01

인터넷과 웹

[ 국가코드 ]Kr 대한민국Jp 일본Uk 영국De 독일Tw 대만Ru 러시아Fr 프랑스Ca 캐나다

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

Section01

인터넷과 웹

[KrNIC 도메인 기관코드 ]Ac : academy, 교육기관Co : company, 영리를 목적으로 하는 업체Go : govermment, 정부기관Ne : network, 네트워크 관리 기구Or : organization, 비영리기관Re : research, 연구기관

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

Section01

인터넷과 웹

[URL]Uniform Resource Locator형식

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

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

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

Section01

인터넷과 웹

[ 프로토콜 ]네트워크에서 사용하는 인터넷 표준 규약TCP/IP : 프로토콜의 하나

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

HTTP(HyperText Transfer Protocol)프로토콜 : http, gopher, wais, ftp, news, mailt

o, telnet

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

Section01

인터넷과 웹

[ 포탈 사이트 ]포탈은 으리으리한 집의 현관이나 정문 또는

터널의 입구를 가리키는 말이다 .최근 웹사이트의 관문 ( 關門 ) 이라는 의미를 갖는

새로운 용어로 사용되고 있다 .사용자들이 웹에 접속할 때 제일 먼저 나타나거나

가장 많이 머무르는 사이트로 웹 서핑을 시작하는 주요 사이트를 의미한다 .

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

Section01

인터넷과 웹

[ 스팸 메일 ]허락받지 않고 아무에게나 마구잡이로

살포하는 상업적 광고메일일명 UCE(Unsolicited Commercial E-mail)Junk( 잡동사니 ) 메일이라고도 한다 .스팸 메일은 전자 우편 주소를 가진 사람에게

무차별적으로 배달되어 원치 않는 사람들에게 많은 시간과 비용 낭비를 초래한다 .

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

Section01

인터넷과 웹

[ 이메일 ]형식

사용자 ID@ 인터넷 서비스 업체의 컴이름 Lucy922@dreamwiz.com Lucy922@samsung.co.kr Lucy922@unitel.co.kr

계정 (Account)SMTP : 보내는 메일 서버POP3 : 받는 메일 서버 (Post Office Protocol3)

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

Section01

인터넷과 웹

[FTP 사이트 ]File Transfer Protocol 의 약자FTP 프로그램 : Ws-Ftp, CuteFtp, LeapFtp웹브라우저로 개인계정에 업로드하는 법

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

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

Section01

인터넷과 웹

[ 유즈넷 (USENET)]게시판에서 주제별 토론 및 회의를 하는 곳주제별로 분류된 일련의 “뉴스그룹”으로 구성뉴스그룹 이름

Han.announce : 모든 한국 유즈넷 독자 대상 Han.test : 뉴스 포스팅 시험

ISP 별 뉴스서버 (NNTP) 신비로 news.shinbiro.com 유니텔 news.unitel.co.kr

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

Section01

인터넷과 웹

[ 분야별 한글뉴스그룹 목록 A]Han.binaries : binary 파일을 게시팔 수 있는 그룹Han.comp.lang : 컴퓨터 언어Han.comp.os : Operating SystemHan.comp.periphs : 컴퓨터 주변장치Han.comp.sys : 컴퓨터 시스템Han.comp.www : 인터넷Han.net : 네트워크Han.news : 유즈넷 ( 뉴스그룹 )

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

Section01

인터넷과 웹

[ 분야별 한글뉴스그룹 목록 B]Han.arts : 예술Han.rec : RecreationHan.school : 학교Han.sci : 과학Han.sco : 사회Han.soc.religion : 종교Han.talk : 토론Han.misc : 기타 그룹

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

Section01

인터넷과 웹

[ 플러그인 (Plus-In)]인터넷 익스플로러와 같은 웹 브라우저를 도와 웹

브라우저 자체의 기능인 것처럼 만들어주는 도우미 프로그램이다 .

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

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

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

Section01

인터넷과 웹

LIN

UX

or W

indow 2000

1. Request( 요청 )

2. Response( 응답 )

Client(Local Computer)사용자 PC

Web Server(Remote Computer)서버

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

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

3. 해석

Section01

인터넷과 웹

LIN

UX

or W

indow20

00ㄴ1. Request( 요청 )

Client(Local Computer)사용자 PC

IIS(ASP.DLL)

2. 해석

Web Server(Remote Computer)서버

일반 HTML 문서3. 변환

4. 응답

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

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

5. 해석

Section01

인터넷과 웹

문서 정 적 페 이 지 (static page)

동적 페이지 (dynamic page)

구분

처리 방식

통신 방식

해석위치

웹사이트 운영면

활용 분야

제작 기술

클라이언트측 페이지

수동적 , 고정적클 라 이 언 트 에 서 고 정페이 지 를 전송받 는 단방향 통신클라이언트측

내 용 을 변 경 하 려 면 일 일 이 편집해야 하므로 비효율적 .

내용이 변하지 않는 일반 문서

HTML, CSS, 자바스크립트

서버측 페이지

사용자의 입력을 실시간으로 처리서버와 클라이언트 사 이의 양방향 통신

서버측

내용이 추가되어도 문서를 재편집할 필요가 없어 효율적 .

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

PHP, ASP, JSP

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

Section01

인터넷과 웹

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)

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

Section01

인터넷과 웹

HTML SGML XML

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

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

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

불가능 가능 가능

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

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

SGML 과 동일웹상의 교환문서

간단하고 용이함논리 구조 작성의 어려움 매우 복잡함 SGML 을 단 순 화 시 켜

편리하게 작성 가능

효과적인 검색이 어려움정확한 검색 가능문 서 구 조 에 대 한 검 색 가능

SGML 과 동일

HTML HyTime XLL

구분

태그 사용

문서의 재사용

응용 분야

문서작성

링크출력형식 언어

문서검색

CSS DSSSL XSL

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

Section01

인터넷과 웹

[종류 ]NCSA 의 모자이크오페라 소프트웨어 (Opera Software) 의 Opera마이크로소프트의 인터넷 익스플로러AOL 의 넷스케이프 네비게이터선 마이크로 시스템의 Hot Java

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

01

학습 내용

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

홈페이지 제작 목적과 제작 과정홈페이지 제작 관련 기술들 홈페이지 제작에 필요한 준비물 어떤 웹 에디터를 사용할 것인가 ?에디터플러스 설치와 환경설정

Section01

인터넷과 웹

[ 홈페이지 제작 목적 ]자기 만족 및 개인 홍보기업 홍보 및 물건 판매정보 공유인터넷 프로그래밍의 이해

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

Section01

인터넷과 웹

[홈페이지 제작 과정 ]기획 단계

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

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

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

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

Section01

인터넷과 웹

항목 설명

전체적인 구성 텍스트 위주 , 그래픽 위주

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

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

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

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

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

Section01

인터넷과 웹

웹 프로그래밍 분야 HTML CSS 자바스크립트 CGI, ASP, PHP, JSP

웹 디자인 분야 일러스트레이터 포토샵 플래시

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

Section01

인터넷과 웹

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

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

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

등에디트플러스

웹 브라우저

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

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

네비게이터 , 오페라 등

인터넷 익스플로러

계정홈페이지 공간을 할당해

주고 홈페이지 파일을 올릴 수 있도록 서비스해 주는

업체에 가입하는 것

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

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

Section01

인터넷과 웹

FTP 전용 프로그램웹 서버이미지 제작 툴애니메이션 제작 툴

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

Section01

인터넷과 웹

[ 웹 에디터의 종류 ]소스 위주의 웹 에디터

메모장 에디터플러스 홈사이트

편집 위주의 웹 에디터 나모 드림위버

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

Section01

인터넷과 웹

종류 설명

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

에디트플러스

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

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

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

[ 소스 위주의 웹 에디터 ]

Section01

인터넷과 웹

구분 장 /단점

내용

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

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

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

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

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

[ 편집 위주의 웹 에디터 ]

Section01

인터넷과 웹

http://editplus.co.kr/kr/download.html 쉐어웨어로 30 일 평가판이다 .구문 강조 기능을 지원한다 .자체 내장 브라우저를 제공한다 .자체 FTP 를 제공한다 .

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

[ 에디트플러스의 특징 ]