본문 바로가기

HTML5 + CSS3 + Javascript (웹 프로그래밍)/01. 웹 프로그래밍과 HTML5 개요

1. 웹 개요

들어가며

 아주 오랜만이다. 빨리 휴학하고 싶다.

 대학 근처 땅 한 번 밟아보고 2학년이 됐다.

 뭐가 어떻게 돌아가는 지도 모르겠고,
나 조차도 정신이 없어서

 관심을 가지고 싶어도 정신적으로 너무
지쳐있다.

 그래도 자기개발을 멈추면 도태되고
나 또한 원치 않기 때문에

 공부한다, 자의에 의해서.

 아무튼 자의라고.

 

웹의 기본 목적과 구성

 웹의 기본 목적은 한 컴퓨터에서
만든 문서(doucment)

 다른 컴퓨터에서 쉽게 볼 수
있도록 하는 것이다.

 특별히 이 문서를 '웹 문서'라고 부른다.

 이 목적을 달성하기 위해

 인터넷으로 전 세계의 컴퓨터들을
거미줄처럼 연결하고

 웹 문서를 주고받을 수 있도록
시스템을 만들었다.

 이를 WWW(World Wide Web),
즉 간단히 줄여 웹(Web)이라고 한다.


 웹은 컴퓨터의 기능을 '서버'
'클라이언트'로 나누었다.

 웹 서버는 문서나 이미지, 동영상 등의
데이터를 저장하며,

 웹 클라이언트는 웹 서버로부터

 데이터를 다운받아 사용자에게
보여주거나

 사용자의 데이터를 웹 서버에
업로드하는,

 사용자의 인터페이스의 역할을 한다.

 인터넷에는 많은 웹 서버가 있으며,

 사용자는 웹 브라우저를 통해 웹 서버에
접속한다.

 웹 서버가 되기 위해서는 '웹 서버
소프트웨어' 탑재해야 하며,

 웹 클라이언트로서 작동하기
위해서는

 웹 브라우저(Web Browser)
있어야 한다.


 웹 서버에는 많은 웹 페이지와 DB를을
가지고 '웹 사이트(Web site)'가 만들어진다.

 구글, 네이버, 아마존 등이 대표적인
웹 사이트다.

 

인터넷과 웹은 다르다

 사람들은 인터넷(Internet)과 동일하게
바라보는 오류를 범하기도 한다.

 이 둘은 엄연히 다르다.

 인터넷은 모든 컴퓨터가 다음과 같이
4개의 숫자로 이루어진 IP 주소를 부여받고,

 이 주소는 서로 연결하는 통신의 기본 체계로,
웹이 나오기 훨씬 전부터 있었다.

113.198.80.208

 


 1969년 미 국방성 고등 연구 계획국인
ARPA가 여러 대학들과 계약 업체 사이의

 컴퓨터를 연결하면서 시작되었고,

 1990년대 초, 인터넷(Internet)이라는
이름으로 활용되기 시작하여,

 오늘날 전 세계의 컴퓨터가 연결된
네트워크가 되었다.

 그리고 지금까지 인터넷에는 다음과
같은 다양한 서비스가 개발되어
활용되고 있다.

  • 전자우편(e-mail)
  • 뉴스(news)
  • 파일 전송(ftp)
  • 채팅(Internet Relay Chat)
  • 메신저(Messenger)
  • P2P(Peer to Peer)
  • 스트리밍 서비스(Streaming Service)
  • 인터넷 전화기(Internet Phone)
  • 월드 와이드 웹(World Wide Web, WWW)

 한편, '월드 와이트 웹'이라고 불리는
웹(www)은 여러 인터넷 서비스 중의
하나로,

 문서를 서버 컴퓨터에 올려놓고

 인터넷을 통해 클라이언트 컴퓨터에서
읽거나 쉽게 주고받을 수 있도록 만든
서비스다.

 오늘날 인터넷에서 가장 많이 활용되는
