Do it 시리즈는 입문자들이 보기에 좋은 시리즈이다. 나는 이제까지 총 4권의 Do it 시리즈 책을 봤는데 (본의 아니게 다 웹 관련..) 아마 지금 이야기하는 책이 끝판왕이 아닐까 싶다.
- Do it! HTML5+CSS3 웹표준의 정석
- Do it! 자바스크립트 + 제이쿼리 입문
- Do it! 자바 프로그래밍 입문
- Do it! 오라클로 배우는 데이터베이스 입문
이렇게 봤었고, 이 책들을 보면서 있었던 아쉬움을 지금 포스팅할 <Do it! 인터랙티브 웹 페이지 만들기> 가 보완해주는 것 같다. 혹시 나처럼 저 책들을 보고도 약간의 아쉬움을 느꼈다면, 이 책을 보는 것을 추천한다. (위에서 언급한 책들은 정말 기본에 충실한 책들이기 때문에, 저 책은 저 책대로 봐야한다. 개념을 잘 아는 것은 중요하니까) 웹페이지를 만들고 싶어서 HTML, CSS 를 공부하면 아래 그림과 같은 웹페이지를 만들게 되는데 사실 이런 건 정말 공부용이지, 이걸 웹페이지에 써먹을 수 없다. 좀더 예쁘게 꾸미는 과정이 필요하다.
<Do it! 인터랙티브 웹 페이지 만들기> 책을 보면, HTML, CSS, 자바스크립트를 가볍게 한번 더 다시 공부할 수 있고, 트렌드를 반영한 포트폴리오를 만들 수 있다.
이 책은 크게 HTML/CSS/JavaScript 문법을 공부할 수 있는 파트와 실제 웹페이지를 만들어보는 파트로 구성되어 있다. 실제로 HTML, CSS, JavaScript를 공부하고 바로 웹페이지를 만들면, 생각보다 공부했던 문법들이 바로바로 안떠오르고 적용이 안될 때가 많다. 그런 의미에서 앞 부분에서 실제로 써먹을 수 있는 문법을 보고, 뒷 부분에서 실제 웹사이트 만드는 실습을 진행하는 것은 꽤나 알찬 구성인 것 같다. 굳이 책을 따로 따로 안사도 되고 뒷 부분 실습하다가 다시 공부하고 싶은 문법을 앞에서 찾아서 보면 된다. (< 내가 했던 방법)
내가 이 책을 보면서 좋다고 생각했던 점 1.
HTML, CSS, JS를 공부한다면, 당연히 직접 코딩해봐야한다고 생각하는데 간혹 내가 한게 맞는지 아닌지 의심이 들 때가 있다. 그런데 이렇게 결과 화면이랑 모든 경우의 수를 저렇게 화면을 보여주니 내가 한 결과물과 비교해볼 수 있고, 웹페이지를 만들다가 바로 적용하고 싶을 땐 저 사진만 보고 맞는 것을 바로 적용할 수 있어서 좋았다.
내가 이 책을 보면서 좋다고 생각했던 점 2.
무료 아이콘을 다운받을 수 있는 사이트, 홈페이지에 은은하게 배경을 넣으려면 어떻게 해야하는지 등 사소할 수 있지만, 처음 공부하는 사람들은 모르거나 궁금해하는 부분을 놓치지 않고 중간중간 넣어주었다. 이 책을 보면서 중간중간에 내가 놓쳤던 부분을 챙겨주어서 감탄한 부분이 없지 않아 있다.
뒷 부분 웹페이지 실습은 크게 8가지 실습 예제가 제공된다. (마지막 8번째는 홈페이지에서 무료로 볼 수 있다.)
1. 온라인 프로필 카드 웹 페이지
2. 기업형 기본 웹 페이지
3. 밤낮이 바뀌는 마을 애니메이션 페이지
4. 306도 회전하는 파노라마 회사 소개 페이지
5. FLEX 레이아웃 기반의 동영상 웹 페이지
6. 자동으로 음악이 나오는 뮤직 플레이어
7. 핀터레스트 스타일의 반응형 웹 갤러리
8. 웹 플러그인을 사용한 스와이프 갤러리(무료 전자책 제공)
내가 이 책을 보면서 좋다고 생각했던 점 3.
예제 시작할 때, 위 사진처럼 화면 캡처를 통해 전체 레이아웃을 파악하게 해준 점이 상당히 만족스러웠다. 웹페이지를 만들 때, 개인적으로 가장 우선해야할 것 중 하나가 전체 구조를 파악하는 것이라고 생각하는데 이 부분을 먼저 알려주고 실습에 들어가니까 이후에 남은 부분을 완성할 때도 큰 그림을 알면서 하니까 마냥 따라하는 것이 아니고 이해하면서 따라할 수 있었다.
나의 숙원 사업들 중 하나가 바로 내 포트폴리오 웹페이지를 만드는 것인데, 조만간 이 책에서 나온 실습 예제 중 하나로 내 포트폴리오 웹페이지를 만들 생각이다. 그리고 이후에는 지금 이 티스토리 블로그도 대대적으로 직접 디자인하고 퍼블리싱해서 개편하고 싶다. 아마 이 책이 그때에도 요긴하게 사용될 것 같다. 구글링을 해서 좋은 웹사이트를 따라하는 것도 좋지만, 이렇게 책을 통해서 하게 되면 보다 체계적이고 클린한 코드로 진행할 수 있어서 좋은 것 같다.
비전공자에게 추천하며, 나처럼 전공자의 경우에는 가볍게 보면서 요즘 트렌드를 반영한 사이트들을 바로바로 만들 수 있기에 볼 만한 가치가 있는 책이다. 예제들 또한 겹치는 부분이 거의 없이 진짜 포트폴리오로 잘 쓰일만한 예제들로 구성되어 있다. 개인적으로 개념 책도 좋지만, 이런 책들을 보는 것을 좋아한다. 실제로 만들어봐야 뭔가 흥미도 느끼고, 실력도 더욱더 향상되는 것 같다.
정리하면 이 책은,
HTML, CSS, JavaScript 기초를 어느정도 배우고 실제로 세련된(?) 웹사이트를 만들고 싶은 사람들(특히 비전공자!)
(혹은 이 책으로 먼저 HTML, CSS, JavaScript를 공부하고 부족한 부분만 다른 책이나 인터넷을 통해 보충해도 좋을 것 같다)
에게 추천한다.
나온지 얼마 안된 책 답게 굉장히 트랜디한 예제를 제공하고 있어서 만족스러웠다.
'Web > HTML+CSS' 카테고리의 다른 글
[HTML/개념] 개념 정리 03 - html5, DIV, SPAN, HTMl 엔티티, 시맨틱 마크업, 에밋 (0) | 2022.04.23 |
---|---|
[HTML/개념] 개념 정리 02 - 목록, <a> 태그, 이미지, 주석 (0) | 2022.04.22 |
[HTML/개념] 개념 정리 01 - Header, html 구조, VS Code 자동정렬 (0) | 2022.04.21 |
[HTML/Error] 티스토리 스킨 편집 시 빨간색 글씨가 뜰 경우 (1) | 2021.05.22 |