[리뷰] 모던 웹을 위한 HTML5 + CSS3 바이블

책 제목 : 모던 웹을 위한 HTML5 + CSS3 바이블 3편

저자 : 윤인성

출판년도 : 2019.05.1

예전 프로그래밍 공부를 시작할 때 참 많은 언어를 공부했다.

c, c++, java, php, flex, html, c#, d, python,  등 수많은 언어들을 거치고 

요즘 가장 많이 사용하는 언어는 역시나 c++과 직업특성상 

그래픽 관련 언어(cg, hlsl, glsl 등)정도이다.

하지만 이쪽일을 하기 전에는 html과 flex, action script를 주로 했었다.

어느 직업을 가져야 하나 진지하게 고민했을때 당시 유행했던 웹마스터라는 

직군에도 무척 관심이 많았다.

그리고 당시 가난한 대학생이었기에 아르바이트로 홈페이지 만들어 주는 아르바이트를 자주 했었다.

그때는 한창 flex, ajax 등이 유행하던 시기였다.

덕분에 지금도 웹 관련 책을 몇권 들고있다.

그리고 나의 예전 블로그를 보면 당시 웹관련 공부를 했었던 흔적들이 남아있다.

웹 관련 개발은 무척이나 재미있다.

그 특유의 확장성 때문인지, 역동성 때문인지, 아니면 화려함 때문인지는 모르겠다.

오랜만에 좋은책과 함께 즐거운 학습을 할수 있어서 좋았다.

책의 목차는 아래 "목차열기"를 참조.

PART 1. HTML5+CSS3 기본

CHAPTER 1. HTML5 개요

1.1 웹의 역사 

1.2 HTML5를 공부해야 하는 이유 

1.3 구글 크롬 설치

1.4 Visual Studio Code 설치

1.5 HTML 페이지 생성하고 실행하기

 

CHAPTER 2. HTML5 태그 기본

2.1 HTML5 기본 용어 정리

2.2 HTML5 페이지 구조 

2.3 글자 태그

2.4 목록 태그

2.5 테이블 태그

2.6 이미지 태그

2.7 오디오 태그

2.8 비디오 태그

2.9 입력 양식 태그

2.10 공간 분할 태그

 

CHAPTER 3. CSS3 선택자 기본

3.1 CSS 선택자란?

3.2 선택자 종류 개요 

3.3 전체 선택자

3.4 태그 선택자

3.5 아이디 선택자와 클래스 선택자

3.6 속성 선택자

3.7 후손 선택자와 자손 선택자

3.8 동위 선택자

3.9 반응 선택자

3.10 상태 선택자

3.11 구조 선택자

3.12 문자 선택자

3.13 링크 선택자

3.14 부정 선택자

 

CHAPTER 4. CSS3 스타일 속성 기본

4.1 스타일 속성을 공부할 때는

4.2 CSS3 단위

4.3 가시 속성

4.4 박스 속성

4.5 테두리 속성

4.6 배경 속성

4.7 폰트 속성

4.8 위치 속성

4.9 float 속성

4.10 clear: both를 사용한 레이아웃

4.11 그림자 속성

4.12 그레이디언트

4.13 벤더 프리픽스

 

PART 2. HTML5+CSS3를 사용한 레이아웃 구성

CHAPTER 5. 웹 페이지 레이아웃

5.1 웹 페이지 개요

5.2 레이아웃 구분

5.3 초기화

5.4 헤더 구조 작성

5.5 웹 폰트

5.6 수평 메뉴

5.7 콘텐츠 구성

5.8 본문 구성

5.9 사이드 탭바 구성

5.10 목록 구성

5.11 푸터 구성

5.12 정리

 

CHAPTER 6. 스마트폰 레이아웃

6.1 스마트폰 개요

6.2 뷰포트 meta 태그

6.3 초기화

6.4 헤더 구조 구성

6.5 스프라이트 이미지

6.6 토글 목록 구성

6.7 내비게이션 구성(1)

6.8 내비게이션 구성(2)

6.9 본문 구성

6.10 푸터 구성

6.11 정리

6.12 전체화면

6.13 글자 감추기

 