서비스가 웹 서비스이다 보니,

 자칫 전공자들까지도 인터넷이 웹이고,
웹이 인터넷이라는 잘못된 생각을
하게 된다.


 정리하면, 나라 전역에 펼쳐진 고속도로가
인터넷이라면,

 은 고속도로망을 이용한 물류 산업(유통업)
이라고 볼 수 있다.

인터넷이라는 가상의 길(통로)로, 데이터라는 물류가 유통되기 때문이다.
이 때의 웹은, 그러한 물류 산업, 유통업과 같은 추상적 개념이라고 할 수 있다.

 

웹 브라우저

 웹 브라우저는 웹 서버에 접속해서
웹 페이지, 이미지, 동영상, 음악 등

 다양한 데이터를 다운받아 보여주는
소프트웨어이다.

인터넷 익스플로러, 오페라, 파이어폭스, 크롬, 엣지 등이 대표적이다.
팀 버너스 리(Tim Berners-Lee, 1955년 6월 8일 ~)

미국의 컴퓨터 과학자이다.
1989년 월드 와이드 웹의 하이퍼텍스트 시스템을 고안하고 개발했다.
인터넷의 기반을 닦은 여러 공로로 '웹의 아버지'라고 불리는 인물 중 하나이다.
URL, HTTP, HTML 최초 설꼐도 그가 한 것이다.
현재 그는 차세대 웹 기술인 시멘틱 웹 기술의 표준화에 힘쏟고 있다.

팀 버너스리는 웹과 자신이 고안해낸다른 여러가지 기술들을 특허도 내지 않고 무료로 이용할 수 있도록 하였고,
이것은 당장 자신의 형편보다는 앞으로의 자유로운 인터넷 발전을 위해서 한 행동이었으며, 그로 인해 인터넷이 더 빨리 발전할 수 있었고,
이러한 공로로 2004년 영국 왕실에서는 기사 작위도 수여받았다. 1994년 월드 와이트 웹 컨소시엄(W3C)을 만들었고 현재도 활발히 활동중이다.

 

웹 브라우저의 역사

 웹 브라우저가 진화해온 역사를 간단히
알아보자.


최초의 웹 브라우저, WorldWideWeb

 WorldWideWeb은 웹(Web)의 개념을
창시한 '팀 버너스리'가 최초로 만든
웹 브라우저이다.

 이것은 그가 1990년 유럽핵입자물리연구소
(CERN)에서 비정규직으로 일할 당시

 인터넷상에서 정보를 공유하고 최신 정보로
갱신할 수 있는 기능을 가진 시스템을 제안하고,

 이 개념과 기능을 증명하기 위해 웹 서버
(CERN HTTPd)와 함께 만든 소프트웨어이다.

 당시 웹 브라우저의 이름을 '월드와이드웹
(WorldWideWeb)'으로 지었지만,

 후에 '넥서스(Nexus)'로 개명하였다.

 

넷스케이프 내비게이터(Netscape Navigator)

 1993년 마크 앤드리슨(Mar Andreessen)은
NCSA(전미 슈퍼컴퓨터 응용 연구소)에서

 일반인도 사용하기 쉽도록 GUI 환경을 갖춘
'모자익(Mosaic)'이라는 웹 브라우저를 발표했다.

 그 후 그는 넷스케이프(Netscape) 사를
창업하고,

 1994년 '넷스케이프 내비게이터(Netscape Navigator)'
를 세상에 내놓았으며,

 순식간에 세계에서 가장 많이 사용되는
웹 브라우저로 주목 받았다.

 모자익과 넥스케이프 내비게이터는
1990년 초기,

 대학이나 연구소의 컴퓨터 전문가들만
사용하였던 인터넷을 대중에게 보급하여

 오늘날 인터넷 세상을 여는데 지대한
공헌을 하였다.

 

