준비학습 : 인터넷 과 웹

1. 준비학습: 인터넷 과 웹 01장. 인터넷 이해하기 02장. 홈페이지를 만들기 전에

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

3. 인터넷 이해하기 –인터넷이란? • 인터넷이란? • 망(Network)들의 망, 망들의 결합체

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

5. 인터넷 이해하기 –인터넷이란? • WWW : 문자, 이미지 등을 포함한 문서를 제공 • FTP : 파일 송수신 서비스 • E-Mail : 메일 서비스 • Usenet : 뉴스그룹 서비스 • Telnet : 원격지 접속 • Chatting : 채팅 서비스

6. 인터넷 이해하기 –도메인명과 URL • [WWW와 HTML] • www(World-Wide-Web) • HyperText • HyperLink • HTML(Hyper-Text Markup language) • <Tag>로 구성 • 확장자 htm, html

7. 인터넷 이해하기 –도메인명과 URL • [IP 주소와 도메인명] • IP 주소: 컴퓨터 고유 넘버 • 도메인명(Domain Name): 서버이름 • DNS(Domain Name Server): 도메인 이름을 IP 주소로 변경하기 위해 사용된다. 사용자 PC의 웹 브라우저 DNS 웹 서버

8. 인터넷 이해하기 –도메인명과 URL • [기관의 성격코드] • COM : company, 영리를 목적으로 하는 업체 • NET : network,네트워크 관리 기구 • EDU : education, 교육기관 • GOV : government, 정부기관 • MIL : military, 군사기관 • ORG : organization, 비영리기관

9. 인터넷 이해하기 –도메인명과 URL • [국가코드] • Kr 대한민국 • Jp 일본 • Uk 영국 • De 독일 • Tw 대만 • Ru 러시아 • Fr 프랑스 • Ca 캐나다

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

11. 인터넷 이해하기 –도메인명과 URL • [URL] • Uniform Resource Locator • 형식 프로토콜://호스트주소[포트번호]/파일의 전체경로/파일이름 • 예 http://www.mbc.co.kr/news/news7.htm

12. 인터넷 이해하기 –도메인명과 URL • [프로토콜] • 네트워크에서 사용하는 인터넷 표준 규약 • TCP/IP : 프로토콜의 하나 인터넷에 참여하기 위해서 준수해야 할 규칙 • HTTP(HyperText Transfer Protocol) • 프로토콜 : http, gopher, wais, ftp, news, mailto, telnet

13. 인터넷 이해하기 –도메인명과 URL • [포탈 사이트] • 포탈은 으리으리한 집의 현관이나 정문 또는 터널의 입구를 가리키는 말이다. • 최근 웹사이트의 관문(關門)이라는 의미를 갖는 새로운 용어로 사용되고 있다. • 사용자들이 웹에 접속할 때 제일 먼저 나타나거나 가장 많이 머무르는 사이트로 웹 서핑을 시작하는 주요 사이트를 의미한다.

14. 인터넷 이해하기 –도메인명과 URL • [스팸 메일] • 허락받지 않고 아무에게나 마구잡이로 살포하는 상업적 광고메일 • 일명 UCE(Unsolicited Commercial E-mail) • Junk(잡동사니) 메일이라고도 한다. • 스팸 메일은 전자 우편 주소를 가진 사람에게 무차별적으로 배달되어 원치 않는 사람들에게 많은 시간과 비용 낭비를 초래한다.

15. 인터넷 이해하기 –도메인명과 URL • [이메일] • 형식 • 사용자ID@인터넷 서비스 업체의 컴이름 • Lucy922@dreamwiz.com • Lucy922@samsung.co.kr • Lucy922@unitel.co.kr • 계정(Account) • SMTP : 보내는 메일 서버 • POP3 : 받는 메일 서버 (Post Office Protocol3)

16. 인터넷 이해하기 –도메인명과 URL • [FTP 사이트] • File Transfer Protocol의 약자 • FTP 프로그램 : Ws-Ftp, CuteFtp, LeapFtp • 웹브라우저로 개인계정에 업로드하는 법 • ftp://사용자아이디:비밀번호@호스트Full주소

17. 인터넷 이해하기 –도메인명과 URL • [유즈넷(USENET)] • 게시판에서 주제별 토론 및 회의를 하는 곳 • 주제별로 분류된 일련의 “뉴스그룹”으로 구성 • 뉴스그룹 이름 • Han.announce : 모든 한국 유즈넷 독자 대상 • Han.test : 뉴스 포스팅 시험 • ISP별 뉴스서버(NNTP) • 신비로 news.shinbiro.com • 유니텔 news.unitel.co.kr

