메뉴 건너뛰기

웹 프로그래밍,

소위 웹 페이지 제작은 HTML 태그를 이용하여 페이지를 만들고, CSS3로 모양을 꾸미고, 자바스크립트로 사용자 인터페이스나 응용프로그램을 작성하는 과정으로 이루어집니다.

이 3가지 지식이 모두 필요하므로 웹 프로그래밍은 쉬운 것 같으면서도 어려운 분야입니다.

 

얼마 전부터 웹은 오래된 옷을 벗고 HTML5라는 새로운 옷으로 갈아입고 있습니다.

HTML5는 검색 엔진이 좋아하는 가치 있는 웹 페이지를 만들 수 있도록 시맨틱 태그를 표준화하고, PC나 모바일 단말기 등 기기에 관계없이 작동되는 웹 어플리케이션을 만들 수 있도록 자바스크립트 API를 표준화하여 단순히 정보만을 교류하던 웹 페이지를 웹 응용프로그램이 되도록 그 지평을 넓혔습니다. 그렇기 때문에 HTML5의 공부가 HTML 태그와 CSS3를 이용한 웹 문서 제작에 머무른다면, 기존의 HTML 공부와 별반 다르지 않습니다. 저자는 HTML5 기술을 제대로 전달하기 위해 HTML5 태그, CSS3, 자바스크립트를 모두 아우르도록 내용을 구성하고, 특히 자바스크립트 API로 HTML5 웹 응용프로그램을 작성하는 지식을 예제와 실습 중심으로 저술하였습니다.

 

웹에 대한 공부는 특별히 실습이 중요합니다. 그래서 저자는 www.webprogramming.co.kr 사이트를 만들어 교수님들께선 강의 시간에 바로 활용하고, 학생들은 언제 어디서나 예제를 실행해보고 수정하여 연습해볼 수 있도록 하였습니다.

 


 

명품 웹 프로그래밍은 총 14장의 강의로 구성되어 있습니다.

각각의 장에 대한 제목과 개략적인 내용은 아래와 같습니다.

 

1장 : 웹 프로그래밍과 HTML5 개요

이란 무엇일까요?

1장에서는 웹이 가지는 근본적인 목적과 간단한 배경지식, 역사, 작동 메커니즘, 구성 등에 대해 익히고 앞으로 웹 프로그래밍을 공부하는데 있어 어떤 방향으로 공부해 나가야 할 것인지 학습하게 됩니다. 또한 내용 후반부에는 간략한 예제를 통해 웹 프로그래밍을 어떠한 방식으로 하게 되는지 맛볼 수 있습니다.

 

2장 : HTML5 기본 문서 만들기

HTML이란 하이퍼텍스트 마크업 언어(HyperText Markup Language)의 약자로, 웹 문서를 작성하는데 쓰이는 태그(Tag)언어 입니다.

2장에서는 바로 이 HTML을 이용하여 웹 페이지의 기본적인 골격을 만드는 방법과 자주 쓰이는 다양한 주요 태그에 대해 공부합니다.

한편 HTML4에서 HTML5로 세대가 변화함에 따라 비권고되거나 아예 사라져버린 여러 태그들이 있는데, 그러한 태그에 대해서도 학습하게 됩니다.

 

3장 : HTML5 문서 구조화와 웹 폼

HTML5 문서를 표준 구조화 태그를 사용하여 구조화하면, 검색 엔진은 해당 웹 문서에서 특정 정보를 탐색하기가 쉬워집니다.

검색 엔진이 웹 문서를 탐색하기 쉬워진다는 것은 곧 포털 사이트에서 특정 키워드를 검색했을때 노출될 확률이 높아지고, 그 웹 페이지의 가치가 올라간다는 뜻입니다. 3장에서는 검색 사이트에 노출이 잘 되게 하기 위한 문서의 구조화 기법을 익히고, 사용자로부터 여러가지 다양한 입력을 받기 위해 사용되는 웹 폼(form)과 폼 요소(element)에 대하여 공부하게 됩니다.

 

4장 : CSS3로 웹 페이지 꾸미기