인터넷 익스플로러(Internet Explorer, IE)

 1995년 마이크로소프트가 추격을 시작하여

 인터넷 익스플로러(Internet Explorer)
세상에 내놓았다.

 IE를 윈도우 OS에 끼워 배포하였기 때문에
기존에 세계 시장을 호령하던 브라우저인

 넷스케이프 내비게이터가 순식간에
IE에 의해 시장을 잠식당하게 되고,

 IE는 2000년대 초반까지 세계 시장의 90%
이상을 점유하면서 웹을 지배하였다.

 특히 한국에서는 윈도우 운영체제의
점유율이 압도적이어서 IE가 시장을
거의 지배하였다.

 하지만 최근 들어 모바일 시장의 확대와
크롬 브라우저의 등장으로 인해

 IE의 점유율이 30% 이하로 떨어지고 있다.

 

오페라(Opera)

 1994년부터 오페라 소프트웨어사에 의해
개발이 시작되어

 1996년에 세상에 나오게 되었다.

 다른 웹 브라우저보다 프로그램 크기가
작고 화면 출력 속도가 빠르다고 알려졌지만,

 현재 사용은 미미한 수준이다.

 

사파리(Safari)

 애플은 1997년까지 자사의 매킨토시
(Apple Macintosh) 컴퓨터에

 넷스케이프 내비게이터를 탑재하였지만,

 Mac OS 8버전 이후부터는

 독자적인 웹 브라우저를 가지려 했던
스티브 잡스(Steve Jobs)는

 2003년 7월 Mac OS에서만 실행되는
'사파리(Safari)'를 세상에 내놓았고,

 2007년 아이폰(iPhone) 출시와 함께
모바일 운영체제인 iOS에도

사파리를 도입하였다.

 

모질라 파이어폭스(Mozilla Firefox)

 MS와의 웹 브라우저 전쟁에서 패배한
넷스케이프는 결국

 1998년 3월 넷스케이프 커뮤니케이터
(넷스케이프 내비게이터의 최신 버전)의
소스 코드를 공개하여 대응하고,

 오픈 소스를 관리하는 '모질라(Mozilla)'
재단을 만들었다.

 모질라 재단은 2002년 오픈 소스인
'파이어폭스(Firefox)'를 세상에 내놓았다.

 파이어폭스는 W3C(World Wid Web Consortium)의
표준 권고안을 가장 충실히 따라 만들어진 것으로
알려져 있다.

 

구글 크롬(Google Chrome)

 2008년 드디어 새로운 웹 브라우저 강자가
나타났다.

 구글은 '크롬(Chrome)'이라고 부르는 무료
웹 브라우저를 내놓았으며,

 크롬은 PC, 데스크탑, 모바일 기기 등
세계 시장에서 빠르게 점유율을 높여가고 있다.

 크롬은 현재 가장 많이 사용되는
웹 브라우저로 평가받고 있다.

 

마이크로소프트 엣지(Microsoft Edge)

 MS는 2015년부터 IE의 업그레이드를
멈추고,

 윈도우 10부터 새롭게 개발한 웹 브라우저
'마이크로소프트 엣지(Microsoft Edge)'
탑재하였다.


웹 브라우저의 시장 점유율

 인터넷 기술의 여러 통계를 주로 다루는
넷마켓쉐어(Netmarketshare)라는 곳이 있다.

 이곳에서 조사한 웹 브라우저의 세계 시장
점유율은 [그림 1-5]와 같다.

 난데 없이 [그림 1-5]는 어디 있으며, 이전
그림들은 다 어디 있는지 궁금한가?

 단 28,000원(배송비 별도)로 유익하고
전문적인 정보와 지식을 배울 수 있는

 본 서를 구입해서 직접 확인하는 것을
권장한다.

명품 HTML5+CSS3+Javascript 웹 프로그래밍
국내도서
저자 : 황기태
출판 : 생능출판(생능출판사) 2017.01.16
상세보기

 

