필요한 것만 골라서 빠르게 써먹는 바로바로 HTML5

김지훈 , 김도균 , 이현우 , 진정원 저자(글)

지앤선 · 2016년 06월 29일

책 소개

처음 웹 프로그래밍을 경험하는 사람을 위해 알기 쉽게 쓴 [필요한 것만 골라서 빠르게 써먹는 바로바로 HTML5]. 책은 꼭 알아야 할 내용 중심으로 쉽게 설명하고 친절한 글과 한눈에 쉽게 파악할 수 있도록 저자의 경험을 반영한 그림 및 화면 캡처, 코드 설명이 어우러져 있다. 책에는 웹과 인터넷, 웹 브라우저와 HTML의 개념과 역사 정리, 웹 브라우저에서 텍스트, 이미지, 동영상을 표현하는 HTML5, HTML5로 만든 콘텐츠를 더 예쁘게 꾸미는 기술인 CSS3, HTML5와 CSS3로 만든 정적인 웹 페이지에 생동감을 불어 넣는 기술 자바스크립트 등이 수록되어 있다.

작가정보

저자(글) 김지훈

저자 김지훈은 동국대학교 컴퓨터공학 학사를 거쳐 홍익대학교 컴퓨터공학 석사(시스템 프로그래밍 전공)를 마쳤다. LG CNS 소프트웨어 아키텍트로 SI 현장에서 8년을 치열하게 살았고 KTDS 연구원으로 2년을 지냈다. 현재는 정보기술감리원에서 감리사로 활동하고 있으며 독립 IT 기술자의 저술 및 강연 상호부조 네트워크인 GoDev의 일원이다.

저자(글) 김도균

저자 김도균은 "강철 벼룩"이라는 필명으로 글 쓰는 IT 엔지니어이다. Microsoft의 기술을 전파하는 공인 강사이며 'Office Servers and Services'와 'Visual Studio and Development Technologies' 분야의 MVP이다. 독립 IT 기술자의 저술 및 강연 상호부조 네트워크인 GoDev의 리더로 섬기고 있다. 지앤선 출판사에서 최근 출간한 역서인 《게임 물리 엔진 개발》을 포함해 3권의 역서를 공역했다.

저자(글) 이현우

저자 이현우는 LG CNS에서 프로그래머의 삶을 시작했으며 공공차세대 프로젝트 수행팀에서 SI의 단맛, 쓴맛을 경험했다. 이후 모바일에 관심을 가지고 KTDS로 이직하여 모바일 오피스 구축 및 연구 활동을 수행했으며, 현재는 정보기술감리원에서 정보시스템 감리사로 활동하고 있다. 자바와 스프링 프레임워크 기반의 웹 개발과 안드로이드 개발 경험이 많으며 새로운 기술을 배워 바로 써먹는 능력이 뛰어나다. 독립 IT 기술자의 저술 및 강연 상호부조 네트워크인 GoDev의 일원이다.

저자(글) 진정원