3장에서는 웹 문서를 구조화하는 방법을 배웠습니다. 그러나, 구조화를 잘 해놓아서 웹 페이지가 노출이 많이 된다 하더라도 외관이 단순하고 눈에 띄지 않으면 사용자들의 관심을 얻기 힘들 것 입니다. 4장에서는 HTML의 외관을 꾸밀 수 있는 언어인 CSS3의 기본적인 개념과 문법을 익히고, 이를 이용해 웹 문서에 꾸미는 방법을 학습합니다.

 

5장 : CSS3 고급 활용

4장에서 CSS에 대한 기본적인 사용방법을 익혔다면, 5장에서는 좀더 심화된 내용을 다루게 됩니다. 여러 요소들의 색이나 크기등을 조절하는 것을 넘어 내가 원하는 위치에 요소를 배치하거나 애니메이션을 적용하여 태그를 움직이게 만드는 등 다양한 CSS 고급문법의 사용법에 대해 학습합니다.

 

6장 : 자바스크립트 언어

지금까지 만들어왔던 웹 페이지는 사용자의 입력을 인식할 수 있는 도구들은 배치할 수 있었지만, 입력 자체를 처리 할 수 있는 기능은 만들 수 없었습니다.

계정을 접속하고, 어떤 버튼을 누르면 경고 창이 발생하는 등 "Action"을 구현하기 위해선 어떻게 해야하는 걸까요?

6장에서는 사용자들의 다양한 입력을 입맛대로 처리할 수 있는 자바스크립트 언어의 간단한 소개와 기본적인 문법, 특성 등에 대해 배웁니다.

 

7장 : 자바스크립트 코어 객체 및 배열

6장에서 배운 자바스트립트에 객체(Object)의 개념을 추가하여 배우는 장입니다. 객체란 현실세계에 존재하는 사람, 책상, 자동차, TV, 컴퓨터 등의 실체를 코드 상에서 사용하기 위해 추상화한 데이터의 집합을 의미합니다. 하나의 객체는 정보를 표현하는 속성(Property)과 그 정보를 이용하여 특정한 기능을 수행하는 메소드(Method)로 나뉩니다. 지금까지 정수, 실수, 부울 등의 기본 타입 자료만을 이용하여 자바스크립트를 구성했다면, 7장에서는 앞서 설명한 객체를 이용하여 다양한 고급기능을 수행하는 법을 배우게 됩니다.

 

8장 : HTML DOM과 Document

브라우저는 우리가 작성한 태그를 어떤 방식으로 관리할까요? 분명 무언가 체계적으로 구조화된 방식으로 태그들을 다루고 있을 것입니다. 사실, 브라우저는 우리가 작성한 HTML 태그를 최상위 계층부터 아래로 뻗어 가지치며 뻗어내려오는 트리(Tree)구조의 형태로 변환하여 관리합니다. 그리고 하나의 태그는 하나의 객체(Object)로 변환합니다. 이 객체의 트리구조를 DOM(Document Object Model)이라고 부르며, 8장에서는 이 DOM을 이용하여 웹 페이지 로드 이후에도 동적으로 태그의 속성들을 변경하는 방법에 대하여 공부합니다.

 

9장 : 이벤트 기초 및 활용

이벤트(Event)란, 브라우저 상에서 일어나는 사용자의 다양한 행동입니다. 화면상에서 특정 버튼을 클릭한다거나, 텍스트필드에 문자열을 타이핑 하는 등 사용자의 행동들은 브라우저 상에서 모두 이벤트로 처리됩니다. 또한, 이미지나 HTML 문서의 로딩, 특정 시간으로부터 몇 초가 지난 뒤 등 문서나 브라우저의 상태 변화도 이벤트로 다루어집니다. 9장에서는 웹 페이지에서 이벤트가 발생시 특정 메소드를 수행할 수 있도록 하여 반응형 웹 페이지를 작성하는 법을 배웁니다.

 

10장 : 윈도우와 브라우저 관련 객체