웹 서버와 웹 사이트

 웹 사이트의 구축은 웹 서버로 사용할
컴퓨터에 웹 서버 소프트웨어를 설치하고,

 작성한 웹페이지들을 저장하고, 동영상
이미지 등의 파일과 데이터 베이스를
설치하는 것을 말한다.

 또한 사용자에게 다양한 서비스를
제공하는 웹 응용 프로그램을 개발하여
설치하는 것을 포함한다.

 

웹 서버 소프트웨어

 웹 서버 소프트웨어는 웹 브라우저로부터
요청을 해석하여

 웹 문서를 전달하거나 적절한 웹 응용
프로그램을 작동시키고

 실행결과를 다시 전송하는 소프트웨어이다.

 여러 종류가 있지만 대표적인 것은 다음과
같고, Apache가 현재 가장 많이 사용되고 있다.

  • Apache 사에서 제작한 Apache
  • MS 사에서 제작한 Windows NT에서만 실행되는 ITS
  • NGINX 사에서 제작한 nginx
  • Google 사에서 제작한 구글 사이트에서 실행되는 GWS(Google Web Server)

 

웹 서버 응용프로그램

 '서버 소프트웨어를 개발한다.'라고 하면

 바로 이 웹 서버 응용프로그램
작성한다는 뜻이다.

 사용자에게 제공하는 다양한 서비스는
바로 웹 서버 응용프로그램의 몫이다.

 웹 서버 응용프로그램은 다양한 언어들로
개발할 수 있다.

C/C++, Java Servlet, Java Server Page , Node.js, PHP, Perl, Python 등
참고로 구글 검색 사이트의 하단부는 C++로 작성되어 있고, G-mail은 Java로 작성되어 있다.

 

웹 문서와 전자 문서의 차이

 웹 문서와 전자 문서의 차이를 알아보자.

 MS Word, 아래아 한글, 메모장 등으로
작성된 문서를 종이 문서와 구분하여

 전자 문서(Electronic Document)라고
부르며,

 컴퓨터에서 문서라고 하는 것들은
모두 전자 문서를 지칭한다.

 전자 문서는 여러 페이지로 구성되지만
보통 하나의 파일에 저장된다.

 또한 문서 파일 내에 텍스트, 이미지,
그래픽 등이 통합되어 저장된다.

 그러므로 전자 문서를 보낼 때 문서 파일
화나만 있으면 된다.


 한편, 웹 문서는 HTML* 언어로 작성하며,
간단히 HTML 문서라고 부르고

 다음과 같이 전자 문서와 다른 여러 특징을
가진다.

HTML: HyperText Markup Language

 

웹 문서의 특징 - 1

 첫째, 웹 문서는 페이지 단위로 분할된다.

 웹 문서의 기본 단위는 '웹 페이지(Web Page)'
라고 부르는 페이지다.

 10개의 페이지로 구성되는 문서가 있다면

 웹 문서로 만들 경우, 10개의 웹 페이지
파일로 나누어 작성되어야 한다.

 페이지마다 주제를 정하고 주제에 맞는
내용을 담는다.

 그러므로 웹 페이지의 크기는 모두 같지 않다.

 

웹 문서의 특징 - 2

 둘째, 웹 페이지에는 텍스트만 담고,
텍스트가 아닌 이미지, 동영상, 오디오 등의

 멀티미디어 데이터는 별도 파일로 만들어
웹 페이지에서 파일의 이름이나 주소로
연결한다.

 본서의 [그림 1-7]에서는 웹 페이지가 이미지나 동영상 등을 이름이나 주소로 연결하고 있는 것을 보여준다.

 

웹 문서의 특징 - 3

 셋째, 웹 페이지 사이의 연결은
하이퍼링크(Hyperlink)를 이용한다.

 하이퍼링크는 다른 웹 페이지나