CHAPTER 7. 태블릿 PC 레이아웃

7.1 초기화

7.2 헤더 구성

7.3 내비게이션 구성

7.4 콘텐츠 구성

7.5 수직 목록 구성

7.6 본문 구성

7.7 푸터 구성

7.8 정리

7.9 고정 바

 

CHAPTER 8. 소셜커머스 메인 페이지

8.1 초기화

8.2 헤더 구성

8.3 사이드 구성

8.4 내비게이션 구성(1)

8.5 내비게이션 구성(2)

8.6 목록 구성

8.7 콘텐츠 구성

8.8 최종 정리

 

PART 3. HTML5+CSS3 심화

CHAPTER 9. CSS3 변형과 애니메이션

9.1 변형 속성 기본

9.2 변형 속성

9.3 키 프레임과 애니메이션 속성

 

CHAPTER 10. CSS3 변환

10.1 변환이란?

10.2 2차원 변환

10.4 원근법

10.5 회전 목마

 

CHAPTER 11. CSS 추가 규칙과 반응형 웹

11.1 규칙(@ - rule)이란?

11.2 @import 규칙

11.3 @font -face 규칙

11.4 @media 규칙

11.5 반응형 웹

11.6 화면 방향 전환

 

CHAPTER 12. 그리드 시스템

12.1 정적 그리드 시스템

12.2 동적 그리드 시스템

12.3 반응형 그리드 시스템

12.4 CSS3 그리드 레이아웃

책의 내용...

책의 내용은 크게 3파트로 나누어져 있다.

첫번째 파트는 HTML5와 CSS3기본적인 내용에 대해 다룬다.

기본적인 내용이라 함은 웹 자체에 대한 이야기 부터 시작해서 인터넷 이야기,

플러그인, 웹2.0 등 기술의 역사적인 내용부터 HTML5의 중요성, 필요성에 대해 이야기 하고

어떤식으로 활용할 수 있는지에 대해 언급한다.

HTML을 개발할 수 있는 환경구축과 HTML의 기본적인 문법, CSS의 기본 문법에 대해 다룬다.

두번째 파트는 HTML5와 CSS3를 사용하여 레이아웃을 구성한다.

웹페이지 만드는 실질적인 부분들에 대해 다룬다.

폰트, 콘텐츠, 목록 부터 스마트폰의 내비게이션 구성, 태블릿 pc의 경우 레이아웃,

이런것들을 활용하여 소셜커머스 메인 페이지제작하는 예제로 구성되어 있다.

세번째 파트는 HTML5와 CSS3의 심화내용을 다룬다.

CSS를 활용하여 역동적이고 화려하게 변형 및 애니메이션,

반응형 웹을 위한 규칙들, 그리드 시스템에 대해 이야기 한다.

책을 읽으면서...

우선 이 책은 완성도가 무척 높다.

세번째 개정판이라 그런지 책의 구성이 깔끔하고 체계적이며 알차다.

게다가 저자 직강의 동영상 강의와 유튜브를 통한 Q/A도 제공된다.

HTML5와 CSS3에 대해 기본부터 시작해서 활용까지 잘 정리되어 있다.

책의 구성을 보면 각 챕터의 초반에 어떤 내용을 배우는지 미리 체크할 수 있도록 해 두었고

중간중간 유용한 팁을 제공해 주는 배려를 보여준다.그리고 한 챕터가 끝날 때 마다 연습문제를 제공하여 

독자가 얼마나 이해했는지를 체크할 수 있도록 도와준다.

이 책을 처음부터 쭈욱 따라하다 보면 어느새 HTML5와 CSS에 익숙해 지고

어느순간 웹 페이지를 제작하고 있는 자신을 볼 수 있다.

그리고 PC 웹 페이지 뿐 아니라 스마트폰, 태블릿 PC등도 같이 다루어 활용성을 높였다.

저자 동영상 강의를 추가로 제공하여 입문자에게 좀 더 쉽게 접근할 수 있도록 배려하였다.

웹 페이지 제작을 배우고자 하는 이에게 충분히 추천할 만한 좋은 책이었다.

링크

- 소스 링크

- 저자 동영상 강의

- 책 소개