[HTML + CSS + Javascript] 웹 프로그래밍과 HTML5 개요

* 이 글은 황기태 저자의 HTML5 + CSS + Javascript 웹 프로그래밍 교재를 참고하여 작성했습니다.

 

 

1. 웹 개요

 

웹 -  1. 웹 서버   

                 - 문서, 이미지 등의 데이터를 저장 (웹 서버 소프트웨어 탑재)   

                 - 웹 문서를 전송

                 - 웹 사이트 ( 웹 페이지 + 데이터베이스)     * 웹 페이지는 WWW상에 존재하는 개개의 문서

        2. 웹 클라이언트

                 - 데이터를 다운 받아 사용자에게 보여주거나 업로드하는 사용자 인터페이스 역할 (웹 브라우저 탑재)

                 - 웹 문서를 요청

 

 

 

 

 

인터넷  ≠  www(월드 와이드 웹)

 

인터넷 - 컴퓨터 연결 네트워크, 컴퓨터마다 고유한 IP주소를 가진다.

www  - 인터넷 서비스 중 하나,  웹 브라우저와 웹 서버로 구성되는 정보 전달 및 공유 서비스

 

 

 

 

웹 브라우저

 

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

- 웹 브라우저와 웹 서버로 구성

 

 

 

 

웹 서버와 웹 사이트

 

웹 사이트 구축 - 컴퓨터에 웹 서버 소프트웨어 설치 + 작성한 웹 페이지 저장 + 파일과 데이터베이스를 설치 + 웹 응용 프로그램 개발 및 설치

 

*웹 서버 소프트웨어 - 웹 브라우저로부터 요청을 해석하여 웹 문서를 전달하거나, 적절한 웹 응용 프로그램을 작동시키고 실행결과를 다시 전송

 

*웹 응용 프로그램 - 사용자에게 다양한 서비스 제공

 

 

 

 

 

웹 문서 vs 전자 문서 

 

전자 문서 - 한글, 메모장 등으로 컴퓨터에서 작성한 문서

웹 문서 - HTML언어로 작성된 문서

              특징) 1. 페이지 단위로 구성

                       2. 하이퍼링크(웹 페이지 간 연결)

                       3. 웹 페이지는 텍스로만, 이미지나 동영상은 이름이나 주소로 연결

 

 

 

 

웹 페이지의 주소, URL

 

구성) 

1. 프로토콜 - http, https 등

2. 서버주소 - 웹 페이지를 가진 컴퓨터 이름 또는 인터넷 주소

3. TCP/IP 포트 번호 - 서버가 브라우저로부터 접속을 기다리는 포트 번호

4. 경로명 - 웹 서버내 웹 페이지 파일의 폴더 경로

5. 파일 이름 - 웹 페이지의 파일 이름  (보통 index.html 또는 default.html)

 

 

 

 

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

 

HTTP 통신 - 웹 브라우저(요청)와 서버(응답)간의 통신 방법

1. 웹 서버 연결 요청    (웹 브라우저)

2. 웹 서버 연결 수락    (웹 서버)

3. HTML 페이지 요청  (웹 브라우저)

4. HTML 페이지 읽기  (웹 서버)

5. HTML 페이지 전송  (웹 서버)

 

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

 

 

 

 

웹 페이지 구성 3요소

 

1. HTML - 웹 페이지 구조와 내용

2. CSS - 웹 페이지 스타일, 모양

3. Javascript - 웹 페이지 행동 및 응용 프로그램 (사용자 인터페이스 처리)