Front-End-Web/html+css

제01강_인터넷과 web환경의 이해

jsBae 2022. 10. 7. 23:59
학습목표
html 학습 전 인터넷과 Web 환경을 이해한다.
1.  인터넷과 Web 개요
2. WWW 개요
3. HTML5
4. 웹브라우저와 편집기

1. 인터넷과 Web 개요

§인터넷
•우리가 사용하는 컴퓨터를 전 세계 규모로 연결한 것

l1967년 미국방성의 지원으로 군사정보를 공유하기 위해 시작 (ARPANET)

l1982년 : TCP /IP 프로토콜을 채택하여 인터넷 환경기반을 갖춤

l1986년 : NSF 미국과학재단에서 5곳의 슈퍼컴퓨터를 연결한 학술망 구축 (NSFNET) : 백본망구축

l1991년 : 상업적 서비스 시작-현재의 인터넷환경

§인터넷과 웹은 다르다 .

§인터넷은 웹의 개념이 나오기 전부터 만들어진 컴퓨터 연결 네트워크
•1969년 미 국방성 고등 연구 계획국(ARPA)
•여러 대학들과 계약 업체 사이의 컴퓨터 연결
•컴퓨터마다 고유한 주소(IP 주소, 113.198.80.208)를 부여하여 컴퓨터 구분 (IPv4)
•인터넷을 활용하는 응용 서비스 사례
•전자우편(e-mail)
•뉴스(news)
•파일 전송(ftp)
•채팅(Internet Relay Chat)
•메신저(Messenger)
•P2P(Peer to Peer)
•스트리밍 서비스(Streaming Service)
•인터넷 전화기(Internet Phone)
•월드 와이드 웹(World Wide Web)
 

§월드 와이드 웹, 웹(WWW)

  • 인터넷을 활용하는 응용 서비스 중의 하나
  • 웹 서버와 웹 브라우저로 구성되는 정보 전달 및 공유 서비스

인터넷이 고속도로라면 웹은 고속도로 망을 이용한 물류 산업

2. 월드 와이드 웹(World Wide Web)

§웹의 탄생

  • 1989년 공학자인 "팀 버너스리( Tim Berners Lee)"에 의해 탄생

§웹의 기본 목적

  • 다른 여러 컴퓨터에서 문서를 공유하거나 보는 목적
  • 웹에서 다루는 문서를 웹 문서라고 부름

§웹의 구조

  • 인터넷을 활용하여 거미줄처럼 연결된 정보 소통 망, World Wide Web
  • 웹 문서를 인터넷 상의 컴퓨터들끼리 주고 받는 네트워크 시스템
  • 간단히 줄여서 WWW 나 W3라고도 부르며, 간단히 웹(Web)이라고 가장 많이 불림.

§웹의 구성

  • 웹 서버와 웹 클라이언트 컴퓨터들로 구성
  • 웹 서버
    • 웹 사이트를 탑재하는 컴퓨터. 구글(www.google.com), 네이버(www.naver.com) 등
    • 웹 문서, 이미지. 동영상 등의 데이터 저장 관리
    • 웹 클라이언트의 요청을 받아 웹 문서 전송
    • 웹 서버로 작동하도록 하는 소프트웨어 실행
•웹 클라이언트
  • 사용자 인터페이스 담당
  • 웹 서버에 웹 문서를 요청하고 받아 사용자에게 출력

§WEB 요소와 원리

 

웹 서버와 웹 클라이언트로 이루어진 웹

 

§웹 문서 – 대표적인 hypermedia

•HTML 언어로 작성/웹 브라우저로 보기
•웹 문서는 페이지 단위로 파일에 분할하여 저장
  • 페이지 마다 하나의 파일에 나누어 작성되고 저장 – 웹 페이지
  • 각 페이지는 하이퍼링크로 연결
•웹 페이지
  • 텍스트 만 저장 - 이미지, 그래픽, 동영상 등은 별도의 파일로 저장
  • 웹 페이지에 이미지, 그래픽, 동영상 파일의 이름으로 연결
•웹 페이지들의 연결
  • 하이퍼링크(hyperlink) – 다른 웹 페이지의 주소를 가진 텍스트 정보
  • 웹 페이지들은 하이퍼링크로 상호 연결됨
•웹 문서를 읽는 순서는 사용자가 결정
  • 웹 문서는 사용자가 하이퍼링크를 따라 웹 페이지 선택 – 내비게이션
  • 전자 문서는 문서를 만드는 사람이 결정
  •  

§웹 페이지의 주소, URL (Uniform Resource Locator)

Ÿ프로토콜 : HTTP, https, file, ftp, telnet, mailto, news 등
Ÿ서버주소 : 웹 페이지를 가진 컴퓨터의 인터넷 주소, IP 주소
ŸTCP/IP 포트 번호 : 서버가 브라우저로부터 접속을 기다리는 TCP/IP 포트 번호.
  • •프로토콜마다 다르며, HTTP의 경우 80, telnet은 23
Ÿ경로명 : 웹 서버 내 웹 페이지 파일의 폴더 경로
Ÿ파일이름 : 웹 페이지의 HTML 파일 이름

3. HTML5 (Hyper Text Markup Language)

§HTML 언어의 역사

•1990년 물리학자인 Tim Berners-Lee가 정의
•표준화된 태그로 웹 페이지를 작성하는 언어
•<img>, <hr>, <table>, <li> 등

§HTML5는 "Hyper Text Markup Language" 5의 약자로
HTML 4.01, XHTML 1.1 등을 대체하는 차세대 웹표준(2014년 10월 28일)으로 확정.

§기존의 HTML의 경우, 텍스트와 하이퍼링크만 표시하였지만, HTML5는 오디오, 비디오, 그래픽 처리 등의 다양한 기능을 제공하여 웹 자체에서 처리할 수 있는 기능이 향상

§HTML5 출현 배경

1. 비표준 기술의 혼재, 웹 브라우저의 비 호환성
•Active-X나 플러그인, 플래시 등 비표준 기술 난립
•브라우저 사이에 HTML 문서와 웹 자원에 대한 심각한 비호환성
2. 인터넷 기기의 다양화

PC, 모바일 단말기 등에서 모두 웹 사용
기존의 웹 페이지가 모바일 기기에서 작동하지 않음
•3. 새로운 범용 웹 표준의 필요성
•비표준 기술에 의존하는 PC 위주의 기존 웹 방식의 한계
•모바일 기기(스마트 폰과 태블릿 장치 등)를 수용할 수 없음
•모바일과 PC 에서 동시에 사용할 수 있도록 하는 범용 웹 표준 필요성 대두
 

§새로운 웹 표준 ->  HTML5

HTML5 이전의 웹과 HTML5를 도입한 웹의 비교

4. 웹 브라우저와 웹 편집기

§웹 브라우저

•HTML 문서를 읽고 웹 페이지에 정보를 표시하는 소프트웨어
•URL(Uniform Resource Locator)을 통해 접근

§웹 브라우저 기능

•웹 페이지 탐색
•접속하는 프로그램의 주소 관리
•웹 페이지의 저장, 인쇄, 소스 파일 보기
•웹 페이지 보안에 관련된 각종 필터 도구 제공

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)