[HTML5 웹 프로그래밍 입문 4판 Chapter 01 연습 문제 포함]

Chapter 01 웹 개요와 실습 환경 구축

✨인터넷과 웹 시작✨

인터넷(Internet)은 전 세계를 연결하는 국제 정보 통신망으로 컴퓨터나 스마트폰 같은 디지털 기기로 연결되어 정보를 공유하는 공간이다. 웹은 인터넷 공간에서 제공하는 서비스이다. 

 

미국 국방성에서 ARPA(Advanced Research Projects Agency) 부서를 창설했다. 1969년 아파넷(ARPANET)을 개발하고 1995년 인터넷이 전 세계에 연결되고 일반인이 사용할 수 있게 되었다. 

 

월드 와이드 웹은 1991년 팀 버너스리가 발표했다. 1993년에 소스 코드를 오픈했다. 웹 브라우저는 웹에 공개된 정보를 탐색할 수 있게 하는 프로그램이다. W3C(World Wide Web Consortium)는 국제 웹 표준화 단체로 HTML 표준을 비롯한 웹 표준안을 제작하거나 제안한다. 

 

 

✨웹 브라우저 전쟁과 웹 표준✨

1. 웹 브라우저 전쟁의 시작

모자이크는 최초의 GUI(Graphical User Interface) 웹 브라우저이다. 웹 브라우저 이름도 넷스케이프 내비게이터로 변경했다. 넷스케이프와 마이크로소프트는 W3C의 표준을 무시하고 기능을 많이 추가하며 경쟁한다. 

- 마이크로소프트: 운영체제에 자사 브라우저를 강제 설치

- 넷스케이프: 브라우저의 소스 코드를 공개하고 모질라 재단을 세움

 

플러그인은 PC에 프로그램을 추가 설치해 웹 브라우저의 기능을 확장하는 것이다. 어도비 플래시, 마이크로소프트 액티브 X 등 다양한 응용 프로그램을 편리하게 제작할 수 있게 되었다. 

 

2. 웹 2.0의 시대

웹 2.0은 유튜브, 위키피디아, 깃허브 등 사용자가 함께 새로운 콘텐츠를 창조할 수 있다.  하지만 인터넷 익스플로러에 플러그인을 삽입해서 웹 사이트가 무거워졌다. 

 

3. 웹 브라우저와 웹 표준

인터넷 익스플로러만 최신 표준을 지원하지 못하게 되면서 다른 웹 브라우저들 간의 경쟁이 심화되었다. 

 

 

✨웹 동작✨

웹은 요청과 응답의 형태로 동작한다. URL은 웹에서 어떤 대상을 구분하는 주소로, 웹 브라우저에서 웹 서버의 주소(URL)을 입력하면 웹 페이지를 제공한다.

HTML5 웹 프로그래밍 입문 4판

 

 

 웹에서 요청과 응답의 과정은 다음과 같다. 클라이언트(사용자)와 서버(제공자)가 등장하는데 여기서 클라이언트는 요청하는 쪽으로 웹 페이지를 제공받는 일반 사용자이다. 서버는 응답하는 쪽으로 네이버나 다음 등 웹 서비스를 제공하는 기업이다. 웹은 클라이언트가 서버에 HTML 페이지나 파일을 요청하면, 서버가 해당 요청에 응답해 요청한 HTML 페이지나 파일을 클라이언트에 제공하는 통로이다. 

 

서버 프로그램은 서버에서 실행되는 프로그램으로 백엔드 프로그램을 말한다. 클라이언트 요청에 따라 적절한 파일과 데이터를 제공하고 자바, C#, 루비, 파이썬, 자바스크립트 같은 프로그래밍 언어로 개발한다.

 

클라이언트 프로그램은 클라이언트에서 실행되는 프로그램으로 프론트엔드 프로그램을 말한다. HTML로 요소를 생성하고 CSS로 디자인해서 자바스크립트로 프로그래밍 요소를 부여한다. 웹 브라우저에서 실행되는 웹 페이지라면 모두 클라이언트 프로그램이다. 구글 문서 도구가 대표적인 클라이언트 프로그램이다. 

 

 

✨웹 표준 기술과 HTML5 주요 기능✨

1. 웹 표준 기술

현대 웹 페이지에 사용되는 표준 기술은 HTML5 표준, CSS3 표준, ECMAScript 표준이다. HTML5는 큰 의미로 CSS3와 자바스크립트를 모두 포함하는 웹 표준 기술을 총칭한다. 작은 의미로는 웹 페이지를 구성하는 HTML 마크업 언어 자체이다. (마크업: 웹 페이지의 서식이나 구조를 표현하는 정보) CSS3는 HTML 페이지에 스타일을 지정하는 스타일시트를 작성할 때 사용하는 언어이다. 자바스크립트는 HTML 페이지에서 사용자 반응 등을 처리하는 스크립트를 작성하는 언어이다. 움직이는 웹 페이지를 만들거나 사용자 반응을 처리할 수 있다. 클라이언트 웹 개발을 위해 만들어졌지만, 서버 개발, 로봇 개발에도 사용한다. 

HTML5 웹 프로그래밍 입문 4판

2. HTML5 주요 기능

HTML5 주요 기능에는 멀티미디어, 그래픽, 통신, 장치 접근, 오프라인 및 저장소, 시맨틱, CSS3 스타일시트, 웹의 성능 극대화 및 통합 등이 있다.

 

1. 플러그인 없이 음악, 동영상을 재생할 수 있게 된다(멀티 미디어).