저자 진정원은 오픈소스 Meteor.js를 통한 스타트업 상생 기업 미티어 스타트업(http://meteorstartup.com)의 대표이다. 금융권 임베디드 분야에서 프로그래밍을 시작한 후 스마트폰의 보급에 영향을 받아 모바일 분야로 이직하여 iOS/Android 개발과 함께 서버 프로그래밍에도 다수 참여했다. 현재는 다양한 오픈소스 기술 국내 도입 및 활성화에 목표를 가지고 스타트업을 운영하며 직접 컨설팅/개발 및 스타트업 인큐베이팅, 관련 서적 번역 혹은 교육기관/단체에 강의를 통해 오픈소스 기술 보급에 힘쓰고 있다. 독립 IT 기술자의 저술 및 강연 상호부조 네트워크인 GoDev의 일원이다.

목차

• CHAPTER 1 웹과 인터넷
  1.1 웹 이란?
  1.2 웹과 인터넷의 역사
  
  CHAPTER 2 HTML과 HTML5
  2.1 HTML 소개
  2.2 웹 브라우저 전쟁
  2.3 HTML5 소개
  2.4 HTML5 학습 환경 구성
  
  CHAPTER 3 HTML 기본
  3.1 HTML 소개
  3.2 HTML 요소
  3.3 HTML 속성
  3.4 CSS 속성
  
  CHAPTER 4 HTML에서 자주 사용하는 태그
  4.1 이미지 보여주기 - [img]
  4.2 단락 구분하기 - [p]
  4.3 다른 페이지로 이동하기 - [a]
  4.4 스크립트 포함하기 - [script]
  4.5 메타정보를 담고 있는 헤더 정의하기 - [head]
  4.6 본문 작성하기 - [body]
  4.7 메타정보 작성하기 - [meta]
  4.8 줄 바꾸기 - [br]
  4.9 테이블 그리기 - [table]
  4.10 테이블의 단위인 행과 열 - [tr], [td]
  4.11 구역 나누기 - [div]
  4.12 글자를 볼드로 표현하기 - [b]
  4.13 글자 모양 정하기 - [font]
  4.14 외부 자원 참조하기 - [link]
  4.15 정보를 전송하는 폼 작성하기 - [form]
  4.16 폼 안에 들어가는 입력창 작성하기 - [input]
  4.17 목록 나타내기 - [ul], [ol]
  4.18 다양한 글자 모양을 만드는 태그 - [em], [i], [small], [strong], [sub], [sup], [ins], [del], [mark]
  4.19 머리글 나타내기 - [h1]~[h6]
  4.20 셀렉트박스 선택하기 ? [select]
  4.21 멀티라인 입력 창 작성하기 - [textarea]
  4.22 줄 단위로 영역 배치하기 - [span]
  4.23 컨텐트의 의미적 변화를 나타내는 선 그리기 - [hr]
  4.24 약어의 의미를 나타내기 - [abbr]
  4.25 설명이 기술된 목록 나타내기 - [dl], [dt], [dd]
  4.26 연락처 나타내기 - [address]
  4.27 인용문 나타내기 - [blockquote]
  
  CHAPTER 5 HTML5 다루기
  5.1 HTML5 기본
  5.2 그림 그리기 - [canvas]
  5.3 그림 그리기 - [svg]
  5.4 비디오 보여주기 - [video]
  5.5 오디오 들려주기 - [audio]
  5.6 드래그 앤 드롭
  5.7 로컬 저장소(Local Storage)
  5.8 애플리케이션 캐시(Application Cache)
  5.9 웹 워커(Web Workers)
  5.10 위치정보(Geolocation)
  5.11 문서의 구조를 나타내는 시맨틱(semantic) 태그
  
  CHAPTER 6 CSS 공통
  6.1 CSS 개요
  6.2 CSS 기본 문법에 대하여 알아보기
  6.3 CSS를 HTML 문서에 적용하는 방법 알아보기
  6.4 CSS 필수요소 선택자(Selectors)에 대해 알아보기
  6.5 선택자들 사이의 우선순위
  6.6 CSS의 기본 개념 Box Model이란?
  6.7 CSS prefix(접두어)는 왜 사용하나요?
  
  CHAPTER 7 CSS 기본속성
  7.1 색상 표현을 담당하는 Color 속성
  7.2 글자 관련한 속성을 변경할 때는 Text
  7.3 좀 더 예쁜 글꼴을 사용하고 싶다면 Font 속성
  7.4 배경색을 변경할 때 사용하는 Background
  7.5 요소의 외곽선을 다룰 때는 Border
  7.6 디자인의 필수요소, 여백을 관리하는 Margin & Padding
  7.7 크기를 변경하고 싶다면 width & height
  7.8 목록을 표현하는 List
  7.9 다른 페이지로 이동하는 Link 요소 꾸며주기
  7.10 배치와 관련된 내용
  7.11 레이아웃에서 가장 중요한 요소 ? Float(부유 속성)
  7.12 Float 속성에 대한 제어가 어렵다면 Clear 속성을 배워보자
  7.13 요소 간의 높낮음인 z축을 제어하는 z-index
  
  CHAPTER 8 CSS3 속성
  8.1 모서리를 둥글게 만들어 주는 border-radius
  8.2 배경을 여러 가지 조합하고 싶다면 multiple-backgroud
  8.3 CSS만으로 화려한 Gradient 효과내기
  8.4 그림자 효과 때문에 포토샵 사용은 안녕! Shadow 속성
  8.5 HTML 요소의 변경, 회전, 이동을 위한 Transform
  8.6 간단하게 사용하는 애니메이션 - transition animation
  8.7 좀 더 정교한 애니메이션 효과를 원한다면 - animation
  8.8 사진 필터 효과를 CSS 코드 한 줄로 - Image Filter
  8.9 다양한 화면을 매끄럽게 - media query
  
  CHAPTER 9 자바스크립트 맛보기
  9.1 자바스크립트의 현재와 미래
  9.2 자바 vs 자바스크립트
  9.3 HTML/CSS vs 자바스크립트
  9.4 스크립트 개발 환경
  9.5 Hello World
  
  CHAPTER 10 자바스크립트 기본기
  10.1 변수
  10.2 데이터 타입
  10.3 연산자
  10.4 제어문
  
  CHAPTER 11 자바스크립트 활용
  11.1 자바스크립트 내장 Object
  11.2 함수(Function)
  11.4 jQuery
  
  CHAPTER 12 Step by Step 웹사이트 만들기
  12.1 HTML 레이아웃 구성하기
  12.2 CSS로 레이아웃 꾸미기
  12.3 자바스크립트로 기능 구현하기
  12.4 추가 웹페이지 작성
  
  CHAPTER 13 부트스트랩
  13.1 부트스트랩 기본
  13.2 부트스트랩 활용 예제
  13.3 편리함에는 대가가 따른다

추천사

• 채진석 (교수)

  “이 책은 어려운 기술을 단순하게 언급하기보다는 독자의 눈높이에 맞춰서 알기 쉽고, 체계적으로 높은 수준까지 이끈다는 점에서 잘 만들어진 책이라고 생각합니다. 아무쪼록 이 책과 인연을 맺기로 한 독자 여러분들은 잘 만들어진 책의 학습 방향을 따라가다 보면 자연스럽게 플랫폼 웹 전문가로 성장할 수 있다는 확신을 갖게 될 것입니다.” (가톨릭대학교 미디어기술콘텐츠학과 교수)

• 도안구 (테크수다 &도라이브 편집장)

  “HTML5와 CSS3, 자바스크립트와 JQuery는 이제 세상의 중심이 된 웹을 더욱 살찌우고 있습니다. 여러분들도 이런 즐거운 일에 동참하면서 상상의 나래를 직접 구현하고 펼쳐보시기 바랍니다. 이 책의 저자들이 바라는 것이 바로 바로 그런 것일 테니까요.”

책 속으로

서문 중에서

HTML5와 CSS, 자바스크립트를 배우고자 하는 이유가 무엇일까요? 웹 개발자나 웹 퍼블리셔가 되고 싶거나, 혹은 취미로 웹페이지를 만들고 싶을 수도 있겠죠. 이유야 어떻든 이 책에서 다루는 세 가지 주제 HTML, CSS, JavaScript는 웹을 이해하고 활용하기 위한 출발점이 되는 기술입니다. 이 책은 웹 프로그래밍의 출발선 상에 선 사람들을 고려하여 집필했습니다. 오랫동안 개발 현장에서 개발자로 그리고 강의 현장에서 강사로 살아오면서 처음 배우는 사람에게 지나치게 세부적인 사항을 나열하는 것은 오히려 배움에 걸림돌이 되는 것을 경험했습니다. 예를 들면, 이 책에서는 HTML5 태그를 설명하기 위해서 대상 독자를 배려한 부분은 구글의 웹 분석을 통해 HTML 페이지에서 많이 사용되었다고 발표된 태그 중에서 빈도가 높은 순으로 설명하고 있습니다. 꼭 알아야 할 내용을 중심으로 쉽게 설명하고 친절한 글과 한눈에 쉽게 파악할 수 있도록 저자의 경험을 반영한 그림 및 화면 캡처, 코드 설명이 어우러져 있습니다. 처음 배우는 이들은 책을 집어 들고 끝까지 일사천리로 책을 독파해 내기 어렵다는 것을 잘 알고 있습니다. 그래서 이 책은 호기심을 자극하기 위해 웹과 인터넷의 역사에 대한 설명으로 시작해서 서서히 웹 프로그래밍의 세계로 인도하고 있습니다. 한 장 한 장을 넘기며 따라하다 보면 어느새 5부에서 자신만의 아이디어로 간단한 웹 페이지를 만들고 성취감을 느낄 수 있을 것입니다. 웹 프로그래밍의 출발선에 있는 독자들에게 이 책이 힘찬 출발이 되었으면 좋겠습니다. (중략)

출판사 서평

처음 웹 프로그래밍을 경험하는 사람을 위한 친절한 안내서

이 책은 웹 프로그래밍의 출발선에 선 사람의 입장을 고려해 만들었다. 오랫동안 개발 현장에서 개발자로 그리고 강의 현장에서 강사로 살아오면서 처음 배우는 사람에게 지나치게 세부적인 사항을 나열하는 것은 오히려 배움을 방해하고 쉽게 지치게 만든다는 깨달음을 녹여낸 책이다. 꼭 알아야 할 내용 중심으로 쉽게 설명하고 친절한 글과 한눈에 쉽게 파악할 수 있도록 저자의 경험을 반영한 그림 및 화면 캡처, 코드 설명이 어우러져 있다.

이 책 한 권으로 모던 웹 개발에 필요한 기초 체력을 배양할 수 있다.

- 웹과 인터넷, 웹 브라우저와 HTML의 개념과 역사 완벽 정리
- 웹 브라우저에서 텍스트, 이미지, 동영상을 표현하는 HTML5
- HTML5로 만든 콘텐츠를 더 예쁘게 꾸미는 기술인 CSS3
- HTML5와 CSS3로 만든 정적인 웹 페이지에 생동감을 불어 넣는 기술 자바스크립트

군더더기 없이 핵심을 바로 설명하고 바로 따라해 볼 수 있는 간결한 예제와 배운 기술을 모아서 시험해 볼 수 있도록 단계별 통합 실습까지 완벽하다.

● 이 책에서 다루는 내용
1부에서는 웹 개발에 대한 올바른 사고의 틀을 형성하기 위해 지금도 성장하고 있는 인터넷과 웹 생태계가 어떻게 등장했고 발전 과정이 어떠했는지를 간략히 살펴본다. 또한 HTML의 발전 과정과 웹 브라우저 전쟁의 과정을 흥미롭게 설명하고 있으며, 마지막으로 웹 프로그래밍 학습에 들어가기 위한 개발 환경을 구성한다.

2부에서는 HTML을 구성하고 있는 기본 요소들과 이들 요소에 속성을 부여함으로써 어떤 변화를 이끌어 낼 수 있는지 학습한다. 테이블과 메타 태그, 목록처럼 HTML을 통해 표현할 수 있는 콘텐츠를 보다 풍요롭게 다룰 수 있는 요소들에 대해 학습하고 나서 오디오, 비디오, 드래그 앤 드롭 등 웹 프로그래밍의 새로운 영역을 개척하고 있는 HTML5 기술의 핵심 기능들에 대해서 실습 위주로 학습한다.

3부에서는 먼저 CSS의 기본 문법과 개념에 대해 학습한다. 그 다음 CSS를 구성하는 기본 요소들과 HTML의 특정 요소들을 선택하여 CSS 속성을 적용할 수 있게 하는 CSS 선택자의 사용법에 대해서 배운다. 마지막으로 요소의 모서리를 둥글게 만드는 border-radius, 배경을 조합하는 multiple-background, 펼쳐지듯 색이 변하는 Gradient와 그림자 효과 등 CSS3에서 새로이 제공하는 기능을 활용해서 화면을 더욱 아름답게 표현할 수 있는 CSS3의 주요 기능과 사용법을 익힌다.

4부에서는 웹페이지에서 활용될 뿐만 아니라 서버 프로그래밍 언어로서도 각광받고 있는 JavaScript의 어제와 오늘, 그리고 개발 환경에 대해서 학습한다. 변수와 데이터 타입, 기본 연산자와 제어문 등 JavaScript를 사용하기 위한 기본 구성과 문법 지식을 살펴보고 JavaScript를 더욱 강력하게 사용할 수 있게 하는 기본 내장 객체(Object)에 대해서 공부한 다음 이를 다양하게 활용할 수 있도록 실습한다. JavaScript에서 객체지향 프로그래밍을 가능하게 하는 일급 함수 객체를 자세하게 학습하여 다른 언어와 구분되는 뛰어난 프로그래밍 언어로서의 JavaScript를 더욱 체계적으로 이해하게된다.. 인터넷 익스플로러와 크롬, 사파리 등 주요 웹 브라우저에서 웹페이지를 편리하게 제어하도록 제공하는 브라우저 내장 객체들을 학습하고 이에 대한 활용법을 학습 및 실습한다. 마지막으로 다양한 브라우저에서 동작하는 다양한 동적 기능들을 쉽고 강력하게 지원하는 도구인 jQuery에 대해서 학습하고 이를 어떻게 활용할 수 있는지 실습한다.

5부에서는 지금까지 배운 내용을 이용해 HTML과 CSS, 그리고 JavaScript를 총체적으로 활용하여 간단한 웹페이지를 만들면서 학습 내용을 점검한다. 끝으로 트위터의 글로벌 CSS 프레임워크인 부트스트랩에 대해서도 간단히 소개하고 이를 활용하여 간단한 웹페이지를 만들어본다.

+예제 다운로드
이 책에서 사용한 예제와 통합 실습 소스코드는 아래의 URL에서 다운로드할 수 있습니다.
URL: www.awesomecontents.com
※ 강의 동영상
이 책과 관련한 동영상 강의를 위 사이트를 통해 2016년 하반기부터 제공합니다.

기본정보

ISBN	9788993827774 ( 899382777X )
발행(출시)일자	2016년 06월 29일
쪽수	468쪽
크기	173 * 230 * 30 mm / 805 g
총권수	1권