18. 인터넷 이해하기 –도메인명과 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 : 유즈넷(뉴스그룹)

19. 인터넷 이해하기 –도메인명과 URL • [분야별 한글뉴스그룹 목록B] • Han.arts : 예술 • Han.rec : Recreation • Han.school : 학교 • Han.sci : 과학 • Han.sco : 사회 • Han.soc.religion : 종교 • Han.talk : 토론 • Han.misc : 기타 그룹

20. 인터넷 이해하기 –도메인명과 URL • [플러그인(Plus-In)] • 인터넷 익스플로러와 같은 웹 브라우저를 도와 웹 브라우저 자체의 기능인 것처럼 만들어주는 도우미 프로그램이다. • 분명히 다른 회사에서 만들었고, 따로 설치를 해주어야 하지만 웹 브라우저 내에서 움직이기 때문에 외부 프로그램이라는 인식을 할 수 없을 정도이다. • 매크로미디어의 쇽 웨이브와 플래시가 그 대표적인 예다.

21. 인터넷 이해하기 –웹 페이지 동작 원리 [클라이언트측 페이지 동작 원리] 1. Request(요청) LINUX or Window 2000 2. Response(응답) 3. 해석 Client(Local Computer) 사용자 PC Web Server(Remote Computer) 서버

22. 인터넷 이해하기 –웹 페이지 동작 원리 [서버측 페이지 동작 원리] 1. Request(요청) LINUX or Window2000 ㄴ 5. 해석 4. 응답 Client(Local Computer) 사용자 PC Web Server(Remote Computer) 서버 2. 해석 3. 변환 일반 HTML 문서 IIS(ASP.DLL)

23. 처리 방식 수동적, 고정적 사용자의 입력을 실시간으로 처리 구분 클라이언트측 페이지 서버측 페이지 통신 방식 클라이언트에서 고정페이지를 전송받는 단방향 통신 서버와 클라이언트 사이의 양방향 통신 문서 정적 페이지(static page) 동적 페이지(dynamic page) 해석위치 클라이언트측 서버측 웹사이트 운영면 내용을 변경하려면 일일이 편집해야 하므로 비효율적. 내용이 추가되어도 문서를 재편집할 필요가 없어 효율적. 활용 분야 내용이 변하지 않는 일반 문서 내용이 수시로 변하는 게시판, 설문조사, 회원가입, 검색엔진 등 제작 기술 HTML, CSS, 자바스크립트 PHP, ASP, JSP 인터넷 이해하기 –웹 페이지 동작 원리

24. 인터넷 이해하기 –웹 문서 제작 표준 언어의 변천 과정 • 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)

25. 구분 SGML XML HTML 태그 사용 사용자 정의 가능, 무제한적 사용자 정의 가능, SGML보다는 제한적 사용자 정의 불가능, 제한적 문서의 재사용 불가능 가능 가능 응용 분야 방대한 내용과 구조를 요하는 기술적인 문서 SGML과 동일 웹상의 교환문서 단순한 구조의 문서 및 내용이 길지 않은 문서 문서작성 매우 복잡함 SGML을 단순화시켜 편리하게 작성 가능 간단하고 용이함 논리 구조 작성의 어려움 문서검색 정확한 검색 가능 문서 구조에 대한 검색 가능 SGML과 동일 효과적인 검색이 어려움 링크 HTML HyTime XLL 출력형식 언어 CSS DSSSL XSL 인터넷 이해하기 –웹 문서 제작 표준 언어의 변천 과정

26. 인터넷 이해하기 –웹 브라우저 • [종류] • NCSA의 모자이크 • 오페라 소프트웨어(Opera Software)의 Opera • 마이크로소프트의 인터넷 익스플로러 • AOL의 넷스케이프 네비게이터 • 선 마이크로 시스템의 Hot Java

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

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

29. 홈페이지를 만들기 전에 –홈페이지 제작 목적과 과정 • [홈페이지 제작 과정] • 기획 단계 • 홈페이지를 제작하기 전에 제작 목적, 주제, 대상층 등을 명확히 정해야 한다. • 제작 단계 • 홈페이지 기획이 끝나면 실제로 홈페이지를 제작한다. • 배포와 관리, 평가 단계 • 홈페이지 제작이 완료되면 이제 자신의 홈페이지를 홍보할 차례다. 하이홈, 네이버 등의 계정을 받아 홈페이지를 올린다. 또한 홈페이지를 올린 후 원하는 대로 제작되었는지, 효용성 등을 체크해 본다.

