01. 인터넷과 웹 시작
- 인터넷의 개념: 전 세계를 연결하는 국제 정보 통신망. 컴퓨터와 스마트폰 같은 디지털 기기로 연결된, 사람들의 정보 공유가 가능한 공간.
- 인터넷의 시작: 미국 국방성. 신기술을 개발하는 APPA 부서에서 아파넷을 개발.
아파넷은 핵과 같은 공격에 대비해 전체 통신 시스템에서 데이터를 안전하게 보관하고 전송할 수 있게 하는 시스템. 민간 연구용과 군사용 시스템을 분리, 민간 연구용이 현재의 인터넷으로 발전.
- 웹의 시작: 유럽 공동원자핵연구소의 팀 버러스 리가 개발. 인터넷에서 문서 사이를 쉽게 이동할 수 있는 기능인 하이퍼링크 제안. 기반으로 웹 World Wide Web, www을 발표. 사용 인구 폭발적으로 증가, 웹의 소스 코드 무료 공개.
- 버너스 리의 W3C, World Wide Web Consortium 창설. HTML 표준을 비롯한 웹 표준안 제작, 제안하는 일을 하는 국제적인 웹 표준화 단체. 이때 표준을 제정했어도 강제하지는 않음으로 웹 브라우저 전쟁이 시작.
02. 웹 브라우저 전쟁과 웹 표준
1. 웹 브라우저 전쟁의 시작
- 미국 일리노이공과대학교 연구 기관 NCSA에서 모자이크라는 GUI(그래픽 사용자 인터페이스) 웹 브라우저 최초 발표.
모자이크 핵심 개발자 마크 앤드리슨이 모자이크 커뮤니케이션, 웹 브라우저 서비스 전문 업체 창설, 모자이크를 본뜬 웹 브라우저 발표. NCSA에서 불만 표시해 넷스케이프 커뮤니케이션으로 변경.
마이크로소프트 인터넷 익스플로어 발표. 윈도우 운영체제에 강제 설치, 애플의 매킨토시에 기본 웹 브라우저로 설정. 이이에 넷스케이프의 소스 코드 공개 및 모질라 재단 창설.
결과적으로 넷스케이프 붕괴. 이 전쟁동안 웹 발전속도에 비해 WC3는 웹 표준에 빠르게 대응하지 못함. 기업들의 플러그인 제작.
- 플러그인의 개념: 사용자 PC에 프로그램을 추가로 설치해 웹 브라우저의 기능을 확장하는 방법. 어도비 플래시와 액티브X와 같은 플러그인은 웹을 더 풍부하게 만듦. 동영상과 음악 감상, 은행 업무 처리 등.
2. 웹 2. 0 시대
- 웹 2.0의 개념: 서로 다른 사용자가 함께 새로운 콘텐츠를 창조할 수 있는 시대. 유튜브, 위키피디아, 깃허브.
3. 웹 브라우저와 표준
- 인터넷 엑스플로어의 플러그인 삽입으로 인한 웹 사이트의 무거움 문제 발생. 모질라 재단과 오페라 소프트웨어가 W3C 회의에서 새로운 HTML 표준 제안, 거부받음. 인터넷 익스플로어를 제외한 웹 브라우저 기업이 모여 새로운 웹 표준 기관 조직 WHATWG 설립.
WHATWG은 새로운 웹 표준, Application 1.0 표준 작성. 동시에 발표된 W3C의 XHTML 2.0은 폐기. 공백기를 메우기 위해 Application 1.0 표준을 새로운 웹 표준으로 채택하고 HTML라는 이름으로 변경.
인터넷 익스플로어가 최신 표준을 지원하지 못하는 현상이 발생하며 웹 점유율을 뒤집을 기회가 됨. 10년이 흘러 웹 브라우저의 승자는 구글 크롬의 승리로 막을 내리는 중.
03. 웹 동작
- 웹: 요청과 응답이라는 간단한 형태로 동작.
배민으로 비유하면 요청은 주문, 응답은 배달. 음식점은 웹 서버. 음식점에게 주문하기 위해 알아야 하는 주소는?
- URL: 웹에서 어떤 대상을 구분하는 주소.
즉 웹 브라우저에 원하는 웹 서버의 주소를 입력하면, 웹 브라우저에서 웹 페이지가 제공됨.
- 요청하는 쪽: 클라이언트, 응답하는 쪽: 서버.
웹은 클라이언트가 서버에게 HTML페이지/파일을 요청하면 서버가 응답해 요청받은 것을 클라이언트에게 제공하는 통로.
- 서버 프로그램=백엔드 프로그램(사용자와 먼 곳에 있음): 서버에서 실행되는 프로그램
클라이언트 프로그램=프론트엔드 프로그램(사용자와 가까운 곳에 있음): 클라이언트에서 실행되는 프로그램.
서버 프로그램은 클라이언트 요청에 따라 적절한 파일/데이터 제공.
서버 프로그램 개발은 자바, 씨샵, 루비, 파이썬, 자바스크립트 같은 프로그래밍 언어로 개발. 웹 서버를 쉽게 개발하기 위한, 이 프로그래밍 언어 기반의, 기본 웹 프레임워크/ MVC 프레임워크/ 비동기 프레임워크.
이때 프레임워크: IOC 속성을 가진 모듈 의미.
클라이언트 프로그램은 웹 브라우저에서 작동하는 프로그램, 즉 서버에서 전달된 HTML 파일 의미.
HTML, CSS, 자바스크립트로 개발. => HTML로 요소 생성, CSS로 디자인, 자바스크립트로 프로그래밍 요소 부여.
04. 웹 표준 기술과 HTML5 주요 기능
1. 웹 표준 기술
- 웹 표준 기술은 세 가지: HTML5 표준, CSS 표준, ECMAScript 표준(=자바스크립트 표준).
HTML5: 큰 의미, CSS+자바스크립트까지 포함하는 웹 표준 기술 총칭.
작은 의미, 웹 페이지를 구성하는 HTML 마크업 언어.
마크업: 웹 페이지의 서식 및 구조를 표현하는 정보.
CSS: HTML 페이지에 스타일을 지정하는 스타일시트 작성시 사용.
현대 웹 페이지에서 매우 중요한 역할.
자바스크립트: HTML 페이지에서 사용자 반응 등을 처리하는 스크립트 작성 언어.
움직이는 웹 페이지 제작 가능, 사용자 반응 처리 가능. 클라이언트 웹 개발을 위해 만들어진 언어이지만 현대에는 서버 및 로봇 개발에도 사용.
즉, HTML: 웹 페이지 구성, CSS: 스타일 적용, 자바스크립트: 사용자 반응 처리 등.
2. HTML5 주요 기능
- 멀티미디어: 플러그인의 도움 없이 음악/동영상 재생 가능.
- 그래픽: 2차원/3차원 그래픽 구현 가능.
2차원 그래픽을 구현하는 방법:
1) HTML 태그 사용으로 2차원 벡터 그래픽 구현.
2) 자바스크립트 캔버스 사용으로 2차원 래스터 그래픽 구현.
3차원 그래픽을 구현하는 방법:
1) CSS 사용으로 구현.
2) 자바스크립트 WebGL 사용으로 구현.
- 통신: HTML5는 서버와 소켓 통신이 가능.
HTML 페이지는 일방향 통신(서버에 데이터를 요청해 받아만 옴)으로 구현, HTML5는 서버와 실시간 쌍방향 통신 구현 -> 실시간 채팅/온라인 게임 가능.
- 장치 접근: 장치 정보(배터리 잔량, 현재 위치)/장치 기능(알람) 사용 가능.
구글 지도와 네이버 지도가 GPS를 사용하는 것이 대표적인 예.
- 오프라인 및 저장소: 인터넷 연결되지 않은 상태에서 응용 프로그램 동작 가능.
즉, HTML5을 응용 프로그램 중심으로 사용하는 운영체제 등장 의미.
- 시맨틱: 시멘틱 웹(검색 엔진 프로그램이 정보 분석/자료 검색과 처리 및 제공하는 지능형 웹)을 구현하는데 필요한 시맨틱 태그 추가.
- CSS3 스타일시트: 3차원 변환/애니메이션 효과 가능.
- 웹의 성능 극대화 및 통합: 기존의 성능 극대화.
최종적으로 일반 데스크톱 응용 프로그램 제작 가능 수준으로 발전. 현재는 간단한 워드 작업/게임이 가능.
05. HTML5를 공부하면 좋은 이유
운영체제가 다르다면 각 운영체제에 맞는 프로그램 개발이 필요. 그러나 웹에서 작동하는 프로그램은 모든 장치에서 사용 가능.
- 애플리케이션 수준의 웹 페이지 제작 가능.
- 데스크톱 애플리케이션 제작 가능.
일렉트론: HTML5 기반의 데스크톱 애플리케이션 개발 엔진.
- 모바일 애플리케이션 제작 가능.
리액트 네이티브: 페이스북이 제작한 모바일 애플리케이션 개발 엔진. HTML5로 개발시 내부적으로 안드로이드/아이폰에 적합한 네이티브 코드(해당 스마트폰에 적합한 프로그래밍 언어 코드)로 변환.
HTML5로 한번 개발해 여러 장치에 대응 가능: 크로스 플랫폼(한번 개발해 여러 플랫폼에 대응하는 것) 가능.
06. 실습 환경 구축
HTML 페이지를 작성할 에디터, 작성 페이지를 실행해 결과를 확인할 웹 브라우저 필요.
- 에디터: 비주얼 스튜디오 코드 사용. HTML, CSS, 자바스크립트 등 웹 기술만으로 제작된 데스크톱 애플리케이션. 웹 개발에서 가장 많이 사용.
- 웹 브라우저: 모든 웹 브라우저에서 동작. 지금은 구글 크롬 사용.
'교재 정리 > HTML5' 카테고리의 다른 글
| 웹 프로그래밍 (9) 자바 스크립트 기본 문법 (0) | 2024.05.07 |
|---|---|
| 웹 프로그래밍 (3) HTML5 기본 태그 (0) | 2024.04.01 |
| 웹 프로그래밍 (2) 웹 페이지 기본 구조와 작성 방법 (0) | 2024.03.18 |
