[도서리뷰] 코딩만 따라 해도 웹페이지 HTML+CSS+자바스크립트

 

개요

공익근무 중에 자동화프로그램으로 업무개선을 했다던 유명한 저자 반병현님의 저서이다. 프로그램에 관심이 있던 터라 저자의 도서나 인터넷강의를 본 적이 있어 새롭게 나온 도서가 관심이 갔다. '코딩만 따라 해도 웹페이지' 는 코딩 초보자의 눈높이에서 알려주는 친절한 도서이다. 생능북스에서 저자의 시리즈가 많은데 웹개발 외 딥러닝, 업무자동화 등 다양한 주제의 도서들이 많으니 따로 검색해도 좋을 거 같다.

이번 도서는 HTML/CSS/자바스크립트 기초부터 웹 페이지 제작까지 진행을 하는데 책에서도 프리뷰 형식으로 결과물을 단계별로 보여주는 것이 장점인 거 같다. 특히 인스타그램 예제를 활용하면서 반응형 웹페이지까지 구축하는 실습 위주의 도서이며, 초반에는 역시나 초보자들을 위해 친절하고 자세한 이론 설명을 주로 다루고 있다.

 

 

코딩만 따라 해도 웹페이지 HTML+CSS+자바스크립트

 

 

목차

Part 1 웹 개발자 따라잡기
Chapter 01 웹 프론트엔드가 무엇인가요?
1-1 웹 개발자의 일에는 어떤 의미가 있나요?
1-2 마크업 언어가 무엇인가요?
1-3 프로그래밍 언어가 무엇인가요?
1-4 이 책에서 무엇을 배우게 되나요?

Chapter 02 웹 프론트엔드 개발을 위한 컴퓨터 세팅
2-1 Visual Studio Code 설치
2-2 개발을 도와주는 유용한 프로그램 설치하기
2-3 깃허브 활용하기

Part 2 웹 페이지의 뼈대를 만드는 HTML
Chapter 03 HTML만 배워도 할 수 있는 게 엄청 많다면서요?
3-1 HTML이란?
3-2 HTML 가지고 놀기
3-3 HTML 문서 작성하기
3-4 웹 페이지 작성의 규칙을 따르자

Chapter 04 HTML 공부는 태그만 알면 끝난다면서요?
4-1 태그란 무엇인가요?
4-2 자주 쓰는 태그의 종류
4-3 태그를 더욱 쉽게 공부하는 방법
4-4 새 프로젝트 시작하기

Chapter 05 HTML도 배웠으니 인스타그램을 만들어볼까요?
5-1 정보의 기초적인 표현
5-2 조금 더 다채로운 정보를 표현하는 방법
5-3 추상적 정보의 컨테이너, 〈div〉
5-4 하이라이트 이미지와 게시물 이미지 삽입

Chapter 06 [도전!] 웹 페이지를 더욱 풍성하게 만들고 싶다면
6-1 검색창의 구현과 〈input〉 태그의 다양한 활용법
6-2 깃허브에 코드 푸시하기

Part 3 웹 페이지의 디자인을 결정하는 CSS
Chapter 07 CSS, 웹 페이지를 아름답게 만들어줘요
7-1 CSS 기초 사용법
7-2 복합 선택자
7-3 스타일의 중첩
7-4 캐스케이딩
7-5 캐스케이딩의 실전 활용

Chapter 08 CSS,이 정도만 알면 전문가죠
8-1 CSS의 다양한 스타일 속성
8-2 〈div〉 태그의 그리드 표현

Chapter 09 CSS를 더해 인스타그램 완성
9-1 CSS의 실전 적용
9-2 외부 CSS 불러와 아이콘 활용하기

Chapter 10 [도전!] 업계에서 가장 핫하죠, 반응형 웹 페이지
10-1 동적 사이즈 지정을 통한 반응형 웹 페이지
10-2 미디어 쿼리와 반응형 웹 페이지

Part 4 웹 페이지에 영혼을 불어넣는 자바스크립트
Chapter 11 자바스크립트 문법은 한 챕터면 충분하죠
11-1 자바스크립트의 발전
11-2 웹 페이지에 영혼을 불어넣는 도구
11-3 자바스크립트 기초
11-4 자바스크립트 문법 끝장내기

Chapter 12 자바스크립트 이론 공부도 이 정도면 완벽하죠
12-1 자바스크립트를 HTML과 함께 사용하는 방법
12-2 자바스크립트를 활용한 웹 페이지 제어
12-3 자바스크립트 활용 팁과 주의사항