30. 항목 설명 전체적인 구성 텍스트 위주, 그래픽 위주 용도 학술 연구, 교육 학습, 개인, 오락, 여가 생활 유형 공공기관, 교육용, 상업용, 개인용 주요 고객 계층, 연령, 배경, 관심 분야, 기술, 이용 능력 수준 홈페이지를 만들기 전에 –홈페이지 제작 목적과 과정 [대상층과 서비스 제공 방식]

31. 홈페이지를 만들기 전에 –홈페이지 제작 관련 기술 • 웹 프로그래밍 분야 • HTML • CSS • 자바스크립트 • CGI, ASP, PHP, JSP • 웹 디자인 분야 • 일러스트레이터 • 포토샵 • 플래시

32. 준비물 정의 종류 우리가 사용할 도구 웹 에디터 홈페이지 문서를 제작하는 툴 메모장, 에디트플러스, 나모, 드림위버 등 에디트플러스 웹 브라우저 홈페이지 문서를 보여주는 툴 인터넷 익스플로러, 넷스케이프 네비게이터, 오페라 등 인터넷 익스플로러 계정 홈페이지 공간을 할당해 주고 홈페이지 파일을 올릴 수 있도록 서비스해 주는 업체에 가입하는 것 네이버, 드림위즈, 네티앙, 하이홈 등 네이버 홈페이지를 만들기 전에 –홈페이지 제작 준비물(필수)

33. 홈페이지를 만들기 전에 –홈페이지 제작 준비물(선택) • FTP 전용 프로그램 • 웹 서버 • 이미지 제작 툴 • 애니메이션 제작 툴

34. 홈페이지를 만들기 전에 –어떤 웹 에디터를 사용할 것인가 • [웹 에디터의 종류] • 소스 위주의 웹 에디터 • 메모장 • 에디터플러스 • 홈사이트 • 편집 위주의 웹 에디터 • 나모 • 드림위버

35. 종류 설명 메모장 흰색 배경에 검은색 글자로만 소스를 코딩하므로 간단한 소스의 경우 문제 없지만 복잡한 소스를 코딩할 경우 불편하다. 에디트 플러스 홈페이지 소스를 구성하고 있는 태그, 속성, 값의 색상을 다양하게 구별하여 표시하므로 복잡한 소스를 코딩하더라도 원하는 곳을 쉽게 찾아볼 수 있어 편리하다. 홈사이트 에디터플러스와 같이 태그, CSS, 자바스크립트 소스의 색상을 다양하게 표현해 주므로 소스 편집이 훨씬 수월하다. 특히 태그 속성 자동 생성 기능이나 위자드(Wizard) 기능이 막강하여 복잡한 태그도 쉽게 생성, 편집할 수 있다. 홈페이지를 만들기 전에 –어떤 웹 에디터를 사용할 것인가 [소스 위주의 웹 에디터]

36. 구분 장/단점 내용 나모 장점 - 국산품이라 우리나라 정서에 맞고 메뉴가 한글로 구성되어 있어 쉽게 배울 수 있다. - 초보자들도 쉽게 자바스크립트를 사용할 수 있도록 자바스크립트 마법사를 제공한다. - 나모 자체로 이미지를 간단히 편집할 수 있다. 단점 - HTML 소스가 지저분하게 생성되는 편이다. 드림위버 장점 - 초보자들도 쉽게 자바스크립트를 사용할 수 있도록 비헤비어(Behavior)를 제공한다. - HTML 소스가 깔끔하게 생성되는 편이다. - 같은 매크로미디어 제품군인 플래시 애니메이션과 연동하기 편리하다. 단점 - 외국 제품이라 우리나라 정서에 맞지 않고 메뉴가 영문으로 되어 있어 배우기 어렵다. 홈페이지를 만들기 전에 –어떤 웹 에디터를 사용할 것인가 [편집 위주의 웹 에디터]

37. 홈페이지를 만들기 전에 –에디트플러스 설치와 환경설정 • http://editplus.co.kr/kr/download.html • 쉐어웨어로 30일 평가판이다. • 구문 강조 기능을 지원한다. • 자체 내장 브라우저를 제공한다. • 자체 FTP를 제공한다. [에디트플러스의 특징]