이미지 등의 주소를 가진 텍스트이다.

 웹은 같은 서버에 있는 웹 페이지 뿐만
아니라 다른 웹 서버의 웹 페이지를

 하이퍼 링크로 연결하여 웹 문서를
만들 수 있도록 지원한다.

 웹 페이지들이 하이퍼 링크로 연결되어,
웹 문서를 이루기 때문에

 웹 문서하이퍼텍스트(Hypertext)라고
부른다.

 

 전 세계의 웹 페이지들은 하이퍼링크로
거미줄(Web)처럼 연결되며,

 웹 브라우저는 하이퍼링크를 따라 세계
어디에 있든 웹 페이지를 읽어올 수 있다.

 이런 식으로 사용자가 하이퍼링크를 따라

 인터넷이라는 정보의 바다를 누비는 것을
내비게이션(Navigation)이라고 부른다.

 거미줄을 뜻하는 웹(Web)*으로 명명된
이유가 바로 여기에 있다.

웹은 World Wide Web, WWW, W3라고도 부른다.

 

웹 문서의 특징 - 4

 넷째, 전자 문서의 경우 문서를 읽는 순서를
문서 작성자가 정하지만,

 웹 문서의 경우, 사용자가 정한다.

 즉, 종이 문서나 전자문서는 사용자가

 첫 페이지부터 읽기 시작하여 순차적으로
페이지를 읽는다.

 문서를 만든 사람이 읽는 순서를 정한
것이다.

 하지만, 웹 문서는 사용자가 한 페이지를
보다가

 하이퍼링크를 따라 다른 웹 페이지로
이동하면서

 원하는 페이지를 선택하여 읽는다.

 웹 문서에서 웹 페이지는 순서가
명료치 않으며

 문서를 읽는 사용자가 읽는 순서를 정한다.

 

웹 페이지의 주소, URL

 웹 브라우저가 웹 사이트에 접속하면

 웹 사이트는 대표 웹 페이지를 웹
브라우저에게 보낸다.

 대표 웹 페이지를 디폴트 웹 페이지라고도
부르며,

 그 이름은 웹 서버의 설정 사항으로서,

 index, html, default.html 등이 주로
사용된다.

 웹 페이지는 확장자가 '.html'인 텍스트
파일로 작성되며,

 2장부터 자세히 다룬다.


 웹 페이지의 이름이나 주소는

 웹 서버의 주소와 웹 페이지 파일의
경로명으로 구성된다.

 웹 페이지는 이미지, 동영상 등 인터넷
자원의 주소를 표현하는

 URL*로 표현하며 사례는 다음과 같다.

* URL, Uniform Resource Locator

http://www.oracle.com:80.technetwork/java/index.html

 URL의 각 요소를 간단히
설명하면 다음과 같다.

  • http:// - 프로토콜

    http, https, file, ftp, telnet, mailto, news 등

  • www.oracle.com- 서버주소

    웹 페이지를 가진 컴퓨터의 이름 혹은 인터넷 주소(IP 주소)

  • :80 - TCP/IP 포트 번호

    서버가 브라우저로부터 접속을 기다리는 TCP/IP 포트 번호.
    프로토콜마다 다르며 http의 경우 80, telent은 23

  • .technetwork/java/ - 경로명

    웹 서버 내 웹 페이지 파일의 폴더 경로

  • index.html - 웹 페이지 파일 이름

    웹 페이지의 파일 이름

 웹 페이지를 액세스 하기 위해서는

 보통 http나 https 프로토콜에
'80 포트'를 사용한다.

 디폴트가 80이므로 생략할 수 있다.

 파일 이름이 생략되면 웹 서버는
디폴트 파일*을 찾게 되는데,

* 대표 HTML 파일

 그 이름은 앞서 설명한 바와 같이
index.html, default.html을 많이
사용한다.

 웹 브라우저는 HTML 문서 보기 뿐