Chapter 13 자바스크립트로 웹 페이지를 내 맘대로 조작할 수 있죠
13-1 이벤트 정복하기
13-2 문서 제어를 위한 세부기능 정복하기

Chapter 14 [도전!] 웹 페이지에 생명을 불어넣고, 전 세계에 배포하자
14-1 인스타그램 예제 완성하기
14-2 웹 페이지의 배포와 상용화

Part 5 지킬과 함께 한나절만에 웹 페이지 만들기
Chapter 15 지킬 템플릿을 활용해 웹 개발 날로 먹기
15-1 지킬 템플릿 살펴보기
15-2 지킬 템플릿의 사용 방법
15-3 지킬 템플릿 수정하기

Chapter 16 지킬 템플릿 세부 수정과 이메일 발송
16-1 세부 섹션 수정하기
16-2 Formspree와 서버 통신

Chapter 17 [도전!] 웹 페이지 상용화와 수익 창출
17-1 웹 페이지 상용화
17-2 수익 창출
17-3 앞으로의 공부 방향

 

리뷰

이 책을 활용하기 위해선 예제를 다운로드 받을 필요가 있다. 예제 다운로드 페이지가 보통 출판사의 사이트나 블로그가 많은데 이 책은 특이하게 저자가 직접 만든 깃허브 웹페이지로 안내를 한다. https://needleworm.github.io/frontend/

코딩만 따라 해도 웹페이지가 만들어지는 HTML+CSS+자바스크립트

 

 

깃허브 활용하기 챕터가 있는데 좀 더 설명이 상세했으면 하는 아쉬움은 있다. 초보 도서기 때문에 모든 내용을 다 나열하기엔 어려움이 있는 거 이해되기에 아쉬움을 뒤로 남기로 하나하나 읽어보았다. 

 

 

 

코딩만 따라 해도 웹페이지 HTML+CSS+자바스크립트

 

 

이 책의 친절함은 아래 내용과 같이 최신 트렌드에 맞게 코드 띄어쓰기를 안내해준다. 이런 부분 알려주는 도서는 많지 않던데 정말 초보자를 위한 책이라는 점을 볼 수 있었다. 인스타그램 클론 페이지를 만드는 것을 목표로 진행하고 있는데, 공부하는 입장에서는 디자인 감각이 있어야 우리가 생각하는 클론의 완벽함을 따라갈 수 있다. 다소 예제는 조금 어설프고 완벽하게 PC, 모바일의 반응형 페이지를 구현하지는 않아서 책을 완독을 하고 개별적으로 공부를 좀 더 해야할 필요는 있다. 어짜피 초보자를 위한 기초 교육과 응용부분을 알려주기에 큰 문제는 되지 않는다.

 

 

코딩만 따라 해도 웹페이지 HTML+CSS+자바스크립트

 

코딩만 따라 해도 웹페이지 HTML+CSS+자바스크립트

 

 

책의 가장 좋았던 부분은 코드마다 친절하게 미리보기라 할 수 있다. 프로그래밍 도서가 항상 따라하면 된다고 하지만 결과물을 모두 보여주지 않아서 가끔 막히는 경우가 있거나, 잘못된 것도 확인을 못하고 넘어가는 경우가 많다. 각 예제마다 미리보기를 제공하고 있어 직접 컴퓨터로 코딩을 하지 않아서 코드 리뷰를 하면서 학습이 가능하다. 분명 기초 HTML 독학하기 좋은 도서라 말할 수 있다.

 

 

코딩만 따라 해도 웹페이지 HTML+CSS+자바스크립트

 

코딩만 따라 해도 웹페이지 HTML+CSS+자바스크립트

 

인스타그램의 클론 페이지를 따라 할 수 있습니다. 알려주는 내용을 최대한 학습하고 익숙해진다면 웹페이지를 간단하게 제작할 수 있을 거 같다. 나중에 시간내서 간단하게 자기 소개를 하는 홈페이지를 만들 수도 있을 거 같다.

 

 

코딩만 따라 해도 웹페이지 HTML+CSS+자바스크립트

 

 

웹사이트 만들기를 도전하시는 분, 프로그래밍 언어에 관심이 많은 분, 정말 생기초의 HTML, CSS, 자바스크립트를 배우고 싶으신 분에게 추천드리는 도서이다. 어렵고 복잡한 코딩책이 아닌 쉽게 읽게 되고 따라할 수 있는 코딩책이라 추천합니다.