2. 하드웨어의 가속을 받아 2, 3차원 그래픽을 구현할 수 있다(그래픽). 

3. 서버와 소켓 통신이 가능하다(통신).

4. 배터리 잔량, 현재 위치 등 장치 정보를 가져오거나 알람과 같은 장치 기능을 사용할 수 있다(장치 접근). 

5. 인터넷이 연결되지 않은 상태에서도 응용 프로그램을 동작시킨다(오프라인 및 저장소).

6. HTML 표준에서는 시맨틱 태그를 새로 추가했따. 시맨틱 웹이란 검색 엔진 같은 프로그램이 정보를 분석하고
자료를 검색하고 처리해서 제공하는 지능형 웹을 말한다(시맨틱).

7.  CSS3 스타일시트를 완벽하게 지원했기 때문에 3차원 변환, 애니메이션 효과를 적용할 수 있다(CSS3 스타일시트).

8. 웹 워커를 이용하면 사용자 화면을 멈추지 않으면서 연산 처리할 수 있다(웹의 성능 극대화 및 통합).

 

정리하면 HTML5는 다양한 기능을 추가하면서 일반 데스크톱 응용 프로그램을 만들 수 있을 정도로 발전했다. 

 

 

✨HTML5를 공부하면 좋은 이유✨

장치마다 운영체제가 달라도 웹에서 작동하는 프로그램은 모든 장치에서 사용할 수 있다. 또한, 다음 금융, 네이버 뉴스의 모바일 웹 페이지는 일반 애플리케이션처럼 동작하는 것을 볼 수 있듯이 애플리케이션 수준의 웹 페이지를 만들 수 있다.

 

또한, 리액트 네이티브를 사용해 모바일 애플리케이션을 만들 수 있다. HTML5로 개발했을 때 내부적으로 안드로이드와 아이폰에 맞는 네이티브 코드로 변환되어 폰갭의 성능 문제를 해결한 것이 리액트 네이티브(React Native)이다. 

 

---

✨01장 연습 문제✨

[연습문제 01] 다음 문장에 O X를 표시하시오.

(1) 웹은 1990년대 중반부터 모든 대중이 사용할 수 있게 되었습니다. (O)

(2) 모든 URI 은 URL입니다. (X)

(3) 2000년대 초에는 액티브X와 플래시 덕분에 웹 브라우저로 다양한 것을 할 수 있었습니다. (O)

(4) 자바스크립트를 사용하면 웹 페이지에 프로그래밍 요소를 부여해서 사용 자와 반응을 할 수 있다. (O)

(5) HTML5가 등장하여 그레이디언, 애니메이션 등 화려한 스타일을 CSS3 로 추가할 수 있게 되었습니다. (O)

(6) HTML5는 단방향 통신뿐만 아니라 양방향 통신뿐만 아니라 양방향 통신 도 가능합니다. (O)

(7) HTML5 배터리 잔량 같은 장치 정보도 가져올 수 있습니다. (O)

(8) 웹 브라우저에서 작동하는 클라이언트 프로그램은 기본적으로 C++, 자 바, C#, 파이썬 등 프로그램으로 개발합니다.  (X)

(9) 인터넷의 모태는 아파넷입니다. (O)

 

[연습문제 02] HTML5를 개발하고 표준화한 주요 조직은 무엇인가?

① W3C, WHATW

② IEEE, IETF

③ ISO, ANSI

④ OASIS, ECMA

 

[연습문제 03] HTML5가 도입되면서 더 이상 사용하지 않게 된 기술을 모두 고르시오.

① CSS3

② Flash

③ JavaScript

④ ActiveX

 

[연습문제 04] 본문 내용을 기반으로 다음을 설명하시오.

(1) HTML5를 큰 의미와 작은 의미로 나누어서 설명하시오.

큰 의미로 CSS3와 자바스크립트를 모두 포함하는 웹 표준 기술을 총칭한 다. 작은 의미로는 웹 페이지를 구성하는 HTML 마크업 언어 자체이다. 여 기서 마크업이란 웹 페이지의 서식이나 구조를 표현하는 정보이다.

 

(2) HTML5를 사용해 스마트폰 애플리케이션을 개발할 때 장점을 설명하시 오.

장치마다 운영체제가 달라도 웹에서 작동하는 프로그램은 모든 장치에서 사용할 수 있다. 예를 들어 다음 금융, 네이버 뉴스의 모바일 웹 페이지는 일반 애플리케이션처럼 동작한다. 따라서 애플리케이션 수준의 웹 페이지를 만들 수 있다.

 

[연습문제 05] 는 생략했습니다.

 

[연습문제 06] 웹 2.0 사례를 찾아 발표하시오.

웹 2.0이라고 해서 굉장히 거 창해 보이지만, 많은 사람이 모여 이야기를 나누며 어떤 가치가 창출되었다면 모두 웹 2.0의 예이다. 예를 들어 네이버 지식인도 대표적인 2.0의 예라고 할 수 있다. 또 “지진이 발생하면, 디시인사이드 지진희 갤러리에 글이 가장 먼저 올라온다.”라는 조금 이상해 보이는 상황도 웹 2.0의 예라고 할 수 있다. - 티스토리 블로그: 누구나 쉽게 블로그를 개설할 수 있고, 자신의 경험이나 습득한 지식의 정보를 공유할 수 있다. 또한, 댓글이나 공감을 통해 사용자 들 간에 소통하고 협력할 수 있다있다는 점에서 웹 2.0의 예라고 할 수 있다.

 

 

3판하고 4판하고 연습문제가 다르더라고요!! 다들 열심히 공부합시다..~