아니라,

  • ftp(파일 전송, file transfer protocol)
  • telent(원격 로그인)
  • mailto(메일 보내기)
  • file(로컬 파일 읽기)

 등의 서비스도 제공한다.

 http와 달리, https를 사용하면 보완을
강화하기 위해

 웹 브라우저는 웹 서버에 접속할 때
전자 인증서를 사용한다.

TCP/IP 포트란?

은행에는 전담 창구가 있다. 1번 창구는 대출, 2번 창구는 통장, 3번 창구는 외환 등 전담 은행원이 고객을 기다리고 있다. 고객은 원하는 서비스에 따라 전담 창구로 가야 한다. 서버 컴퓨터(은행) 역시 여러 서비스를 제공하는데, 여러 TCP/IP 포트(창구)를 열어 놓고 클라이언트의 접속을 기다리고 있다. 포트에 따라 서비스가 서로 다르다. 예를 들면 80번 포트는 웹 서비스(https), 20번 포트는 파일 전송(ftp), 23번 포트는 원격 로그인(telnet) 서비스 등이다.

 

웹 브라우저와 웹 서버 사이의 통신, HTTP

 웹 브라우저와 웹 서버는 웹 페이지나
이미지 등의 자원을 주고 받기 위해

 HTTP*라고 부르는 그들만의 통신 방법을
가지고 있다.

HTTP: HyperText Transfer Protocol
HTTPS: HyperText Transfer Protocol Secure

 HTTP 통신웹 브라우저가 요청하고
웹 서버가 응답하는 방식으로 작동한다.


 기본적인 HTTP 통신 과정을 간략히 알아보자.

  1. 웹 브라우저 - 웹 서버(www.oracle.com) 연결 요청
  2. 웹 서버 - 웹 서버의 연결 수락
  3. 웹 브라우저 - HTML 페이지(index.html) 요청
  4. 웹 서버 - HTML 페이지(index.html) 읽기
  5. 웹 서버 - HTML 페이지(index.html) 전송
  6. 웹 브라우저 - HTML 페이지 해독 및 출력

 사실 이 부분에도 [그림 1-9]가 독자의
이해를 돕지만,

 더 양질의 정보를 얻고 싶다면....
대충 무슨 뜻인지 안다고 믿겠다.


 먼저 웹 브라우저는 사용자가 입력한
URL에서 서버의 주소,

 www.oracle을 알아내고 웹 서버 컴퓨터에
접속한다.

 그리고 웹 페이지 index.html를 요청한다.

 오라클 웹 서버는 index.html 파일을
찾아 요청한 웹 브라우저로 전송한다.

 웹 브라우저는 index.html 파일을 해석하여
그래픽으로 화면에 출력한다.

 1~5 사이의 과정을 'HTTP 세션'이라고 부른다.

 하나의 HTTP 세션동안 오직 하나의
HTML 파일만 전송된다.

 

 HTML 파일 뿐만 아니라 이미지, 동영상,
자바스크립트 파일, CSS 스타일 파일,
오디오 파일 등은

 모두 웹 서버가 가지고 있고 한 번의
HTTP 세션 동안 하나의 파일만 전송되므로,

 10개의 이미지를 가진 HTML 페이지를
출력하기 위해서는

 웹 브라우저는 웹 서버와 11번의 HTTP
통신*을 수행해야 한다.

HTTP 통신: 웹 브라우저가 요청하고 웹 서버가 응답하는 통신 방식
HTML 파일(웹 페이지)을 위해 1번, 10개의 이미지 파일에 대해 10번.
총 11번의 HTTP 세션이 수행된다.

 HTTP 프로토콜은 12장에서 더 자세히 설명한다.


참고 및 출처

명품 HTML5+CSS3+Javascript 웹 프로그래밍
국내도서
저자 : 황기태
출판 : 생능출판(생능출판사) 2017.01.16
상세보기