1장 인터넷 알아보기 핵심정리

[종순이(전남여고06)]

- 1 -
1장 인터넷 알아보기 핵심정리
1. 네트워크의 구성요소알아보기
네트워크란: 2대 이상의 컴퓨터를 케이블이나 무선 등으로 연결해서 서로 유익한 정보나 자원을 주고
받을 수 있는 시스템
․ LAN:사무실, 건물, 학교 등과 같이 한정된 지역
․ VAN:서비스 사업자가 통신회선을 임대하여 서비스
․ WAN:LAN과 다르게 넓은 지역을 연결하는 네트워크
․ ISDN:전화, 팩스, 컴퓨터통신등을 통합한 통신망
2. 인터넷 출현배경 알아보기
1) 인터넷이란: ․ INTERnational NETwork의 준말
․ 지역적 한계를 벗어난 수많은 네트워크의 모임
․ 계속적으로 증가 및 발전되고 있는 통신망
․ 케이블, 인공위성, 무선 등을 다양하게 이용
․ 정보공유 및 유통을 위한 필수적인 통신망
2) 인터넷과 관련된 기관과 기능
․ NSF:미국국립과학재단으로 미국의 백본 관리
․ NIC:TCP/IP 프로토콜에 관한 정보 수집 및 분배
․ ISOC:1992년에 조직된 인터넷의 발전과 사용에 목표를 둔 비영리기구
․ 한국 인터넷 진흥원:인터넷 주소 자원관리,인터넷의 활성화, 차세대 인터넷 연구 등 수행
3. 인터넷 주소 이해하기
1) 인터넷 주소의 개념과 특징
․ IP주소: 인터넷에 연결된 컴퓨터가 갖는 고유한 주소
․ 32비트를 8비트씩 4등분으로 나누어 구분
․ 점(.)으로 구분된 각각을 10진수로 표현: 예) 203.249.53.1
2) IP주소의 구성과 유형
․ A, B, C, D, E 클래스로 구분
․ 보통 A, B, C가 사용되며 D는 멀티캐스트용, E는 실험용
① A 클래스: 네트워크의 총 개수 : 126개(=128-2)
․ 한 개의 네트워크에 연결 가능한 호스트 수 : 16,777,214(=256*256*256-2)
② B 클래스: 네트워크의 총 개수 : 16,382개(=128*128-2)
․ 한 개의 네트워크에 연결 가능한 호스트 수 : 65,534(=256*256-2)
③ C 클래스: 네트워크의 총 개수 : 2,097,150개(=128*128*128-2)
․ 한 개의 네트워크에 연결 가능한 호스트 수 : 254(=256-2)
․ 한국방송통신대학교 : C 클래스 12개
3) 도메인 이름과 DNS
․ 도메인이름: 네트워크에 일종의 별명을 붙인 것
최상위도메인호스트이름.기관이름.최상위도메인 → 예) www.knou.ac.kr
․ DNS(Domain Name System): 영문자로 된 도메인 주소를 IP 주소로 변환
예) www.knou.ac.kr → 203.249.42.2
네트워크 식별자 호스트 식별자
0네트워크주소(7bit) 호스트 주소(24bit)
1 0 네트워크주소(14bit) 호스트 주소(16bit)
1 10 네트워크주소(21bit) 호스트 주소(8bit)
- 2 -
차세대 주소 체계 현재 인 4) IP : 터넷주소는 32비트 체계(IPv4). A,B 클래스의 네트워크 부족 현상발생
IETF에서 128비트 체계(IPv6)의 표준화: 네트워크 주소의 폭발적 증가에 대비
․ 128비트를 16비트씩 8등분으로 나누어 16진수로 표현: 예) 2001:0230:abcd:ffff:0000:0000:ffff:1111
5) 컴퓨터 통신시스템의 구성
․ 라우터: 주로 IP 통신 방식에서 목적지가 다른 개별 패킷을 서로 모으거나 분배해 주는 통신 장치로
경로 배정표에 따라 다른 통신망을 인식하여 경로를 배정하며, 여러 경로 중 가장 효율적인 경로를
선택하여 패킷을 보낸다.
․ 허브: 네트워크를 구성하는 여러 가지 장비를 연결
․ 이더넷 카드: 개인용 컴퓨터나 서버를 컴퓨터 네트워크에 연결하고자 할 때 필요한 PC와 네트워크
간의 인터페이스를 위한 장치
․ 브리지:두 개의 근거리 통신망(LAN)시스템을 이어 주는 접속 장치
․ 리피터:전송 케이블 중간 중간에 설치하는 전자 통신 장치.디지털 신호는 일정한 제한된 거리를 통
과한 후에는 출력 감쇠로 인하여 원래의 데이터의 모습을 식별하기 어렵게 되므로 장거리 전송을 가
능하게 하기 위하여, 디지털 신호를 수신하여 이를 정형화하거나 출력 전압을 높여주는 장치가 필요
․ Gateway: 두 개의 컴퓨터 네트워크를 연결시켜 주는 시스템으로, LAN과 LAN사이의 데이터 중계를
담당하는 통신 서버를 지칭.하드웨어와 프로토콜,네트워크 운영체제가 전혀 다른 PC, 대형기종,
미니급 컴퓨터 등이 네트워크에서 사용되는 서로 다른 네트워크의 특성을 상호 변환시켜 호환성 있
는 정보를 전송할 수 있게 함
6) 프로토콜과 TCP/IP
․ 프로토콜: 컴퓨터시스템간의 정보교환을 원활하게 하기 위해 정해놓은 약속
․ TCP/IP: 시스템간의 데이터 전송을 위해 인터넷에서 사용되는 표준 프로토콜
TCP(정보를 패킷으로 나누고 오류 검사), IP(패킷으로 나눈 정보를 직접 송·수신)
- 1 -
구 분 속도 (송신/수신) 내 용
ADSL 640Kbps/9Mbps 기존의 전화선 사용
VDSL 26Mbps 6Mbps/52Mbps 양방향 대칭/비대칭,기존의 전화선 사용
VSDL2 100Mbps 양방향 대칭
위성망 1Mbps 데이터 송신에 이용
케이블TV망 256Kbps/10Mbps 케이블 TV위 동축 케이블 이용
FTTH 100Mbps~1Gbps Fober To The Home
2장 인터넷 접속과 브라우저 활용하기 핵심정리
miso4u
1. 인터넷 접속 이해하기
1) 인터넷 접속 방법
․ 초고속 인터넷에 의한 접속; 케이블망, ADSL,VDSL 등, 서비스 업체(KT, 하나로텔레콤, 파워콤 등)
․ 전용회선에 의한 접속: 주로 LAN이 구축된 곳에서 전용선 사용
․ 무선 인터넷에 의한 접속: 이동 중 무선망을 통해 인터넷에 접속
․ 다이얼업(전화선)에 의한 접속: 최근에는 거의 사용되지 않는 추세
․ ISDN망에 의한 접속: 음성, 데이터, 영상 등의 다양한 정보를 하나의 통합망에서 제공
N-ISDN(NarrowBand협대역 128Kbps)에서 B-ISDN(BroadBand광대역 수백 Mbps)으로 발전
․ IPTV에 의한 접속: Internet Protocol TV의 줄인 말
-TV를 통해 인터넷을 이용할 수 있도록 개발된 서비스 일체 또는 장비
-초고속 인터넷을 통해 정보서비스, 방송콘텐츠 등을 TV로 제공하는 서비스
-전자상거래의 활성화, 시청도중 정보검색 및 상품구매 가능
-텔레비전 수상기, 셋톱박스, 인터넷 회선으로 구성
2) ADSL이란?: 비대칭형 디지털 가입자망 (Asymmetric Digital Subscriber Line)
․ 수신속도는 고속이나 송신속도는 낮은 비대칭
․ 기존의 전화선을 통해 음성통화 및 데이터 통신을 고속으로 활용
․ 음성보다 높은 주파수대역을 이용하여 데이터 통신
․ ADSL2(1Mbps/12Mbps), ADSL2+(1Mbps/24Mbps)로 발전
3) VDSL이란?: 초고속디지털가입자망 (Very high bit rate Digital Subscriber Line)
․ 기존의 전화선을 이용하여 초고속의 데이터통신 제공, ․ 대칭형과 비대칭의 두 종류로 구분
․ 수신자가 요청한 데이터만을 전송하는 멀티캐스팅 기능
․ VOD나 HDTV 등 다양한 분야에 활용될 ADSL의 후속 기술
․ 최근 양방향 100Mbps가 가능한 VDSL2로 발전
4) 초고속 인터넷 서비스 종류
2. 웹브라우저 알아보기
1) 웹의 특징
․ 하이퍼링크를 이용해 웹문서의 검색, 1993년 모자익
․ 그래픽 사용자 인터페이스(GUI)환경에서 마우스로 거의 모든 일을 처리
․ 서버(Server), 클라이언트(client), 웹브라우저로 구성
2) 웹에서 제공되는 서비스의 종류: 정보검색, 전자상거래, 가상교육/사이버교육, 행정/정치,오락/게임
3) 검색 정보의 유형: text, 그래픽, 사운드, 애니메이션등의 정보를 익스플로러나 넷스케이프 등의 웹
브라우저를 통해 서버에 있는 정보를 볼 수 있다.
4) 웹브라우저란: 웹 서버에 접속하여 정보를 전송 받아 화면에 보여 주는 프로그램
․ 초보자도 쉽게 인터넷에 접속하여 다양한 정보를 검색하여 이용할 수 있도록 하는 도구
․ 최근에 들어와 웹 서비스뿐만 아니라 파일전송, 뉴스 등의 서비스도 가능
- 2 -
5) 웹브라우저의 역사
․ 하이퍼텍스트 (Hypertext) :1965년에 나온 개념, 1980년대 말 인터넷의 활용에 접목
․ 모자익 (Mosaic): 1993년에 개발된 초기 웹 브라우저, 하이퍼텍스트 개념이 인터넷상에서 실용화
․ 넷스케이프 (Netscape): 모자익의 후속 프로그램, 네비게이터와 커뮤니케이터로 구분
․ 익스플로러 (Explorer): MS사의 Windows와 같이 무료로 공급, 웹 브라우저 시장의 90% 점유
․ 핫자바 (Hot Java): 썬 마이크로시스템즈사에서 만든 웹 브라우저
․ 링스 (Lynx): 텍스트 기반의 웹 브라우저
․ 기타: Opera, Cello 등
6) 넷스케이프의 특징:자사의 서버 제품군과 클라이언트 제품군 통합, 현재 버전 9 가 사용
․ 속도, 유연성, 안전성 향상, 자체적으로 웹 메일 제공, 초기에는 약 70% 이상이 사용
7) 익스플로러의 특징:마이크로소프트사에 의해 개발, ActiveX 플랫폼을 기반으로 통합 환경 제공
․ Windows, Mac, UNIX에서 이용환경 제공, 많은 사용자로 인해 계속적인 기능 보완
8) 익스플로러7의 특징: 새로 디자인되어 간소화된 인터페이스와 화면의 최대화
․ 웹 페이지 인쇄 시 크기 자동조정 및 페이지 레이아웃의 사용자 지정
․ 사용하는 웹 검색이 도구 모음 내의 검색상자에 포함됨
․ 단일 브라우저 창에서 여러 사이트 이용 가능
․ RSS(Really Simple Syndication)을 이용한 헤드라인 목록의 자동 수신
․ 사용자의 파일이나 설정을 수정할 수 없어 웹 기반의 공격으로부터 안전
․ 시각 장애인의 접근성을 높이기 위한 개별 웹 페이지의 확대 기능
- 1 -
3장 검색 엔진 이해와 활용하기 핵심정리
miso4u
1. 검색 엔진 이해하기
1) 정보검색: ․ 컴퓨터통신망을 이용한 일련의 정보 취득 작업
․ 산재되어 있는 정보 중에서 필요한 정보를 찾음 ․ 검색된 결과를 사용자에게 적절한 형태로 제시
․ 적합한 검색 엔진을 이용하여 찾음 ․ 찾고자 하는 정보의 검색어를 정확하게 선정
․ WWW에 모든 정보가 있지는 않음
2) 검색엔진의 개요: ․ 인터넷의 흩어진 정보를 찾는 웹서버
․ 검색 로봇, 인덱스, 질의서버로 구성 ․ 문서 전체의 내용을 인덱싱하는 전문 인덱싱 방법을 채택
3) 검색 엔진의 특징: ․ 인터넷의 정보검색은 거의 검색엔진 이용
․ 각 검색 엔진마다 서로 다른 입력방식
․ 저장된 인덱스의 종류와 크기, 결과 출력형태 등이 모두 다름
․ 하나의 검색엔진에서 원하는 결과가 없을 경우 다른 검색엔진을 사용해야 함
․ 통합된 검색엔진의 필요성
4) 검색 엔진의 구조 (오른쪽 그림)
5) 검색 엔진의 종류
① 야후: 주제별로 정리된 디렉토리 서비스(http://kr.yahoo.com)
․ 주제별 검색과 검색어를 이용한 검색 모두 지원
․ 가장 큰 특징은 사이트들의 정확성을 매일 점검
․ 웹, 이슈, 지식, 블로그, 사전, 뉴스, 이미지, 동영상, 쇼핑, 지도 등의 검색 기능
② 네이버: 국내 검색엔진으로 국내 최대의 데이터 보유 (http://www.naver.com)
․ 국내 검색엔진에서 가장 다양한 옵션 제공
․ 이미지나 사운드 등의 멀티미디어 자료 검색 가능
․ 한글, 한자, 영어 처리와 복합명사 분석 기능
․ 검색어의 분포를 기반으로 한 랭킹 기술사용
․ 지식in, 전문자료, 책, 사전, 지역, 뉴스, 쇼핑, 사이트, 내PC 검색 기능
③ 구글: ․ 페이지 순위 기술에 의해 관련성이 높은 결과 상위에 게재 (http://www.google.co.kr)
․80억 개 이상의 웹 페이지를 매우 빠르게 검색․2000년 9월부터 한국어 검색 서비스 시작
․'비슷한 페이지수'링크 기능 제공으로 유사한 페이지 검색 가능
․ 웹 문서, 이미지, 뉴스, 디렉토리, 블로그, 학술검색, 계산, Gmail 등의 기능
④ 천리안: 한글의 특징적인 면을 고려한 검색 (http://www.chol.com)
․ 자연어 논리연산자와 한글 외래어를 영문으로 변환하여 검색
․ 검색의 정확성을 높일 수 있도록 질의어에 확장 기능 제공
․ 유의어의 종류로 한글확장, 영문확장, 발음확장 등을 제공
․ 천리안 폰, 나도 한마디, 블로그, 영화, 증권, 휴대폰, 파일링크 등의 기능 제공
⑤ 알타비스타: 방대한 자료와 빠른 검색 (http://kr.altavista.com/)
․ 웹문서와 유즈넷 뉴스그룹의 검색 가능 ․ 검색어와 날짜별 검색 가능, 다국어 지원
․ 주제별 분류와 다양한 메타문자 지원 ․ 이미지, MP3/오디오, 비디오, 번역 등의 기능 제공
⑥ 파란: 전화번호 안내와 정보검색 서비스의 통합 (http://www.paran.com)
․ 한국통신에 의해 개발된 검색 엔진
․ 전화번호안내, 정보검색, 커뮤니티, 다양한 부가 서비스 무료 제공
․ 한글, 한자, 영어, 중국어, 일본어 처리 기능
․ 주요 기능으로는 웹 검색, 전화번호 검색, 일본 웹 검색,
․ 뉴스 검색,멀티미디어 검색,지도 검색 등
⑦ 엠파스: 국내 검색엔진으로 단어와 문장을 통한 멀티미디어 검색 가능 (http://www.empas.com)
․ 1999년 11월 국내에서 개발한 검색 엔진 ․ 사용자가 원하는 단어나 문장으로 검색 가능
- 2 -
․ 자연어, MP3, 동영상, 이미지 파일 검색 가능 ․ 주로 전문 용어 검색에 효과적으로 이용
․ 검색 추천 기능을 지원
⑧ 기타 검색엔진
․ 인포시크: 자연어 검색 지원 http://www.infoseek.com/
․ 익사이트: 주제별 계층별 분류 http://www.excite.com/
․ 웹크롤러: 검색엔진 방법의 효시 http://www.webcrawler.com/
․ 핫봇: 쉬운 사용, 결과의 정확성이 높음 http://www.hotbot.com/
․ 카인즈: 각종 신문 잡지및 세계 각국 600여종의 영문잡지에 대한 뉴스검색 서비스 http://www.kinds.or.kr
2. 검색 사이트 활용하기 - 검색 사이트 활용 예
3. 전자도서관과 전자 신문 활용하기
1) 전자 도서관의 활용
․ 가상공간에서 인터넷을 통해 세계의 모든 정보 자원에 대한 시공간 초월 서비스
․ 자료의 디지털화를 통한 텍스트, 이미지, 음성, 동영상 등의 멀티미디어 서비스
전자도서관은 대부분 기존 도서관에서 운영하며 제한적인 원문서비스 가능 ․․
도서관 소장 자료의 목록 및 본문정보를 XML 데이터베이스로 구축하고 인터넷의 WWW를 통해 서비스
․ 한국의 경우 한국정보사회진흥원이 전담기관, 국립중앙도서관이 주관기관으로 추진
2) 전자 저널과 전자신문
① 전자 저널(ScienceDirect): ․ 1,800 여개의 저널, 총 33백만개의 초록을 통한 논문검색 사이트
․ 전자저널검색, 실시간 채팅, RSS 피드 지원, Scopus 인용정보, 고화질의 이미지 제공
② 전자신문 : ․ 범용성과 전문성을 동시에 만족하게 해주는 정보를 정기적으로 출간
․최신의 정보뿐만 아니라 과거의 정보도 신속하게 검색․국내 대부분의 신문사들이 전자신문 제공
- 1 -
4장 커뮤니케이션을 위한 인터넷 활용하기 핵심정리
miso4u
1. 웹 메일을 이용한 메일 보내기
1) 전자우편이란? ․ 인터넷 서비스 중 가장 기본적인 서비스
․ 인터넷 사용자간의 우편 교환 서비스 ․ 파일 등을 메일에 포함하여 전송 가능
․ 메시지 전달을 위한 기본적인 프로토콜:SMTP ․ 메일 박스는 각 사용자 별로 할당
2) 전자우편의 주소 양식: 사용자 ID@인터넷 주소
․ 사용자 ID : 해당 컴퓨터를 사용하고 있는 사용자의 ID
․ 인터넷 주소:사용자가 속해 있는 컴퓨터의IP 주소나 도메인 이름
․ 예 : dhkwak@knou.ac.kr
3) 전자우편의 전송 개념도
4) 웹메일이란?
․ 웹 브라우저를 통해 자신에게 온 메일을 확인
자신의 가 아닌 다른 곳에서도 메일 서비스 사용 가능 PC ․․
환경설정을 하지 않고 웹 브라우저를 바로 이용
․ 용량의 제한으로 받은 메일을 장기간 보관 불가
․ 대부분의 포털 사이트에서 웹 메일 서비스 제공
․ 스케줄관리, 기념일 관리, 메일 자동 발신 등과 같은 추가 기능
5) 무료 계정 제공 사이트
2. 아웃룩을 이용한 메일 관리하기
1) 아웃룩 익스프레스: 익스플로러에서 제공되는 전자우편 클라이언트 프로그램
전자우편 환경 설정:
․ 바탕화면에서 Outlook Express 아이콘을 더블클릭 ․ 상단 도구 메뉴에서 계정을 선택
․ 보내는 서버와 받는 서버 설정 ․ 계정 이름과 암호 설정
․ 인터넷 연결방법의 선택 ․ 설정의 정확성을 등록 정보를 통해 확인
2) 전자우편 프로토콜
․ SMTP(Simple Mail Transfer Protocol):전자우편을 송수신하기 위한 프로토콜
․ POP3(Post Office Protocol 3): 메시지를 볼 때 메일서버에 접속하여 모든 메시지의 헤더와 내용
을 사용자의 디스크로 가져 오는 것
․ IMAP(Internet Message Access Protocol: 메시지를 볼 때 메일서버에 접속하여 메시지의 헤더만
을 먼저 가져오고 실제로 보려고 할 때 내용을 가져오는 것
․ MIME(Multipurpose Internet Mail Extensions): 화상이나 음성을 포함한 멀티미디어 정보를 보낼
때의 표준 규격
서비스 업체 사이트 주소 서비스 업체 사이트 주소
야후 메일 http://mail.yahoo.co.kr 구글 메일 http://mail.google.com
다음 메일 http://mail.daum.net 드림위즈 메일 http://mail.dreamwiz.com
엠파스 메일 http://mail.empas.com 핫 메일 http://mail.hotmail.com
네이버 메일 http://mail.naver.com 코리아닷컴메일 http://mail.korea.com
파란 메일 http://mail.paran.com 천리안 메일 http://mail.chol.com
- 2 -
3. 메신저를 이용한 커뮤니케이션하기
1) 메신저(Messenger)란?
․ 메시지와 데이터를 실시간으로 전달 ․ 실시간 채팅, 전자우편, 파일 송수신 등의 기능
․ 여러 사람이 파일의 공유 가능 ․ 상대방의 접속 여부를 신속하게 확인 가능
․ 1:1 대화 및 여러 명이 동시에 대화 가능 ․ 대표적인 메신저로는 MSN, 야후, 네이버 등
․ Windows Live Messenger(kr.msn.com)를 이용한 화상통신
․ Skype(www.skype.com)을 이용한 화상통신 ․ MSN의 Netmeeting을 통한 화상채팅
2) 인터넷 채팅 예절(기술발전은 빠른데 문화발전이 따라오지 못한다.)
․ 자주 보는 마음가짐으로 대화 ․ 만나고 헤어질 때 인사
․ 여러명과 대화할 때 상대방을 혼돈하지 말 것 ․ 광고나 홍보 등 이름 알리기에 이용하지 말 것
․ 유언비어, 상호비방, 명예훼손 등에 유의할 것
- 1 -
5장 원격 컴퓨터 활용하기 핵심정리
miso4u
1. 원격 컴퓨터 사용하기
1) 원격접속(Telnet)이란?
․ 인터넷을 통해 다른 기업의 인트라넷에 접속
․ 원격 로그인을 위한 통신 프로토콜
․ 문자를 기반으로 하는 서비스
․ 가상 터미널을 이용한 원격데스크톱
․ TCP/IP를 이용한 가장 기본적인 서비스
2) 원격접속과 네트워크
․ 한국에서 ftp를 이용하여 외국 컴퓨터에 접속해서 자료, 정보검색
3) Netterm의 개요와 기능: 가장 보편화된 클라이언트 프로그램
․ 윈도우 98에서 가장 많이 사용되는 프로그램
․ 쉐어웨어로 PC통신, 인터넷에서 다운로드 (http://securenetterm.com/)
․ TCP/IP나 모뎀 접속 모두 사용 가능
․ PC통신망에 접속하여 자료 송수신 가능
4) 텔넷을 이용할 수 있는 주소
․ Windows XP 환경의 경우: [시작] → [실행]에서 telnet’입력 후 호스트 주소
2. 파일 전송하기
1) 파일전송(FTP)란?
․ FTP : File Transfer Protocol
․ 인터넷에 연결된 호스트간 파일 송수신
․ 빠른 접근 및 대화형접근 가능
․ 서버에 사용자를 위한 계정 준비
․ 윈도우 내장의 ftp.exe, GUI 환경의 WS_FTP, FTP Voyager, CuteFTP
․ 클라이언트-서버 모델로 동작
2) 파일전송의 개념도 → 위의 그림
3) Anonymous FTP(1)
․ 공유된 계정(anonymous)를 통해 접속: user ID는 anonymous
․ 공개된 자료 및 특정 자료에 접근 가능: /pub 디렉토리에 주제별로 분류
․ 접속 후에는 일반 FTP의 사용법과 동일
․ 국내 Anonymous FTP 서버: 예) ftp://ftp.kaist.ac.kr
4) CuteFTP의 개요와 특징: ․ www.cuteftp.com에서 다운받아 설치
․ Windows의 GUI환경에 적합 ․ 공개용 FTP 클라이언트 프로그램
․ 편리하고 쉬우며 파일 이어받기 기능 제공 ․ 간결한 인터페이스와 편리한 FTP 사이트관리
5) WS_FTP의 개요와 특징: ․ www.wsftp.com에서 다운받아 설치
․ Windows의 GUI환경에 적합 ․ 공개용 FTP 클라이언트 프로그램
․ 다양한 기능과 접속의 안정성 제공 ․ 상용 버전과 무료 버전으로 구분
3. 개인 대 개인 공유기 활용하기
1) 프루나의 개요와 특징: ․ www.pruna.com에서 다운받아 설치
․ 인터넷을 이용한 P2P방식의 공유 프로그램 ․ 컴퓨터가 클라이언트 및 서버의 역할 수행
․ 전 세계 수많은 네티즌들이 손쉽게 자료 교환 ․ 프루나의 기능 : 자료공유, 커뮤니케이션
서비스 내용 호스트 주소 계 정
천리안 chollian.net 상용서비스
나우누리 nownuri.net 상용서비스
- 1 -
6장 홈페이지 기획과 설계하기 핵심정리
miso4u
1. 홈페이지 기획하고 설계하기
1) 홈페이지란? ․ 정보를 표현하고 대화할 수 있는 인터넷 상의 가상공간
․ WWW 서비스를 통해 제공되는 정보의 지칭 ․ 다양한 멀티미디어 정보를 이용한 정보표현
․ 각각의 파일을 페이지 단위로 표현 ․ 하이퍼미디어 개념을 이용한 연결구조
․ HTML(Hyper Text Markup Language)로 작성된 웹문서
2) 홈페이지의 종류
․ 개인용 홈페이지: 개인 자신에 관한 관심이나 홍보사항
․ 상업용 홈페이지(영리 중심 회사): 회사의 소개 및 생산품의 판매
․ 비영리기관,단체 및 정부기관 홈페이지:기관, 단체의 정보공유 및 정부기관의 홍보
3) 홈페이지 제작에 필요한 프로그램
․ 텍스트 문서 편집기 : 메모장, 에디터플러스
․ 웹 문서 편집기:나모 웹 에디터,드림위버, 프론트페이지
․ 이미지 편집기 : 포토샵, 일러스트, 이미지 레디
․ 사운드 편집기: 사운드포지, 케이크워크, 골드웨이브
․ 동영상편집기 : 프리미어
․ 3D 제작 프로그램 : 3D MAX, Vecta 3D
․ 애니메이션 프로그램 : 플래시, 디렉터
4) HTML이란? :․ HTML : Hyper Text Markup Language
․ 인터넷에서 웹 문서 작성 및 교환을 위한 표준 언어 ․ 하이퍼텍스트 문서를 작성할 수 있는 언어
․WWW문서는 .html이나 .htm이라는 확장자 사용 ․태그(tag)를 이용하여 기술하는 Markup 언어
5) HTML의 기본 구조
① HTML은 헤더(Header)와 본문(Body)로 구분
② 문법 형식은 태그를 사용하여 기술
③ 태그(tag)라는 명령어들로 구성
․ <태그명> 내용 </태그명>
․ <A HREF=“http://www.yahoo.com”> yahoo</A>
․ 내용은 태그에 영향을 받음
6) HTML의 기본 구조 → 옆의 그림
7) HTML의 기본 태그
8) 나모 웹 에디터의 개요
․ WYSIWYG기반의 순수 국산 웹 에디터 ․ 멀티미디어 개체의 간단한 삽입과 편집 기능
․ 초보자를 위해 다양한 클립아트를 제공 ․ 웹 서버에 손쉽게 업로드 후 관리
9) 드림위버의 개요 : ․ 어도비사(매크로미디어사)가 만든 웹 저작도구
․ HTML 태그를 모르고서도 쉽게 홈페이지를 제작 할 수 있는 웹 저작도구
․ 드림위버 8은 데이터베이스와 연동되는 진보된 저작도구
태그 설명 태그 설명
<!__> 주석 <IMG> 이미지 삽입
<H1~6>~</H1~6> 폰트 크기 <A>~</A> 하이퍼링크
<BR> 줄 바꿈 <TABLE>~</TABLE> 표 삽입
<P>
<BR> 태그를 2번 이
용한 것과 같은 효과
<MARQUEE>~</MARQUEE>
스크롤 되는 문자열을
표시
<B>~</B> 글자 진하게 <FRAMESET>~</FRAMESET> 창틀 기본 설정
- 2 -
2. 홈페이지 작성 절차
1) 홈페이지 작성 절차
․ 기획 단계: 주제 선정, 스토리보드 작성
․ 등록 단계: 홈페이지를 웹 서버에 업로드
․ 홍보와 운영 관리 단계: 홈페이지를 홍보하고 유지 관리
2) 좋은 홈페이지를 위한 디자인 조건
․ 정적인 요소와 동적인 요소의 적절한 사용 ․ 방문자 중심의 편리성 추구
․ 효과적인 웹 컬러의 사용 ․ 레이아웃과 구성 요소의 통일
3) 홈페이지에서 성공적인 컬러 적용 방법
․ 편안하고 무난한 색상 ․ 통일된 색상(4-7개의 색상)
․ 상식에 부합되는 색상 ․ 보색은 주의해서 사용
․ 메인 컬러와 조화를 이루는 색상
4) 홈페이지 등록 및 출판
․ 제작한 홈페이지를 웹에서 서비스하기 위해 필요 ․ 자신에 알맞은 호스팅 방법 선정
․ 웹서버는 직접 운영 혹은 임대 운영 ․ 임대하여 운영하는 것을 호스팅이라 함
․ 호스팅은 서버호스팅과 웹호스팅으로 구분
․ 서버호스팅은 구매형, 임대형, 소유형으로 구분
․ 홈페이지를 서버에 업로드 하는 것을 홈페이지 출판이라 함
5) WS_FTP의 개요와 특징: ․ www.wsftp.com에서 다운받아 설치
․ Windows의 GUI환경에 적합 ․ 공개용 FTP 클라이언트 프로그램
․ 다양한 기능과 접속의 안정성 제공 ․ 상용 버전과 무료 버전으로 구분
3. 나모 웹 에디터 사용하기
1) 나모 웹 에디터의 특징: ․ 사용법이 워드프로세서와 비슷하여 홈페이지 제작이 용이
․ 다양한 언어를 사용 ․ 스타일 기능으로 통일된 홈페이지 작성
․ 레이어 기능으로 배치가 자유로움 ․ 출판기능으로 업로드 및 수정이 용이
- 1 -
7장 홈페이지 기초다지기 핵심정리
miso4u
1. HTML 기본태그
1) 메모장을 이용한 태그 만들기
←
2) 글자 관련 태그
3) 글자 크기 지정
4) 폰트 크기와 컬러 지정
<font size="숫자" face="폰트이름" color="색상"
5) 용어의 정의 목록 태그
․ 용어를 쓰고 그 아래 설명을 용어보다 우측 들여쓰기로 나타내는 형식
<DL> … </DL> 사이에 <DT>, <DD>를 사용
* <DL> … </DL> 용어를 설명하는 범위 지정
* <DT>: 설명할 용어의 이름을 적는 부분 * <DD>: 용어의 설명이 들어가는 부분
설 명 형 식
머리말 지정(주로 제목) <H[1,2,3,4,5,6]> … </H[1,2,3,4,5,6]>
글자 크기 <FONT SIZE = 숫자> </FONT>
단락 구분(한 줄을 띠움) 문장<P>
개행 문자(행을 나눔) 문장<BR>
수평선 <HR ALIGN=[LEFT/CENTER/RIGHT]> WIDTH=백분율, SIZE=숫자>
굵은 글씨체로 표현 <B>문자</B>
이탤릭체로 표현 <I>문자</I>
타자 글자 혹은 밑줄 글자 <TT, U>문자</TT, /U>
크게, 작게 표현 <BIG, SMALL>문자</BIG, /SMALL>
아래 혹은 윗 첨자로 표현 <SUB, SUP>문자</SUB, /SUP>
- 2 -
6) 다른 문서 연결하기
․ 페이지의 특정 위치로 가고자 할 때 사용
* 형식 <A HREF = "파일이름 및 URL"> 글자나 이름 </A>
* 예) <A HREF = "http://www.yahoo.com/"> yahoo </A>
* HREF: Hypertext REFerence의 약자 * A: Anchor를 의미하며 연결할 문서를 지정
․ 화면을 분할해서 각기 다른 웹문서 사용
* <BODY>부분 없이 <FRAMESET>을 사용
* 형식: <FRAMESET ROWS/COLS = "분할 비율">
프레임 분할 정보
</FRAMESET>
2. 입력양식 태그와 폼 태그
입력양식 태그 : 텍스트 박스
3. 멀티미디어 삽입 태그
1) 그래픽 자료 삽입: ․ 다양한 파일 형식 중 GIF와 JPEG만을 지원
․ 브라우저에 의해 그림을 표현
<IMG SRC = "그림파일명" ALLIGN = TOP/BOTTOM/MIDDLE WIDTH = 픽셀수/백분율
HEIGHT=픽셀수/백분율 BORDER=픽셀수 VSPACE=픽셀수 HSPACE=픽셀수 ALT=대체문자>
․ 그림의 크기 및 위치 정렬 <IMG SRC="IMG/TOTORO.JPG" WIDTH="500" HEIGHT="100">
․ 그림의 위치 정렬 <IMG SRC "IMG/TOTORO.JPG" ALAIGN="TOP">
․ ALT 문자열 넣기l <IMG SRC = "img/TOTORO.JPG" ALT="귀여운 토토로">
2) 오디오와 비디오 삽입
․ 오디오 및 비디오 파일 넣기: MP3, WMA, AVI, WMV와 같은 오디오 혹은 비디오 파일을 포함시킬 때
<A HREF="C:/VIDEO.AVI"> 비디오보기 </A>
<EMBED SRC= MMS://218.38.55.217/326574.WMA LOOP="TRUE" AUTOSTART="FALSE"> </EMBED>
․ 사운드파일 삽입 태그(모든 옵션은 서로 중복이 가능)
autostart=false: 사용자가 재생버튼을 눌러야만 재생이 시작
showstatusbar=true: 하단에 현재의 상태를 보여줌
showcontrols=false: 사용자가 제어할 수 있는 버튼들을 숨김
showaudiocontrols=false: 사용자가 볼륨 조절을 못하도록 불륨 콘트롤을 숨김
showpositioncontrols=false: 사용자가 강제적으로 다음 혹은 이전 곡으로 넘어가는 것을 방지
showtracker=false: 현재 곡이 진행되고 있는 상황을 표시하는 트랙 바를 숨김
3) 배경화면 지정
․ 화면의 배경그림, 배경색, 링크색 지정 ․ 색깔 지정은 16진수 RGB코드나 색상매크로 이용
<BODY BACKGROUND="이미지 파일" BGCOLOR="#컬러값" TEXT="#컬러값" VLINK="#컬러값" ALINK="#컬러값">
버튼 태그 출력 화면
<input type="text" name="text1" value="텍스트 글상자" maxlength="20＂ size"20"> 텍스트 글상자
<input type="password" name="text2" size"20" maxlength="20"> ********
버튼 태그 옵션 설 명
Type
일반 텍스트는 text 이며
암호 입력은 password를 사용하고 글자 입력시 *로 표시되며 입력
Name 텍스트 박스의 이름을 정의
Value 초기의 값을 지정
Size 텍스트 박스 크기를 지정
maxlength 입력최대 문자의 크기를 지정
- 1 -
8장 멀티미디어 홈페이지 만들기 핵심정리
튜터 김미수
1. 소리 자료 만들기[시작/프로그램/보조프로그램/엔터테인먼트/녹음기]
1) 소리 편집하기
소리를 편집할 수 있는 Tools: GoldWave, Adobe Audition, MuvAudio, MediaMonkey
GoldWave: ․ 가장 보편적인 셰어웨어 프로그램 ․ 현존하는 거의 모든 사운드 포맷을 지원
․ 대중적이고 다양한 기능을 제공하는 강력한 툴 ․ 초보자들도 쉽게 사운드 편집 가능
․ UNIX용 사운드 포맷 지원 ․ 다양한 툴바 및 사운드 장치 별도 운용 가능
2. 이미지 자료 만들기: 대표적인 이미지 편집 툴[포토샵, 페인트샵]
포토샵의 개요: ․ 미국의 Adobe사가 1990년 2월에 발표
․ 전 세계 다양한 분야에서 사용되는 그래픽 프로그램
․ 기존의 이미지에 합성이나 효과를 주어 색다른 이미지 생성
․ 잡지나 책표지,영화포스터,앨범 자켓 등의 제작에 주로 사용
․ 스캐너나 디지털 카메라로부터 스캔 혹은 캡처하여 다양한 포맷으로 저장
3. 애니메이션 자료 만들기
․ 대표적인 애니메이션 제작 툴 -2차원 애니메이션 도구 : Director, Animo
- 웹 애니메이션 도구 : 플래시, 애니메이티드 GIF -3차원 애니메이션 : 3D MAX, MAYA
플래시의 개요: ․ 어도비사(매크로미디어사)가 만든 대표적인 웹 애니메이션 도구
․ 파일 크기가 작아 전송속도의 최대화 가능
․ 백터 그래픽 형식으로 고품질의 이미지 제작 가능
․ 사운드 효과, 애니메이션의 재생과 정지 등의 제어 가능
1) UCC 만들기
․ UCC : User Created Contents
․ 일반 사용자가 직접 콘텐츠를 제작
․ 게시판의 뎃글,각종 패러디 이미지,다양한 블로그, 미니홈피 등
․ 대표적인 UCC 사이트: 픽스카우(http://www.pixcow.com), 풀빵닷컴(http://video.pullbbang.com)
․ UCC의 보정 및 편집 툴: PhotoScape(http://photoscape.co.kr)
2) 기타 주요 UCC 사이트 3) 기타 UCC 편집 및 보정 프로그램
4) 다양한 소스나 이미지의 웹 폴더
- 1 -
9장 홈페이지 서버구축과 운영하기 핵심정리
1. 블로그란?: ․ 웹(Web)과 기록(Log)의 합성어인 Web log의 줄인 말
․ 1997년 존 바거의 웹 사이트에서 처음 사용
․ 네티즌이 스스로 작성한 일기,기사,컬럼 등을 웹에 올려 놓은 일종의 온라인 뉴스 커뮤니티
․ 블로거(blogger) : 웹로그의 주인
․ 웹로깅(Weblogging) : 블로거가 웹에 자신의 흔적을 남기는 것
․ 모블로그(moblog) : 모바일(mobile)과 블로그(blog)의 합성어
1) 블로그 사이트
전문 블로그 사이트: 블로그인(www.blogin.com), 이글루스(www.egloos.com), 엔블로그
(www.nblog.co.kr)
주요 포털 사이트의 블로그: 야후 블로그(kr.blog.yahoo.com), 네이버 블로그(section.blog.naver.com),
한미르 블로그(blog.hanmir.com), 구글 블로그(blogsearch.google.co.kr)
2) 블로그의 특징
․ 각 게시물에 고유 주소 부여 및 자유로운 항해
․ 트랙백(trackback)이라고 하는 관련 글 기능을 지원
․ RSS 구독기를 통해 원격 블로깅하여 게시물을 읽거나 작성
․ 댓글이나 관련글을 통한 쌍방향 커뮤니케이션이 가능
․ RSS(Really Simple Syndication): 웹사이트 및 블로그 간의 자료 교환 및 배급을 위한 XML기반의 규격,
블로그의 필수 사항으로 정보의 블로그 정보의 변경을 손쉽게 확인
3) 블로그 화면의 구성
․ 일정한 규격은 없으나 대부분 블로그 화면은 블로그 제목,메뉴, 게시물 영역으로 구성
․ 블로그 제목에는 개인로고,블로그 이름,인사말 등을 가짐
․ 블로그 이름과 주소: 블로그 주소를 입력하면 첫 화면이 나타남
․ 게시물(entry, post): 블로그에 기본이 되는 글로 고유한 주소(permalink)를 가짐
․ 댓글: 리플이라고 하며 블로그에 작성된 글에 자신의 의견이나 느낌을 기술
․ 관련글(트랙백).달력,카테고리,지난글(아카이브)등
2. 웹 서버 만들기
1) 웹 서버의 종류
․ 윈도 XP : IIS(Internet Information Server) ․ 유닉스나 리눅스:아파치 웹 서버(Apache Web Server)
2) IIS를 이용한 웹 서버 만들기
․ 제어판→'프로그램 추가/제거'→'Windows 구성요소 추가/제거' → 'Windows 구성 요소 마법사' 실행
→'인터넷 정보 서비스(IIS)'를 체크→Windows XP CD를 넣고 확인 → IIS 웹 서버 설치 완료
․ 웹 서버의 루트 폴더 : c:₩inetpub₩wwwroot ․ 등록된 기본 문서 : default.htm, default.asp
3. 웹 서버 만들기
1) 도메인 설정하기:유동IP를 고정IP로 전환 필요
․ 도메인 설정 소프트웨어: - www.codns.com 에서 codns 프로그램 다운로드
- 압축을 풀고 프로그램(c3.nt.install.exe)을 실행하고 id와 패스워드 등록
- http://id.codns.com 로 구축된 웹 서버에 접속
2) FTP 서버 만들기
․ FTP 서버의 개요: 대용량 파일을 원격 서버에 업로드하거니 다운로드 할 경우 적절, 개인용 컴퓨터를 응
용 프로그램을 이용하여 FTP 서버로 구축 가능
․ 프로그램 찾기: - FTP 서버 데몬 : FTP Serv-U (shareware)
- http://file.naver.com에서 검색 후 프로그램 설치 - ftp://id.codns.com 를 통해 FTP 서버에 접속
- 1 -
10장 동적인 웹페이지 만들기 핵심정리
1. 자바 애플릿
1) 자바 언어의 개요: ․ 1995년 썬 마이크로시스템즈의 제임스 고슬링을 주축으로 개발된 언어
․ 네트워크 기반(WWW)의 환경에 적합한 객체 지향 프로그래밍 언어
․ 쉽게 배울 수 있으며 다양한 운영 플랫폼에 이식이 가능한 언어
․ 프로그램 코드량이 적고 분산소프트웨어를 쉽게 개발
․ 무선환경 및 기업환경의 대규모 시스템용 언어로 발전
2) 자바 언어의 특징: ․ 객체 지향적 언어 : 클래스, 메소드, 객체로 정의
․ 프로그래밍이 간단 : C++를 기반으로 간단화
․ 분산환경에 적합 : TCP/IP 기본 지원
․ 신뢰성과 보안성 : 자바 가상머신의 규정 내에서 작동
․ 높은 이식성 : 기계독립적인 바이트 코드 생성
․ 멀티스레드의 제공 : 여러 개의 프로그램 동시 실행
․ 자바 프로그램 : 자바 애플리케이션과 자바 애플릿으로 구분
3) 자바 프로그램의 동작 방식 → 옆의 그림 참고
4) J2SDK와 JRE
․ J2SDK(Java 2 Standard Development Kit): - 자바 소스 프로그램을 번역하여 바이트 코드 생성
- 컴파일러(javac.exe), 바이트 코드를 실행하는 인터프리터(java.exe), 자바 파일문서 생성기
(javadoc.exe), 디버거(jdb.exe)로 구성
․ JRE(Java Runtime Environment): 자바 바이트 코드(.class)를 실행하는 환경을 제공
․ 운영체제(Windows, Solaris, Linux 등)에 맞는 플랫폼을 설치해야만 함
․ 다양한 정보를 얻을 수 있는 URL: http://www.sun.com/download
5) 자바 애플릿의 개요: ․ 자바 언어로 작성하여 컴파일 된 작은 프로그램
․ 웹 사이트에서 웹 브라우저로 전송되어 실행 ․ 웹 사용자의 컴퓨터에서 동작하여 결과를 즉시 보여줌
․ 자바 언어로 만든 홈페이지 응용프로그램 ․ 인터넷 상에서 게임,채팅, 게시판,배너 등에 사용
6) 자바 애플릿의 지정방식
2. 자바 스크립트의 개요: ․ 넷스케이프사와 썬 마이크로시스템즈사에 의해 공동 개발된 스크립트 언어
․ 클라이언트에서 독립적으로 실행되는 프로그램 작성을 위한 스크립트 언어
․ CGI프로그래머나 HTML작성자들이 웹 페이지 간의 상호작용과 폼의 제어를 위해 사용
1) 자바 스크립트의 특징
․ 동적인 웹 페이지를 만들 수 있는 작고 쉬운 스크립트 언어
․ HTML문서 자체에 포함되며 컴파일링 과정 없이 브라우저에서 인터프리팅하여 실행
․ 클라이언트 측의 자바 스크립트의 경우 파일을 읽고 쓸 수 있는 기능이 없음
․ JHTML 문서의 많은 내장 객체를 지원하여 사용자의 입력으로 동적인 웹 페이지 작성 가능
<html>
…
<body>
<applet‎ code="filename.class width="450" height="100"…>
<param name="매개변수 지정“>
…
</applet‎>
</body>
</html>
- 2 -
2) 자바 스크립트의 지정방식
3) ASP(Active Server Page)의 개요
․ 1995년 말에 등장했으며 IIS3.0 이상에서만 작동하는 프로그램
․ 클라이언트가 요청하면 서버에서 응답해주는 방식의 서버측 프로그램
․ 서버에서 웹 프로그래밍이 가능하고 HTML과는 다른 동적 구성이 가능
․ Windows 운영체제에서만 사용할 수 있다는 단점
․ 웹 페이지 상에서 데이터베이스를 보여주고 그 안에 실제로 존재하는 데이터의 조작 가능
․ 클라이언트에서 실행되는 xxJavascript나 Vbscript‎와는 다르게 서버에서 실행되며 동적 기능 제공
4) JSP(Java Server Page)의 개요
․ 자바를 기반으로 하는 동적인 웹 사이트 개발 언어
․ ASP, CGI, PHP 등과 같은 서버측 스크립트 언어
․ 서버에서 실행되며 실행된 결과는 클라리언트에 전달
․ 자바 기반의 플랫폼의 많은 장점을 모두 취할 수 있는 서버측 스크립트 언어
․ HTML 문서 내부에 Java 언어의 코드를 그대로 포함시킬 수 있는 여러가지 방법들을 갖고 있음
․ JSP 문서는 크게 선언부, 표현식, 스크립트릿으로 나눌 수 있음
3. XML의 개요
․ HTML의 한계를 극복하고 SGML의 문서표준을 간결화한 확장가능 마크업 언어
․ HTML과 SGML의 단점을 없애고 둘의 장점만을 모아놓은 차세대 정보포맷 표준
․ 사용자가 원하는 문서형태인 DTD를 작성할 수 있는 데이터 구조의 유연성을 가짐
․ 온라인 출판,디지털도서관,전자상거래 등 거의 모든 분양에 활용
4. DHTML의 개요
․ 기존의 HTML 코드에 자바 스크립트와 스타일시트(CSS)를 사용하여 동적 페이지를 구현할 수 있는
HTML의 변형
․ 스타일시트는 DHTML에 의해 여러 속성을 지정하여 표현할 수 있는 방법
․ 스타일시트의 지정 방법: Linking/Embedding/In Line Style Sheet로 구분
<html>
…
<body>
<script language="xxJavaScript">
<!--자바 스크립트 소스//-->
…
</script>
</body>
</html>