앞서 8장에서 배운 DOM을 이용하면 브라우저가 웹 페이지 로딩이 완료된 이후에도 여러 태그들을 동적으로 변화시킬 수 있습니다. 만약 태그가 아니라, 브라우저의 위치를 옮기거나 크기를 조절하고, 자동으로 스크롤 바를 내리거나 새로운 창을 띄우는 등 브라우저 자체를 다루려면 어떻게 해야 할까요? 브라우저도 고유한 속성을 가지고 있진 않을까요? 그렇다면, 혹시 이것도 DOM처럼 트리구조의 형태로 다루어 지진 않을까요? 네, 맞습니다. 브라우저에 관련된 정보들도 하나의 객체로 표현되며, 이를 BOM(Browser Object Model)이라고 부릅니다. 10장에서는 BOM을 이용하여 브라우저에 관련된 다양한 속성들을 동적으로 처리하는 방법에 대해 공부합니다.

 

11장 : HTML5 캔버스 그래픽

HTML5가 세상에 등장하기 전, 웹 개발자들은 그래픽 애니메이션이나 사용자 그래픽이 필요한 경우 자바 애플릿이나 플래시 등의 플러그인을 활용하였습니다. 하지만 플러그인을 이용하는 방법은 별도의 응용을 설치해야 하는 번거로움과 웹 페이지의 로딩이 지연되는 문제가 있고, 호환성도 매우 떨어지는데다가 모바일 단말기에는 설치할 수 없어 많은 불편함이 따랐습니다. HTML5에서는 이러한 문제를 해결하기 위해 모든 단말기, 모든 브라우저에 대해 호환되는 그래픽 처리 전용 모듈인 캔버스 기능을 도입하였으며, 11장에서는 바로 이 캔버스를 이용하여 그래픽과 관련된 다양한 기능을 처리하는 방법에 대해 배웁니다.

 

12장 : HTTP와 쿠키, 웹 스토리지

혹시 브라우저가 어떤 방식으로 서버에서 데이터를 내려받는지 생각해보신 적 있나요? 우리 눈에 보이지는 않지만, 브라우저와 웹 서버 사이에는 필요한 자원들을 주고받는 절차와 형식을 정한 HTTP 통신 규칙이 있습니다. 사람들은 이것을 HTTP 프로토콜이라 부르고, 브라우저를 통해 웹 서버와 통신할 때엔 반드시 이 규칙을 사용하자고 약속했습니다. 한편, 브라우저는 서버와 통신 중에 사진이나 음악, 동영상등 고용량의 자원들을 반복적으로 요청해야 하는 경우가 있습니다. 이 때, 서버는 이런 자원들을 요청받을때마다 매번 일일히 브라우저에게 데이터를 전송할까요? 정답은 "아니다" 입니다. 쿠키와 웹 스토리지를 이용하면, 브라우저가 이전에 사용했던 자원이나 행동, 양식등을 사용자 컴퓨터에 저장하고 재사용할 수 있도록 하여 트래픽을 최소화 할 수 있습니다. 12장에서는 HTTP 프로토콜과 쿠키 및 웹 스토리지에 학습합니다.

 

13장 : 오디오 비디오 제어 및 위치 정보 서비스, 웹 워커

13장에서는 크게 3가지를 배우게 되는데, 첫번째로 HTML5의 모든 환경에서 작동하는, 표준을 이용한 오디오 및 비디오의 제어 방법에 대해 배웁니다. 그리고 그 다음 두번째로 geolocation 객체를 이용하여 위치 정보를 다양하게 이용하고 처리하는 방법에 배웁니다. 마지막으로 세번째로는 브라우저의 백그라운드에서 실행되어지는 작업 전용 자바스크립트, 웹 워커에 대해 배웁니다.

 

14장 : 웹 프로그래밍 응용

지금까지 웹 개발에 필요한 전반적인 지식을 학습하였습니다. 이제는 실전입니다! HTML5로 여러분의 무한한 상상력을 표현해보세요. 14장에는 그림판과 숨은 강아지 찾기 게임 소스 예제가 있습니다. 이 2개의 예제를 참고로 하시어 여러분만의 최고의 웹 응용을 만들어보세요.

위로