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

주디(Junior developer) 2021. 4. 9. 00:34

* 이 글은 황기태 저자의 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 - 웹 페이지 행동 및 응용 프로그램 (사용자 인터페이스 처리)