CSS3 스타일 속성 이름은 모두 알고 있는데 이를 사용해 레이아웃을 어떻게 구성해야 할지 모른다면,
HTML5+CSS3를 배웠다고 할 수 있을까요?
중요한 것은 HTML5, CSS3를 배우는 것이 아닙니다.
그것을 이용해 웹 페이지를 구현하는 것이 중요합니다.
이 책은 HTML5 표준과 CSS3 표준을 사용하여 웹 페이지를 구현하는 방법을 중심으로 설명합니다.
웹 페이지 레이아웃, 스마트폰 레이아웃, 태블릿 PC 레이아웃, 소셜커머스 메인 페이지 레이아웃을 담았습니다.
HTML5+CSS3부터 Javascript, Node.js까지
『모던 웹을 위한』 시리즈로 웹 개발을 시작하세요.
어떤 독자를 위한 책인가?
HTML5, CSS3를 처음 접하는 입문자, 웹 디자이너
웹 페이지, 스마트폰, 태블릿 PC 레이아웃을 한 번에 배우고자 하는 웹 프로그래머
최신 버전의 HTML5, CSS3, ECMAScript 2019을 배우고, 웹 표준 레이아웃에 적용하고자 하는 웹 프로그래머
저자소개
저자
윤인성
출근하는 것이 싫어서 책을 집필하기 시작했습니다. 현재 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하고 있습니다. 홍차와 커피를 좋아하며 기타, 가야금, 그림 그리기, 스컬핑 등이 취미입니다. 책의 소개말을 쓰는 시점을 기준으로 해서 이 책은 73번째 도서입니다.
저서로는 『자바스크립트 프로그래밍 입문(2판)』(한빛아카데미, 2022), 『C# 프로그래밍(2판)』(한빛아카데미, 2021)과 『혼자 공부하는 파이썬(개정판)』(한빛미디어, 2023) 등이 있습니다. 역서로는 『내 코드가 그렇게 이상한가요?』(인사이트, 2023), 『이펙티브 코틀린(인사이트, 2022)』 등이 있습니다.
작고 작은 나의 세계인 지금으로 부터 4년전 나는 윤인성을 만났다. 나이가 그렇게 많지도 않은데 그 때 당시 10권의 책을 썼었고... 뛰어난 사람은 어느정도일까라는 기준의 하나의 예시로 다가왔던 것같다. 그렇게 흘러 흘러 시간이 흘렀고 지금은 44권의 책을 썼다. 4년의 시간동안 나는 무엇을 했나 반성하기도 하며... 기초를 다듬을 겸 이 책을 읽게 되었다.
이 책은 매우 친절하며 용어 등을 명확하게 설명한다는 점이다. 예전에 있던 1판보다 조금 더 발전했다.
입문자에게도 좋지만 책 제목에 바이블이라는 말에 어울리게 HTML5, CSS3의 많은 내용을 다루고 있습니다. 단 자바스크립트는 다루지 않습니다. 자바스크립트도 HTML, CSS와 함께 공부하면 좋습니다. 이 책은 크게 3부분으로 나눌 수 있습니다. HTML5+CSS3 기본, 레이아웃 구성, HTML5+CSS3 심화 순서로 공부를 하게 됩니다. 파트1, 파트2는 프론트엔트 개발의 기본이니 꼭 봐야하고, 파트3 심화부분은 이런 게 있다만 파악하고 책을 술술 넘겨도 괜찮을 것 같습니다. 부록에서는 부트스트랩, Less, SVG 태그 등을 다룹니다. 그리고 이 책은 쉽게 무료로 이용할 수 있는 Visual Studio Code를 이용하여 프로그래밍합니다.
HTML은 웹페이지 내용이고, CSS는 웹페이지 디자인이라고 할 수 있습니다. HTML은 쉽게 공부할 수 있는 반면 CSS는 상대적으로 조금 복잡합니다. HTML 태그를 특정해서 디자인을 변경해야 하는데 원하는 HTML 태그만 선택하는 것이 CSS3 선택자입니다. 선택된 태그의 모양을 바꾸는 것은 CCS3 스타일 속성입니다. 이 책은 차근차근 공부하면 CSS 선택자, 속성만큼은 정말 제대로 배울 수 있습니다. HTML, CSS에 대해서는 다른 책이 필요없을 것 같네요.
예전에도 그랬지만 이 책에서 가장 도움을 많이 받았던 내용은 바로 레이아웃 구성을 다루는 파트2였습니다. 웹 페이지 레이아웃, 스마트폰 레이아웃, 태블릿 PC 레이아웃, 소셜커머스 메인 페이지까지 다루고 있습니다. 회사에서 간단한 사이트를 만들 때 이 책에 있는 코드를 약간 수정해 쓴 적이 있습니다. 실무에서도 쓸만한 코드가 많아서 곁에 두고 코딩하면 든든합니다.
이 책에서는 제목에 보여준것 처럼 바이블 답게 많은 부분을 마크업 언어의 기능들에 대해 설명하는 것에
지면을 할애 하고 있습니다. HTML 의 각 태그들의 정의와 쓰임세며, CSS의 스타일 속성 값에 대한 것들 말입니다.
필자도 책을 보면서, 이 기능은 이런것에 사용 하는 용도였구나 했던 것들을 종종 발견하곤 했습니다.
또한 최근 반응형웹을 제작할 때 많이 쓰이는 속성들에 대한 것도 언급되어 있어, 최신 트렌드를 반영하고 있구나
라는 생각도 들었습니다. 각 속성과 기능을 설명할 때 많은 부분 예시 코드를 보여 주고 있어,
손쉽게 연습해보거나, 구현되는 모습을 간접적으로 학습이 가능한 점도 좋았습니다.
아쉬운점...
책이 바이블적 성격이 짖다 보니, 기능적인 설명위주로 이루어져 있어서, 처음부터 끝까지 보기는 조금 부담스러운
면이 있습니다. 가끔 개발중에 모르는게 있으면 뒤편에 Appendix쪽에서 모르는 내용을 찾아서 보는데는 참 좋겠다라는 생각이 들기도 하였습니다. 두번째는 3판 째 되는 역사가 있는 책이고 2012년도 초판이 나왔어서 그런지 오래된 예제 같은 것이 좀 눈에 뛰었습니다. 예를들어 회전형 갤러리 같은 현재는 어느 사이트에서 쓰는지 알수도 없는 예재 같은 것들이 있었습니다. 재판 하면서 이런 오랜 예제들은 좀 새로운 예제로 바꾸면 더 좋았지 싶겠다는 생각이 들었습니다.
마지막으로는 책을 읽는 대상이 좀 애매하다는 생각도 있었습니다. 아주 초심자가 읽기에는 다소 내용이 방대하고, 중급자가 읽기에는 특별할 만한 내용이 없는 편이고, 또한 포지션도 퍼블리셔를 지망하는 사람들에게는 다소 쉬운 내용일 것이고, 프론트 엔드 개발자를 지망하는 사람들에게 기초 서적으로 짧게나마 봐둘 책일 것으로 생각됩니다. 타게팅이 다소 아쉽다는 생각입니다.
솔직히 말하자면, 필자는 표지를 보았을 때 위의 문장이 가장 중요해 보였다. 언어를 배우는 입장에서 참고할 수 있는 예제 코드가 있다는 것은 정말로 큰 이점이기 때문이다. 어떤 사람에게는 480개 라는 예제 코드 개수가 작아보일 수도 있다고 생각한다. 하지만, 책의 속지를 살펴보면 이를 최대한 활용하여 초보자들이 이해하기 쉽도록 굉장히 잘 짜여있다는 사실을 알 수 있다. 코드의 한 줄, 한 줄에 대해 심도깊은 설명을 진행하면서 중요하지 않은 부분들은 과감하게 버리는 것을 통하여 초보자들이 조금 더 편안한 마음으로 실용적인 관점에서 배울 수 있도록 배려한 점이 마음에 들었다.
내용
탄탄한 내용
기존에 필자는 HTML과 CSS는 책을 사서 배우는 것이 아깝다고 생각하였다. 그 이유는 시중에 판매되던 책들이 단지 사전 으로서의 역할만을 수행하는 것으로 보였으며 이는 전혀 도움이 되지 않기 때문이다. 하지만, 이 책은 달랐다. 설명하는 순서에서 부터 단어 한 개 까지 고민을 통해 최선의 결과를 얻어냈다는 사실이 눈에 보일 정도였다. 덕분에 이 책은 초보자에게는 좋은 스승이 될 수 있을 것이라 생각하였다.
적절한 난이도
"누구나 배울 수 있다."라는 문장으로 필자의 의견을 대변할 수 있을 것이다. 이 책은 입문자에게 적절한 난이도로 내용을 구성하여 누구든지, 컴퓨터를 처음 접하는 사람이더라도 큰 어려움 없이 배워나갈 수 있게 짜여져 있다. 이러한 점이 필자의 마음을 사로잡는 또다른 장점이 되었다.
결론
역시 한빛미디어는 고객을 실망시키지 않는 출판사라는 사실을 다시금 느끼게 되었다. 확실히 한빛미디어에서 출판되는 책들은 일정 이상의 수준을 기대할 수 있으며, 이는 필자의 성장에 큰 도움이 되고 있다. 이 책을 읽은 것을 계기로 이 책을 포함한 한빛미디어의 컨텐츠들은 누구에게나 편하게 추천할 수 있을 것이라고 다시금 생각하게 되는 계기가 되었다.
프로그래밍을 공부하면서 웹을 제대로 해본 없었는데, 웹을 공부할 필요를 항상 느끼고 있던 차에 이 책을 만났습니다. 결과적으로는 맘에 들어서 계속 이책으로 HTML+CSS3를 공부해야겠다는 생각이 들었습니다. 책을 읽으면서 느낀 이 책의 장점은, 일단 저자가 재치있습니다. 독자가 의문이 들만한 점을 "그런데 이거 전부 외워야하나요?" 이런식으로 책에 넣고 저도 못외웁니다. 하며 답변해주십니다. 교과서 같은 딱딱한 책들만 많이 봐왔던 터라 더 재미있게 느껴지는 것 같기도 합니다. 설명하려는거 다 끝났으니 이 뒤는 대충보라는 말도 있습니다 ㅋㅋ 말투도 말투지만 실제 개발을 할 때 개발할 때 알고있으면 도움이 될만한 꿀팁(개발할 때 알고있으면 유용한 사이트 등)들도 유용합니다. 그리고 IT는 기술변화가 빠르기 때문에 몇년만에 책이 '옛날'책이 되기도 하는데, A는 예전에는 많이 썼지만, 현재는 B를 쓰는 추세다~ 이런식으로 설명해 주셔서 기술의 흐름을 이해하기도 좋은 것 같습니다. 책 자체도 개정판이라 최신 내용을 다루고 있습니다. 공부를 위해 나온 책이니 당연할지도 모르지만, 전체적으로 읽기 쉽고, 또 따라하기 쉽습니다. 아예 개발을 처음 해보는 사람들도 인강이 제공되고 있고, 유튜브 댓글로 질문도 할 수 있어서 혼자 공부하기에도 괜찮을 것 같습니다. 학습계획표도 제공되어 단기간에 1회독 하겠다 하는 사람들에게도 좋은 선택지가 될 것 입니다. 일이 바빠서 아직 다 공부하진 못했지만 차근차근 이 책을 계속 공부할 예정입니다. 자바스크립트와 Node.js도 시리즈로 나와있으니, 웹개발을 큰 그림으로 보는데 좋은 첫 도서인 것 같습니다.
실제로 개발을 할때 HTML과 CSS 는 중요한 부분을 차지한다. 그럼에도 불구하고 다른 언어들에 비해서 소홀히 대해지는 경우가 많다. 나또한 다른 언어 공부는 열심히 하지만 정작 HTML 과 CSS 부분은 모르면서도 공부를 해보려고는 하지 않았다. 그저 그때 그때 인터넷에서 찾아서 복사, 붙여넣기만 해왔을 뿐이었다. 그런데 여기 HTML과 CSS 에 대해서 기본부터 심화까지 배울 수 있는 책이 있어서 소개하고자 한다.
책은 총 12개의 Chapter로 구성되어있다. 그리고 각 Chapter 는 다음과 같이 구성되어있다.
무엇을 배우나요?
각 Chapter 에 들어가기 전에 무엇을 배울지에 대해서 설명을 해준다. 그리고 배운 것을 바탕으로 어떤 것을 만들지에 대해서 살짝 맛보기를 보여준다.
코드, 실습
실제 내용 부분에서는 정말로 많은 양의 실습 코드들과 실습의 결과 화면들을 보여준다. CSS 자체가 속성이 많고 응용도 많기 때문에 양이 많아 질수 밖에는 없지만 오히려 그 부분이 마음에 들었다. 눈으로 읽어도 결과를 짐작할수 있는 부분들은 그냥 넘어가도 되고 약간 생소한 부분은 실제로 코드를 작성해 보면서 결과화면과 비교를 해볼 수 있다. 각각의 속성에 대해서 비교해주는 부분들도 있어서 그 차이점을 파악하기도 쉬웠다.
TIP
책 중간중간에 이렇게 TIP 으로 설명해 주는 부분들이 있다. 이 부분들은 HTML과 CSS를 작성하면서 자주 실수하는 부분들 또는 유용하게 사용되는 부분들에 대해서 따로 언급을 해준다. 위 그림처럼 내가 작성했던 코드가 내가 생각한 결과를 보여주지 않을 때가 있다. 그런 경우에 왜 그런지 그 이유에 대해서 설명을 해준다. 실제 CSS 를 적용하다 보면 분명이 적용이 되어야 할 속성인데 적용이 안되는 경우를 본적이 있다. 그런 경우에 CSS 를 정의한 부분을 따라가서 중첩되는 경우가 있는지부터 찾아보면서 시간을 많이 소비하게 되는데 이런 TIP들을 잘 기억하고 있으면 그런 시간들을 줄여줄수 있을것 같다.
맺음말
"바이블" 이라는 책 제목 답게 기초부터 심화까지 자세히 살펴볼수 있는 책이다. 부록까지 합치면 약 600페이지가 넘는 책이다. 그럼에도 불구하고 어렵지 않게 볼수 있는 책이라고 생각한다. 또 저자가 직접 강의하는 유투브 강의도 있어서 책을 이해하는데 도움을 받을 수 있다. 만약 HTML 과 CSS 에 대해서 나처럼 어려움을 느끼는 분들이 있다면 꼭 한번 읽어보기를 권해주고 싶다.
사실 웹은 항상 생각되는 것이지만, 윈폼과 비교할 때 정말 하고싶지 않은 프로그래밍 입니다. ^^; HTML, CSS, 그리고 스크립트(JS, ASP, PHP 등) 등 하나의 어플리케이션을 개발할 때 고민해야할 부분이 너무 많은 것이 사실입니다. 혼자 프로그램을 개발하는 사람들에게는 정말 익숙하지 않아 좋은 길잡이가 필요합니다.
귀찮으면 하지 말아야지 !!
하지만 귀찮다고 해서 넘어갈 수 있을까요? 웹어플리케이션의 별도의 설치 없다는 강점으로 많은 어플리케이션이 개발되고 있는 환경입니다. 저도 어플리케이션을 개발하면서, 프로그램을 설치해야한다는 것 때문에 클라이언트들에게 외면을 받을 때가 종종발생합니다. 특히 기업은 보안 문제로 인, 이런 설치형 프로그램을 선호하지 않죠. 결국, 웹을 기반으로 개발을 해야하며, 이것이 웹을 공부해야하는 이유가 됩니다.
처음부터 과욕부리지 말고, 찬찬히 시작하자!!
이번 포스트에서 소개할 "모던웹을 위한 HTML5+CSS3 바이블"은 처음에 차근차근 시작을 하시는 분들에게 추천하기 좋은 책이라 생각합니다. 특히 이 책은 무료로 저자직강을 제공하고 있으며, 20일에 끝을 내는 과정을 제시하면서, 학습하는 방법을 체계적으로 제시하고 잇는 것이 특징입니다.
1. 웹프로그래밍 별도의 도구가 필요한가?
이 책에서는 실습코드를 활용할 수 있는 코드 작성기로 Visual Studio Code를 활용하여, 현장에서 잘 애용하는 도구를 소개합니다. Visual Studio Code는 마이크로소프트가 제공하는 무료 코드 작성기로. 최근에 많이 애용되고 있습니다. 특히 이 도구는 계속 마이크로 소프트가 관리/운영하고 있어 안정적으로 활용할 수 있다는 점이 큰 장점입니다.
2. 요즘은 모바일이 대세
웹어플리케이션을 개발하는데, 과거에는 PC를 중심으로 했다면, 최근에는 모바일이 대세로 부상하고 있습니다. 물론, 동적으로 반응형 웹어플리케이션을 개발하는 것 또한 매우 중요합니다. 그러나, 모든 웹어플리케이션을 반응형으로 만들 필요는 없습니다. 반응형은 기능이 복잡한 웹 어플리케이션에 오히려 문제를 일으키기 쉽습니다. 그러므로 처음부터 반응형을 고민하기 보다는 필요한 상황에 맞는 어플리케이션 개발을 익히는 더 중요합니다. 이 책 또한 처음에는 매우 기본적인 웹 어플리케이션 제작을 제시합니다. 그리고, 모바일을 중심으로 어플리케이션을 개발하는 것을 제시하죠, 이후 마지막에는 반응형 웹에 대해, 방향을 제시합니다.
3. 멋진 웹을 만들어보자~
CSS3가 등장하면서 가장 뚜렷한 개선사항은 웹에서 애니메이션을 손쉽게 구현할 수 있다는 점입니다. 애니메이션은 사람들에게 눈의 즐거움을 제공합니다. 특히 웹을 고급지게 만드데 중심적인 역할을 합니다. 다만 남들과 차별화된 웹 어플리케이션을 만든다는 것은 그 만큼 공수는 들어간다는 의미입니다. 이 책은 CSS3의 기본 문법외에도 이처럼 애니메이션을 처리하는 방법을 넓게 보고 길을 제시하는 것이 특징입니다.
4. 그렇다고 반응형 웹에 대해서 설명하지 않으면 섭하지 ~
앞서도 언급했듯 반응형웹을 만드는 것이 어렵습니다. 하지만, 그렇다고 피할 수 있는 사항은 아니며, 최근 많이 선호하는 웹어플리케이션의 개발 방식의 하나입니다. 다른 말로 대세라고 할 수 있습니다. 이 책에는 이러한 점을 고려해, 반응형웹을 신속하게 만들수 있는 부트스트랩에 대해서도 설명을 하고 있습니다. 기본 웹어플리케이션을 만드는데 충실하게 집중하면서, 최근에 많이 사용하는 기법을, 부록을 통해 소개하는 더 많은 정보를 제공하기 위한 노력이 돗보입니다. 부록을 통해, 독자는 다양한 웹개발의 접근 방식을 찾아 갈 수 있겠네요 이외에도 css/less 등 다양한 부록이 준비되어 있으니 이 부분도 잘 참고 하면 좋을 것 같습니다.
5. 마무리
웹어플리케이션을 만드는 방법은 다양하게 존재합니다. 그러나 개발은 쉽지 않습니다. 또한 처음부터 너무 의욕만 앞서면 개발을 다 완료하기도 전에 지치는 것이 웹어플리케이션입니다. 이 책은 웹어플리케이션을 만드는데 필요한 요소기술을 차근차근 언급하고 있습니다. 다양한 내용을 담고 있지만, 그렇다고 너무 분산되지도 않게 길을 이끄는 점이 가장 큰 특징이라고 할 수 있을 것 같습니다. 이 책을 통해 기본이 되는 사항을 공부하시고, 이후 더 필요한 부분을 하나하나 찾으면서, 다른 책을 참고하면, 학습에 많은 도음이 될 것 같습니다. 그럼 웹을 공부하는데 많은 도움되시길 바랍니다.
팀 버너스리가 전 세계 모든 학자들과 '정보'를 공유하기 위해 탄생 시킨 웹, 일명 WWW(World Wide Web)으로 불리기도 한, 이 웹을 제대로 이해하기 위해 Hypertext의 근간이 되는 HTML을 공부하기로 마음을 먹었다. 무작정 HTML과 관련 된 책을 구매해서 예제를 따라하고 결과물을 뚝딱 만들어 냈다. HTML을 공부했으니 뒤이어 CSS를 공부했고, CS(Client Side)의 유일한 최강자인 Javascript를 학습했다. HTML, CSS, JS를 공부하면서 웹에 대해 이전 보다 어느 정도 이해할 수 있게 되었으나 딱 거기까지였다. 내 스스로 무언가 만드려고 했으나 도저히 진척을 이룰 수가 없었다. 그래서 HTML과 CSS를 포함하는 내용의 서적을 몇 권 더 구매하여 학습을 다시 시작했지만 이전과 다르지 않게 무언가를 '창조'할 수 없었다. 도대체 무엇이 문제였던 걸까? 곰곰이 생각하니 실제 웹을 구현하는데에 있어 현실과 동떨어진 코드로 점철 되거나 예제를 위한 코드로 뒤범벅 된 내용을 학습하고 있었던 게 가장 큰 문제이자 원인이었다. 좀 더 현실적이고 충분한 도움이 될 수 있는 서적에 대한 해갈을 목 빠지게 기다리고 있던 터에, 이 책을 만났다. 이름하여 '모던 웹을 위한 HTML5+CSS3 바이블'. 그렇다. 이 책은 '모던 웹'을 중심에 두고 현실적인 코드로 독자들을 웹의 세계로 인도하며 'HTML과 CSS'의 바이블을 표방한다.
책 표지에서도 언급 되어 있듯이, 저자 직강의 인터넷 강의가 무료로 제공 되고 있다는 것도 이 책을 구매했을 때 얻을 수 있는 큰 메리트가 아닌가 싶다. 물론 필자는 인터넷 강의를 통한 학습 보다 책으로 공부하는 것에 익숙해 동영상을 시청하진 못 했지만 웹을 처음 시작하는 독자들은 책과 더불어 영상을 통해 학습해 나가는 것이 보다 더 좋으리라.
책은 웹의 역사를 시작으로 하여 HTML의 발자취를 통해 HTML5를 학습해야하는 당위에 대해 피력하고 있다. 이 책의 또 다른 좋은 점은 여타의 HTML 관련 서적과는 다르게 근래 최고의 에디터로 평가 받고 있는, 일명 VCS(Visual Studio Code)를 통해 독자의 실습을 이끌어 가고 있다는 것이다. 세상에는 많은 에디터가 존재한다. Notepad++, Edit Plus, Atom, Vim 등등. 하지만 현존하는 최강의 에디터로 부상한 VCS를 학습 도구로 이용하고 이를 통해 웹 코딩을 경험할 수 있다는 것은 초보자들에게 미력하나마 큰 무기를 쥐어준 것에 다름 아니다.
Chapter 2에서는 본격적으로 HTML에 대한 학습이 진행 된다. HTML과 접하면서 앞으로 계속 겪어야 할 기본 적인 용어들에 대한 정리를 시작으로 페이지 구조와 글자, 목록, 테이블, 이미지, 오디오, 비디오, 입력 양식, 공간 분할 태그에 이르기까지 실로 현실에서 다양하게 쓰이고 활용 되고 있는 여러 태그들과 만나게 된다.
Chapter 3를 통해 웹을 이쁘게 디자인하기 위해 반드시 필요한 CSS과 조우하게 되고 Chapter 4에 이르러 CSS의 선택자와 속성에 대한 학습은 마무리 된다.
Part 2로 진입하면서 본격적으로 웹의 뼈대를 이루는 레이아웃 구성에 포커스를 맞춰 학습이 진행 되는데, 기본적인 웹 페이지의 레이아웃 부터 해서 모바일 웹의 중요성이 무엇보다 중요한 작금의 시대에 발맞춰 스마트폰 레이아웃에 대한 내용이 전개 된다. 또한 스마트폰 뿐만 아니라 모빌리티의 다른 축을 담당하고 있는 태블릿 PC에 대한 레이아웃을 아우르고 있어 네이티브 웹과 모바일 웹을 구성하는 요소를 모두 경험할 수 있는 기회를 갖게 된다는 점이 무엇 보다 큰 도움이 된다고 할 수 있겠다.
Part 3에서는 HTML과 CSS의 심화 과정이 전개 되면서 CSS의 다양한 스킬을 학습할 수 있게 되는데, 애니메이션 속성과 CSS 변환, 그리고 반응형 웹, 그리드 시스템 등에 대한 학습이 이뤄지면서 CSS로 할 수 있는 거의 모든 것을 경험할 수 있었다.
책의 말미에는 CSS의 가장 대중적인 프레임워크인 부트스트랩과 Less, 그리고 Javscript와 SVG등 책에서 제대로 다루지 못한 내용들에 대한 것들이 간단하게 수록 되어 있어 독자들에 대한 지적 호기심을 자극한다. 웹을 좀더 멋지고 이쁘게 디자인하고 구성하고 싶다면 말미에서 소개한 내용의 대상들은 한번쯤은 거쳐 볼만한 충분한 가치가 있으리라.
끝으로 이 책을 한 마디로 정의하고 싶다. '가까이 오래 곁에 두고 필요할 때 마다 언제든지 꺼내 들고 싶은 책'. 앞으로 다른 서적으로 웹을 공부하다가도 이 책을 가장 많이 참고하고 찾지 않을까 싶다. 그렇다면 이 책은 '바이블'로서의 소임을 다한 것이 아닐까?
P.S : 한빛미디어 '나는 리뷰어' 이벤트에 당첨 되어 제공 받은 도서를 바탕으로 작성된 후기입니다
나는 백엔드 개발을 주로 하지만 상황에 따라서 프론트엔드 개발도 함께 하는 경우가 종종 있다. 프론트엔드 개발을 함께 해야할 경우 백엔드 개발자가 주로 취할 수 있는 전략은 React 또는 Vue.js와 같은 자바스크립트 프레임워크나 Bootstrap CSS 프레임워크, 크로스 브라우징을 위해 JQuery 라이브러리를 사용하여 웹을 구현하는 것이다. 간단한 구현들은 HTML, CSS 예제를 웹에서 찾아서 그 내용을 참고하여 상황에 맞게 구현하게 되는데, 점차 개발을 해나가면서 한계를 부딪히게 되며 실제 내부 동작은 잘 알지 못하고 넘어가게 되는 경우도 많았다. 이유를 생각해보면 브라우져마다 동작이 상이한 경우도 있고 웹 표준 또한 짧은 시간 주기로 변화하고 있기 때문이 아닐까 싶다. 최신 표준만을 보고 구현한다고 해서 브라우저마다 호환되는것도 아니고 어떻게 활용해야 하는지를 잘 모르는 경우도 많았다.
그런면에서 "모던 웹을 위한 HTML5+CSS3 바이블"은 여러가지로 가려운 점을 해소해줄 수 있는 책이다. 이 책은 기본적으로 웹의 역사와 변화점 그리고 HTML5, CSS3 기반으로 직접 레이아웃까지 구성하기 위한 주요 정보들과 적절한 예시 그리고 주의사항등을 함께 알 수 있는 책이다.
넷스케이프 개발 코드명 모질라는 지금까지 이어져 모질라 재단해서 그 이름을 활용하고 있으며 파이어폭스라는 웹 브라우저를 배포하며 다양한 웹 표준에 기여하고 있다.
책의 매 장마다 내용 설명과 팁 그리고 연습문제로 구성되어 있다. 연습문제는 3~4문제로 가볍게 제시되며 학습한 내용을 정리하고 복습할 수 있게 도와준다. 개인적으로 팁들이 매우 유용하다고 느꼈다. 팁에는 개발하면서 조심해야할 정보들과 웹 개발시 도움이 될만한 경험적인 팁들이 포함되어 있다.
책의 구성을 살펴보면 웹의 역사부터 시작하여, HTML5 그리고 CSS3 선택자와 스타일 속성을 먼저 소개한다. 가벼운 마음으로 웹의 기초 정보를 학습을 시작할 수 있으며 그 다음으로는 기초 중에서 가장 중요하다고 할 수 있는 레이아웃에 대한 설명으로 이어진다.
책을 보고 따라하면서 직접 개발 및 학습할 수 있도록 다수의 레이아웃 예시를 제공한다. 또한 화면 크기가 다른 디바이스에 맞게 웹 화면을 구성하고 사용자 경험을 제공하는 반응형 웹 개발 방법에 대해 알려준다. 예시들을 작성해가면서 앞에서 나온 이론들을 직접 활용해볼 수 있게 한 점들이 좋았다. 눈으로만 확인했던 정보들을 직접 따라 타이핑하고 동작하는 것을 보면서 조금 더 알아가는 기분이 들었다.
개인적으로 옆에서 알려주는 것 같이 문체의 기술 서적 책을 좋아하는 편인데, 이 책 또한 그런 느낌이 많이 들었다. 가끔은 유머스럽게 때론 퉁명스러운 표현까지. 아래는 보면서 피식하게 만든 부분이었다.
이 책은 웹 개발을 목표로하는 초보자 또는 백엔드 개발자가 보면 좋은 책이다. 인터넷 강의 무료 제공이라고 되어 있는데 확인해보진 않았지만 책 내용만 봐서는 재미있게 영상 강의를 풀어가지 않을까 싶다.
개인적으로 웹 공부는 따로 해본적이 없습니다. 웹 해킹과 블로그 커스터마이징, 웹 크롤링을 하며 기본기를 익혔던게 전부입니다. 하지만 매번 필요한 정보만 찾다보니 부족함을 느꼈고, 웹을 어떻게 더 활용할 수 있고, 꾸밀 수 있는가에 대한 지식이 부족했습니다.
제가 웹을 따로 책을 사지 않은 이유는 단순합니다. 대부분의 책은 정보를 단순한 나열 형식과 어떤 내용이 필요한지 설명이 부족했기 때문입니다. 비유하자면 html 태그 사전 같았습니다. 하지만 이 책은 그런 생각을 접게한 책입니다.
책의 전체적인 구조와 폰트, 풀칼러 등 기본적인 UI가 매우 좋았습니다. 글 구성 또한 매우 좋아 실습을 하면서도 매우 잘 읽히는 책이었습니다. 또한 스마트폰 레이아웃, 태블릿 레이아웃 등 다양한 기기에서 어떤 방식으로 세팅할 수 있는지도 나와있어 좋았습니다. 웹 어플리케이션을 목표로 하는 분들에게는 더 도움이 될 것 같습니다.
중급자에게는 좋은 레퍼런스 책이자, 초보자를 위한 최고의 가이드가 될 수 있는 책입니다. 유튜브 강의도 살짝 봤는데 좋은 것 같습니다.
얼마나 좋은 책인가 하면 제가 이 책을 읽으며 너무 좋아 같은 저자분의 <모던 웹을 위한 JavaScript + jQuery 입문(3판), 한빛미디어>책을 ebook으로 샀습니다.
[모던웹을 위한 HTML5 + CSS3 입문]이란 책을 읽은 적이 있습니다. HTML5와 CSS3에 대한 다른 책도 읽어봤지만 그 중에서 제일 괜찮다고 생각한 책입니다. 그런데 그 책의 개정판으로 [모던웹을 위한 HTML5 + CSS3 바이블]이 나왔다고 하여 다시 한 번 읽어보고 싶은 마음에 보게 되었습니다.
이 책의 가장 매력적인 부분은 실무에 참고할 만한 내용이 많다는 점입니다.
첫번째 파트는 선택자와 스타일 기본 속성에 대한 내용인데 매번 사용하는 건데도 작업할 때마다 구글링하게 만드는 스타일들이 알기 쉽게 설명되어 있어서 좋았습니다.
제가 제일 인상 깊었던 부분이 두 번째 파트인데요, 레이아웃 구성 예제코드들을 알려주는 파트입니다.
나만의 프로젝트를 만들고 싶지만 UI 구성이 어려워서 포기하신 분들께 강추합니다. 레이아웃을 구성할 때 기초로 삼기에 좋은 예제입니다.
세 번째 파트와 부록은 심화 파트인데 저에게는 따라가기 좀 어려운 수준이었지만 그동안 공부해 보고 싶었던 부트스트랩과 Less에 대해서 다루고 있어 굉장히 흥미로웠습니다.
그런데 아쉬운 점은 책 내용이 아니라 교정 부분입니다. '레이아웃'이 '레아아웃'이라고 인쇄된 곳도 있었고, <!DOCTYPE html><html> 구문이 코드 처음이 아니라 중간에 나타나는 예제코드가 있어서 이게 뭘까 한참을 생각했습니다.
그러나 그 부분을 빼고는 내용적으로는 굉장히 만족스러운 책입니다. 책 전반에 걸쳐 일관되게 등장하는, "외울 필요 없습니다. 필요할 때 찾아서 보면 됩니다."라는 저자의 말처럼 옆에 놔두고 자주 들여다 봐야겠다는 생각이 들었습니다. 이전판과 비교하여 주된 내용은 달라지지 않았지만 최근의 동향을 담으려는 저자의 노력이 엿보입니다. 시대의 변화를 반영하여 익스플로어 관련 내용이 많이 없어졌는데, 책 내용처럼 익스플로어 브라우저에서 UI가 깨지지 않도록 노력하지 않아도 되는 날이 빨리 왔으면 좋겠습니다.
HTML5 와 CSS3 를 사용하거나 이해하는데 책의 내용 정도만 알아도 많은 도움이 되리라 생각합니다.
HTML5 와 CSS3 에서 알아야 할 내용을 보여줍니다.
HTML5 와 CSS3 에만 집중하고 있습니다. 서버와 관련된 내용을 알아야 하거나 자바스크립트를 병행해야 하는 부분은 HTML5 와 CSS3 만으로 할 수 없다고 정확하게 얘기합니다. 그리고 다시 HTML5 와 CSS3 로 시선을 돌립니다.
자바스크립트나 서버쪽 내용은 없습니다.
책의 마지막 부분 부록 가운데 하나로 자바스크립트, 정확하게는 jQuery를 어떻게 웹페이지에 적용하는지 살짝 보여줄 뿐입니다. HTML5 와 CSS3 설명만으로도 분량이 상당합니다.
모던 웹을 위한 시리즈가 두권 더 있습니다. 하나는 javascript + jQuery 이고, 다른 하나는 node.js 입니다. 두 권 모두 이 책 정도의 분량을 자랑(?) 합니다. 서버와 자바스크립트에 대한 궁금증을 해소할 수 있습니다.
‘내용 하나하나 외우려고 애쓰지 마세요.’ 이 한마디가 이 책을 보는 방향을 제시하고 있습니다.
1부는 HTML5 와 CSS3 의 기본 내용을 가지고 있습니다.
HTML5 태그 기본은 오디오 태그와 비디오 태그가 지원하는 양식을 포함하여 한번은 읽어두어야 할 내용들입니다.
CSS3 선택자가 1부의 핵심이라고 생각합니다.
‘자신의 위치를 기준으로 보는 후손, 자손, 동위 선택자, 사용자 행동 결과에 따르는 반응, 상태 선택자, 특정 위치를 찾는 구조 선택자, 알아두면 유용한 문자 선택자, 얘 빼고 모두 부정 선택자’ 선택자들이 있습니다. 적어보니 거의 대부분이 해당하는군요.
CSS3 스타일 속성은 박스, 배경, 폰트에서 line-height 를 알아두면 좋을 듯 합니다.
선택자를 조합해서 사용하는 예제와 설명이 있었으면 더 재미있지 않았을까 하는 생각을 해봅니다. 특히 일반 구조 선택자와 형태 구조 선택자의 비교 예제가 있었으면 하는 아쉬움이 있습니다.
2부는 레이아웃 구성하는 형태를 보여줍니다.
1부에서 설명한 CSS3 의 스타일과 속성 가운데 주로 어떤 것들을 사용하는지 알 수 있습니다. 대표적인 레이아웃 네가지의 구성 방식을 볼 수 있습니다. 보통 자바스크립트를 이용하여 처리하는 탭형식을 CSS3 만으로 구현하는 부분은 정신을 번쩍 들게하는 신선한 작극이었습니다.
3부는 CSS3 를 이용한 변형과 변환, 그리고 반응형 웹을 설명합니다.
변형은 이벤트와 연계한 레이아웃에서 자주 볼 수 있습니다. 변환은 3차원 표현에 중심을 두고 있습니다. 이렇게 표현할 수 있구나 하는 정도로 알아두면 될 것 같습니다.
@ 규칙은 CSS를 확장하고 풍부하게 만드는데 중요한 역할을 합니다. 반응형 웹을 위해 알아야 하는 부분이기도 합니다. 그리드 시스템은 레이아웃을 구성하는 방식 가운데 하나입니다. 레이아웃은 사각형의 분할을 벗어날 수 없는데 그리드 시스템은 이러한 분할을 격자 단위로 나누어 생각하며 구성하는 방식입니다.
책 곳곳에 있는 팁 박스는 미처 생각지 못했던 부분에 대한 설명, 알아두면 도움이 되는 특성, 기본보다 조금 나아간 설명이 들어가 있습니다. 팁이상입니다.
최근 누구나 자신만의 웹 페이지를 만들고 싶어한다. 부트스트랩과 같은 간단한 원페이지 기반의 웹사이트부터 블로그 형태의 웹 사이트까지 웹에 대한 열풍이 여전히 뜨겁다. 웹을 구성하는 언어를 크게보면 HTML과 CSS, 그리고 자바스크립트이다. 최근 자바스크립트에 대한 범위가 매우 넓어져 한 권만으로 커버하기 힘들어 HTML+CSS를 하나로 묶고 자바스크립트는 따로 익혀보는 형태로 나오는 것 같다. HTML과 CSS의 기초는 중요하다. 하지만, 기초만 안다고 해서 모든 것이 이뤄지는 것은 아니다. 기초를 포함해 HTML과 CSS의 다양한 형태를 이해해야지만 이를 응용해 실제 웹 페이지를 만들 수 있다.
이 책은 HTML5와 CSS3를 처음 공부하는 독자를 대상으로 한다. 따라서 비교적 쉬운 구조부터 시작해 처음 웹 페이지를 만들거나 접근하고자 하는 독자들을 위한 도서이다. HTML5에 대해서는 잘 알지만 CSS는 다소 부족하다면 해당 부분만 공부할 수 있다. 필자도 HTML은 익숙하나 CSS에는 다소 부족해 읽어봤다. CSS는 선택자에 대한 이해가 필요하다. 기본적으로 굉장히 간단하고 직관적인 내용이다. HTML에는 다양한 태그가 있다. 예를 들어, h1태그, p태그가 있는데 CSS는 이 태그를 선택해서 각각의 속성값을 지정할 수 있다는 것이다. 또는 각각의 id를 지정하면 id별로 글자크기, 색 등을 지정할 수 있다. 마치 일반적인 워드 문서 작성에서 스타일을 지정하는 것과 동일하다.
이러한 스타일시트는 매우 방대하다. 따라서 이것을 다 외우기는 부족하다. 따라서 개인적으로도 그렇고 이 책에서도 좋은 에디터를 사용하는 것도 능력이다. 이 책에서는 Visual Studio Code를 사용한다. 에디터에서 자동 완성 기능을 사용하면 스타일 속성을 쉽게 검색할 수 있다. 실제 책에서 다루지 않는 속성들이 매우 많다. 하지만 본인이 개인적으로 사용하고 싶을 경우 다양한 경로로 검색을 통해 찾아보는 것이 좋다.
이후에는 데스크탑 및 태블릿PC, 스마트폰에 각각 알맞은 레이아웃에 대해 살펴본다. 최근 다양한 전자기기가 통용되면서 웹 페이지를 개발할 때 다양한 화면 레이아웃 구성이 필요하다. 특히 작은 화면에서도 효과적으로 콘텐츠를 보여주기 위해서는 적절한 레이아웃을 개발해야 한다. 최근에는 반응형 웹 페이지가 많이 사용되는데, 한 번 웹 페이지를 개발하면 스마트폰, 태블릿, 데스크탑 등 화면의 픽셀 크기에 따라 화면 구성을 적절하게 변경하는 웹 페이지가 반응형 웹 페이지이다.
이 책의 경우 자바스크립트는 거의 다루지 않는다. 잠시 추가적인 내용으로 알려주는 정도며, 어느 부분에서 사용하는지 소개만 하지 자세히 다루지 않는다. 최근 웹 페이지는 자바스크립트의 활용도가 매우 높다. 사용자들은 좀 더 직관적이고 화려하고, 다양한 정보를 웹 페이지를 보고자 하는데 이러한 추세에 맞춰 자바스크립트의 활용도 및 개발 정도가 많이 증가하고 있다. HTML과 CSS에 대해 어느정도 배웠다면, 이후에는 자바스크립트에 대해 좀 더 공부해 실제 많이 활용할 수 있는 웹 애플리케이션으로 나아가는 것이 효과적이라고 본다.
웹표준 언어를 공부하면서 항상 9부능성을 못넘고 포기하거나 써먹지도 못하는 경우가 있습니다. 인터넷강좌나 학원같은 강의에서 HTML5, CSS3 그리고 제이쿼리(JQUERY)까지 알차게 배우고나서는 막상 웹페이지 이미지를 갖다주면 멍때리게 됩니다. 분명히 수업할때 강사쌤 잘 따라왔는데도 막상 직접 처음부터 하려니 머리속에 텅 비어버리는 상황이 되죠.
이번에 소개할 책은 이미 몇년전에 서평을 했던 책의 3판입니다. 90%정도는 내용이 같고 나머지 추가된 부분들이 있습니다만...무엇보다도 기본기에 충실한 내용 위주고 또 실제로 웹퍼블리싱이라는게 결국 기초를 응용해서 작업하기에 중요한 학습임을 재확인하게 됩니다.
서두에도 언급했듯이 HTML5 태그와 CSS3 스타일 속성은 정말 왠만한건 다 꾀겠는데 어떻게 끄잡아 내서 코딩할줄 모른다면 방법이 잘못됐다는 얘기입니다. 결국 어떻게 웹페이지를 구현하는 것이 실전이고 이 책에서 가장 중점을 두고 학습해야 할 부분입니다.
우선 이 책 '모던 웹을 위한 HTML5+CSS3 바이블'은 3개의 파트로 크게 그룹지어져 있습니다. PART1은 HTML5 태그와 CSS3 속성(선택자/스타일)을 다룬 기초적인 내용으로 기본 구조의 웹페이지를 코딩으로 레이아웃을 구현하기 위한 선행 학습과정을 시작하게 됩니다.
온라인 또는 오프라인 서점에 가면 HTML5와 CSS3에 관한 책들이 적지않게 있습니다. 그리고 그 책들의 공통점은 두껍죠. 즉, 내용이 많다는 것이고 이 점은 웹표준, 웹퍼블리싱을 공부하려는 이들에게는 첫 벽인셈이죠.
일단 한권을 고르면 그것을 마스터하기에 오랜 시간이 걸리니...신중하게 선택을 해야 합니다. 이 책도 그런 책들 중에 하나고 좋다 나쁘다라는 기준을 잡기는 애매하다고 생각해요. 솔직히 이와 비슷한 책들중에 내용이 나쁜건 없습니다. 다만 인터넷강의 서비스가 지원이 되느냐? 최근 웹페이지의 추세에 맞춘 예제와 팁들을 잘 담고 있느냐? 뭐 그런 차이가 아닐까 싶네요. 다만 단순히 외국서적을 번역한 책은 피해주세요.
현재 우리가 인터넷을 하면서 접하는 웹페이지와 스마트폰에서의 화면, 그리고 타블렛을 들 수 있습니다. 스마트폰과 타블렛의 경계가 사실 좀 모호한 면이 있어도 화면활용도에서는 차이가 날 수 밖에 없고 이 책에서 예제 추가로 소셜 커머스 메인 페이지를 다루고 있는 점도 흥미롭습니다. 단순히 쇼핑몰로 볼 수 있지만 각종 소셜 커머스 웹페이지에는 많은 HTML5, CSS3 의 구현과 레이아웃이 다양하게 적용되서 학습대상으로 좋습니다.
그래서 각 디비이스에서의 레이아웃을 어떻게 HTML5와 CSS3로 구현하는데 있어 구조를 파악하고 틀을 어떻게 잡아야 할지..그게 먼저 선행되어야 하죠.
PART2의 내용을 다루기전에 이 책의 학습법을 좀 정리해 볼까요?
- 매 장에서 배울 내용이 뭔지 정리하고 미리보기를 통해서 보여줍니다.
- 어짜피 지루한 분야긴해도 딱딱한 문장속에서 학습자로 하여금 궁금증을 끄집어낼 수 있는 동기부여 문구를 포함했습니다.
- 팁(TIP)코너와 NOTE 코너를 통해서 그동안 여러 학습자들이 궁금해 했던 내용을 곳곳히 정리해 놓았습니다.
- 코드 예스는 학습하면서 보여지기만 하는게 아니라...책에 직접 소스코드의 이해를 돕기위한 설명이 추가됐습니다.
- 완성된 예제의 실제 페이지와 전체 소스 코드를 보여줍니다.
- PART 마다 구성된 CHAPTER의 마지막 장에서 배운 내용 복습차원에서 연습문제를 놓고 잊지 않도록 도와줍니다.
.
인터넷 브라우저의 역사와 함께하고 있는 HTML5와 CSS3는 퍼블리싱을 함에 있어 각종 버전을 맞춰져야 하는 크로스 브라우징때문에 골머리를 썩어왔습니다. 지금은 웹표준이 그나마 정립화되서 체계적으로 코딩이 가능해졌고 전문 퍼블리셔의 분야가 각광을 받고 있죠.
그래서 '모던 웹을 위한 HTML5+CSS3 바이블 웹표준 웹퍼블리싱 홈페이지제작' 3판에서는 구버전인 IE6과 IE8(인터넷 익스플로러8)이하에서 사용하는 스타 핵 등을 내용들은 배제하고 현재 시점을 기준으로 맞춰서 내용을 업그레이드 및 수정해놨습니다. 웹은 계속해서 변화하기 때문에 3판이 완전체는 아니지만...지금으로써는 웹표준과 웹퍼블리싱 학습에 적합한 책이 아닐까 싶습니다.
이번 개정판에서는 더이상 서비스 되지 않는 구버전의 내용을 덜어내고, HTML5와 CSS3를 처음 공부하는 분을 위한 내용이 많이 추가되었다고 한다. 예제에 쓰인 개발도구도 무거운 Microsoft의 Visual Studio가 아닌 가벼운 Visual Studio Code를 사용한다. (최근 많은 개발자들이 사용하고 있다.)
웹개발 학습서 답게 책 서두에 20일에 끝내는 학습 계획표도 있으니 단기간에 습득을 하려는 독자들은 참고하면 좋을 것 같다. 이 책과 함께 공부하기 위해서 컴퓨터에 크롭(CHROME) 웹 브라우저와 개발도구인 Visual Studio Code를 설치하자.
1장에서는 TIP을 통해 Visual Studio Code 사용법 또는 팁이 설명되어 있으니 참고하면 좋을 것이다.
2장에서는 HTML5의 태그(Tag) 기본에 대해 설명한다.
HTML5 기본 구조부터 학습을 하고, 웹페이지를 만들때 사용하는 기본 태그들을 학습할 수 있다.
많은 태그와 속성을 기억할 필요는 없지만 자주 코드를 작성하다 보면 저절로 익혀질 것이다. 하지만 반대로 가끔 코드를 작성한다면 금새 잊어버리고 코드 작성할때마다 태그를 찾아 참조해야 할 것이다.
3장에서는 CSS3 선택자(Selector) 기본에 대해 설명한다.
우선 선택자에 답이 없다라고 저자는 얘기한다. 그만큼 HTML 요소를 선택하는데 다양한 요소가 있다는 얘기다. 많은 선택자가 있는데, 다 기억하기는 힘들고 개발시 참고할때 W3C의 공식문서를 참조하면 된다.
http://www.w3.org/TR/CSS/
이번 챕터를 통해 JQuery형태로 스타일시트를 구현할 수 있는 것도 처음 알게 되었다.
4장에서는 CSS3 스타일 속성 기본에 대해 설명한다.
스타일 속성은 너무 많아, 자주 사용하지 않는 것도 있다.
혹시 필요할 땐 W3School 사이트를 참조한다. (http://w3school.com)
개인적으로 스타일 속성 작성 시 단위를 혼용해서 써서 디버깅시 애를 먹은 적이 있었다. 이번 기회에 속성 단위를 잘 살펴보고 이전과 같은 실수를 안하도록 해야겠다.
PART 2에서는 HTML5 + CSS3를 사용하여 레이아웃을 구성하는 내용을 다루고 있다.
5장에서는 웹페이지 레이아웃, 6장에서는 스마트폰 레이아웃, 7장에서는 태블릿PC 레이아웃에 대해 설명한다. 예전과 달리 다양한 기기와 다양한 디스플레이가 나와 있기 때문에, 각 디스플레이 환경에 맞게 레이아웃을 구성하는 것이 중요하겠다.
예전에는 table 태그를 사용하여 레이아웃을 잡는 경우를 많이 경험했었다. 개인적으로도 그런 구성에 많이 익숙했었다. 하지만 그렇게 구성하면 이후 변경하려고 할 때 페이지 전체를 들어내야 하는 엄청난 후폭풍을 겪어야 했다. 그런데 이제는 HTML5의 header, div, nav, footer 등의 태그를 이용하여 레이아웃을 잡으면 나중에 업데이트에도 편하게 되었다.
PART3에서는 HTML5+CSS3 심화 내용을 다루고 있다.
9장에서는 CSS3의 변형을 통해 애니메이션 효과를 구현하는 방법을 알아보고,
10장에서는 CSS3 변환을 통한 2차원, 3차원 변환에 대해 설명하고 있다.
11장에서는 CSS 추가 규칙과 반응형 웹에 대해 설명하고 있고, 12장에서는 그리드 시스템에 대해 설명하고 있다.
PART3에서 설명하는 내용들이 요즘 웹페이지들이 사용하고 있는 기술이다.
예제 코드를 작성하여 실행해보니 아 이렇게 구현되는구나 하고 웹페이지의 비밀을 알게 되었다.
궁금한 사항이 있으면 저자의 유튜브 채널에 방문하여 댓글로 질문을 남기면 저자가 친절히 답변해 줄 것이다.
개인적으로 예전 HTML 코드에 익숙해있어서 HTML5와 CSS3로 할 수 있는 것이 너무나 많다는 것에 감탄을 연발했다. 예전에는 이미지나 스크립트 언어로 구현했던 기능들을 이제는 간단하게 HTML5와 CSS3로 구현할 수 있으니 말이다. HTML과 CSS도 발전했지만 웹브라우저도 함께 발전되어 왔기 때문에 가능한 것이 아닌가 생각한다. 이제는 틈틈이 시간을 내어 다양한 웹페이지를 구현하면서 다양한 태그와 속성들을 익히도록 노력해야겠다.
오랜만에 성취감을 맛볼 수 있는 책을 만났습니다. 바로 ‘모던 웹을 위한 HTML+CSS3 바이블 3판’이에요. 비전공자 출신으로 항상 혼자 공부하면서 좀 더 알차게 기본적인 틀을 쌓아가고 싶다는 생각을 많이 했는데요.
이 책을 만나면서 하루에 chapter 1개 정도의 분량으로 20일에 끝내는 학습 계획표가 있어서 목표를 잡고 공부할 수 있는 동기를 만들어주는 느낌이 좋았어요. (자기에 맞게 플랜을 짜면서 공부할 수 있습니다.)
처음 시작하는 단계에서 독자들의 흥미?? 호기심을 자극하는 웹에 대한 역사가 들어있어서 약간의 신선하다는 느낌을 느낄 수 있었습니다.
책의 가장 큰 구성으로 장마다 무엇을 배우나요?, 미리 보기, 팁, 연습문제라는 큰 구성을 가지고 있어서 시작과 끝을 확실히 맛볼 수 있으며, 결론부터 말씀드리면 한 챕터 시작과 마무리를 지으면서 결과값을 나왔을 때 완성한 자신의 모습을 보면 학창시절 느꼈던 성취감을 느낄 수 있어서 좋았습니다.
기본적으로 알고 있어야 하는 HTML 태그들을 먼저 알려줍니다. 공부를 첨 시작하는 사람들에게도 더 기본적인 지식을 쌓고 싶은 사람들에게 한눈에 알아볼 수 있게 태그들을 설명하시고 알록달록한 느낌으로 그 태그에 대한 정확한 포인트를 집어주는 느낌 가독성이 좋아서 쉽게 HTML에 다가갈 수 있었습니다.
솔직히 직관적으로 보여주는 포인트가 맘에 속 들었어요.
또, 한 챕터를 공부하시다가 보면서 중간에 틈틈이 나오는 팁 부분은 놓치지 않고 보면 웹 분야에 대한 지식재산??을 쌓을 수 있는 느낌을 받았습니다.
경험담으로 HTML 챕터에서 이미지 크기에 대한 팁 설명이 있는데요. 웹페이지 구상에서 이미지가 정확하게 정해지지 않았을 경우, 사이즈만 알고 있을 때가 가끔 있어서 항상 고민하던 중 유용하게 사용할 수 있는 placehold.it 사이트를 알려주셔서 감사합니다.
이미지가 정확하게 안 정해져 있을 때 사이즈만 알고 있으면 미리 적용할 수 있어서 큰 틀을 간편하게 짤 수 있는 게 큰 도움을 받을 수 있습니다.
더 나아가 이 책의 핵심은 CSS에 있다고 생각하는데요.
비전공자 입장에서 혼자 공부하다가 보면 항상 알고 있는 부분의 선택자, 속성으로만 웹페이지를 만드는 경향이 생기는데 이번엔 CSS에 대한 전반적인 숲을 본 기분이라고 표현할까요? CSS3 선택자 기본부터 스타일 속성까지 다루면서 몰랐던 선택자랑 스타일 속성을 배울 수 있어서 흥미로웠습니다.
차근차근 공부 하다 보니 알차다는 생각했던 부분은 레이아웃에 대한 구성인데요. 웹디자인을 하기 위해 기본적인 레이아웃을 구성할 수 있어야 하는데 다양한 스마트폰, 태블릿PC, 소셜커머스 메인 페이지 등 예제를 통해 경험할 수 있습니다.
또한, 독학으로 공부하다가 보면 해외 레퍼런스를 자주 보게 되는데 가끔 사용되는 규칙들이 있어서 이게 뭔지 하고 궁금증을 가지고 있다가 이번 책을 통해 제대로 알아 갈 수 있는 시간이 되었습니다. 그래서 입문자뿐만 아니라 CSS3에 대해 심도 있는 공부를 원하시는 독자분들에게 추천하고 싶습니다.
웹 디자인을 첨 시작하는 사람이라서 코드랑 친해지기 우선이라고 생각하면서 다른 사람들이 작성하신 소스를 보면서 왜 이 부분에서 이런 코드를 사용할까? 궁금했던 적이 많은데 모던 웹을 HTML+CSS3 바이블을 위한 3판을 통해 정확하게 코드를 읽을 줄 알고 그 내용을 알아갈 수 있는 부분이 좋았습니다.
이 책으로만 공부하시다가 살짝 어렵다고 생각하신 독자분들을 위해 윤인성 저자님께서 훈훈한 목소리로 강의 영상 제공해줘서 쉽고 빠르게 HTML+CSS3를 마스터하실 수 있습니다. (https://www.youtube.com/c/윤인성)
이 책에서 ‘기억하세요’ 말을 자주 보실 수 있는데요. 초반에 책 설명 중에서 윤인성 저자님께서 하신 말씀 중에서도 ‘외우라는 얘기가 아니라 이러한 기능이 있다는 것을 알아두라는 뜻입니다.’라고 하신 말씀이 공부하면서 공감이 가장 느꼈습니다.
깨알같은 공부법도 알려주시고 꼭꼭 HTML+CSS3를 공부하면서 자바스크립트도 공부도 병행하기 바라는 당부의 말씀도 있는데요. 처음 시작하시는 입문자님 살짝 두꺼운 책을 만나고 당황하시지 마시고 같이 모던 웹을 공부하면서 마지막에 느끼는 성취감을 경험해보아요.
대부분의 경력을 백엔드 개발자로 일을 하고 있지만 가끔 웹 개발을 병행을 하던 시기들이 있었다. 사내에서 사용할 운영툴이 대부분이었고, 사용자에게 공개했던 웹 페이지로는 정말 간단한 게임 소개와 FAQ 페이지 정도였다. 그래서 약간의 웹 개발 지식만 가지고도 충분히 결과를 낼 수가 있었기 때문에 웹 개발에 많은 시간을 투자하지는 않았었다.
책을 읽게 된 계기
하지만 최근에는 전문가 수준은 아니지만 규모 있는 프로젝트의 웹 개발도 병행하다보니 더이상 얕은 지식만으로 개발을 할 수 없는 지경에 이르게 되었다. 그러면서 계속 느끼는 부분이 기본이 많이 부족하다는 것이었다. HTML과 CSS, Javascript 모두 기본이 부족했고, 기본기를 탄탄하기 위해 여러 책들을 찾아보게 되었다.
책을 읽으며
이 번에 읽게 된 모던 웹을 위한 HTML5 + CSS3 바이블 3판은 제목 처럼 HTML과 CSS를 다루고 있고, 기반 지식을 다지는데 큰 도움을 준 책이다. 현대의 웹이 탄생하기까지의 히스토리부터 시작해서 HTML과 CSS의 수많은 요소들에 대한 설명이 수록되어있다.
다른 전공 서적들은 대부분 책의 내용이 흑백이었고, 거기에 익숙해져있었는데 이 책은 모든 내용이 컬러로 되어있다. 전에 게임 클라이언트 엔진에 대한 흑백으로 된 책을 읽은 적이 있었는데 그림이 많이 첨부되어 있었지만 지루함을 많이 느꼈었다. 반면 이렇게 컬러풀하고, 각 장의 구조와 첨부된 이미지, 설명글 등이 일관되다보니 책을 읽는 내내 몰입하기가 더 쉬웠다. 책이든, 웹이든 사용자에게 보여지는 시각적인 요소가 정말 중요하다는 것을 또 한번 느낄 수 있었다.
책의 시작부분에도 언급되어 있지만 이 책을 읽을 때는 내용 하나하나를 외우려고 하지 말고 읽기를 바란다. 수많은 기능들에 대한 짤막한 설명들이 대부분이기 때문에 머릿속에 잘 남지 않을 뿐더러 읽는데 너무 많은 시간이 걸릴 것이다. 대신에 이런 기능들이 있구나 정도로만 빠르게 이해하고 넘어간 다음 개발을 진행하면서 필요한 부분을 찾아서 정독하는 것을 추천한다. 아마도 이런 이유로 책의 제목에도 바이블이라는 단어가 들어간 것으로 보인다.
마치며
책을 읽으며 굳이 따라 쳐보지 않아도 그림으로 표현이 잘 되어 있기 때문에 빠르게 읽고 넘어갈 수 있었다. 목차 구성이 기능을 찾아보기 쉽게 되어 있기 때문에 업무 데스크 책꽂이에 항상 꽂아놓고 필요한 기능이 있을 때마다 꺼내서 볼 계획이다. 또한 아래 경로로 접속하면 저자의 유투브 강의도 함께 볼 수 있어서 더 효율적으로 공부할 수 있다.
2012년부터 꾸준히 사랑받아온 모던 웹 디자인을 위한 HTML5+CSS3 입문의 두 번째 개정판(3판)이 모던 웹을 위한 HTML5+CSS3 바이블이라는 새로운 이름으로 찾아왔습니다. 바이블이란 어느 분야에서 권위 있는 책이거나 사람들이 반복해서 읽게 되는 지침서를 의미합니다. 1판과 2판을 모두 학습한 경험을 가진 제가 가장 먼저 한 일은 과연 이 책이 바이블로서 기능할 수 있는지를 짚고 넘어가는 것이었습니다.
표면적으로 이 책을 바이블이라 칭할 수 있는 요건들은 다음과 같습니다.
1. 정적 콘텐츠 2. 동적 콘텐츠 3. 독자 콘텐츠
◇ 첫 번째 요건, 정적 콘텐츠
2판 출간 후 4년이 넘는 시간이 흐른 만큼 최신 버전의 IDE를 통해 코드를 다루며 근래의 웹 표준에 따라 보강된 내용들이 있습니다. 또한 현시점에서 의미 없거나 불필요한 부분을 덜어냄으로써 정성을 들여 정밀하게 개정한 티가 납니다. 2판보다 조금 늘어난 쪽수는 각 챕터 끝에 새롭게 추가한 연습 문제가 한몫하는 것 같습니다. 연습 문제의 해답도 제공합니다. 그리고 수년간 누적된 피드백을 반영하여 각 내용별 권장 학습 방법을 안내하고, 더 나아가 이 책을 생산적으로 읽는 방법을 알려줍니다.
◇ 두 번째 요건, 동적 콘텐츠
이 책의 최대 장점은 책의 내용을 강의 형식으로 다룬 영상들이 있는 윤인성 저자의 유튜브 계정입니다. 예전에는 많은 독자들이 저자의 SNS 계정, 블로그, 이메일 등을 통해 문의 사항을 전달하고 답변을 받았습니다. 이제는 문의 사항의 관련 영상에 바로 댓글을 남길 수 있어 저자와 독자 간 커뮤니케이션의 맥락이 더욱 향상되었습니다.
◇ 세 번째 요건, 독자 콘텐츠
세 번째 요건은 두 번째 요건과 밀접하게 연관되어 있습니다. 예전 방식(저자의 SNS 계정, 블로그, 이메일 등)으로 전달된 지나치게 중복된 문의 사항들은 저자에게 불필요한 스트레스가 되기도 합니다. 반면에 관련 영상의 댓글을 통한 저자와 독자 간의 커뮤니케이션은 외부로 공개되어 있기 때문에 문의 사항의 중복성을 최소화할 수 있다는 장점이 존재합니다. 또한 누적된 댓글들은 그 자체로 훌륭한 학습 정보이므로 독자가 능동적으로 참여한 독자 콘텐츠로 존재하게 됩니다.
이로써 정적 콘텐츠뿐만 아니라 동적 콘텐츠와 독자 콘텐츠까지 제공하는 이 책이 바이블로서 충분하게 기능함을 살펴보았습니다.
이번 리뷰는 책의 내용이 얼마나 친절하고 알찬지, 저에게 어떤 도움을 주었는지 언급한 기존의 리뷰 방식에서 벗어나 조금 색다른 시각으로 작성해보았습니다. 모던 웹을 위한 HTML5+CSS3 바이블이 윤인성 저자가 쓴 3부작의 첫 단추인 책인 만큼 나머지 두 책인 JavaScript+jQuery와 Node.js 프로그래밍의 다음 개정판도 바이블로 찾아오길 기대합니다.
바이블이라기보다는 실전형 입문서이다. HTML5와 CSS3를 사용하여 웹 페이지의 레이아웃을 잡아보자.
HTML5 태그 이름은 모두 알고 있는데 이를 어떻게 활용하는지 감을 잡지 못한다면, CSS3 스타일 속성 이름은 모두 알고 있는데 이를 사용해 레이아웃을 어떻게 구성해야 할지 모른다면, HTML5+CSS3를 배웠다고 할 수 있을까요? 중요한 것은 HTML5, CSS3를 배우는 것이 아닙니다. 그것을 이용해 웹 페이지를 구현하는 것이 중요합니다. 이 책은 HTML5 표준과 CSS3 표준을 사용하여 웹 페이지를 구현하는 방법을 중심으로 설명합니다.
책의 뒤표지에 있는 책 소개인데, 내 이야기인 것 같아 뜨끔했다. 정말 이 책의 정체성을 정확히 표현했다고 생각한다.
본인도 개발자로 살아가다 보니 HTML과 CSS에 대해 꽤 잘 알고 있다고 생각했다. 하지만 내게 전체 화면의 레이아웃을 구성해오라고 한다면 꽤 막막할 것이다. 개발자들은 웹 퍼블리셔가 만들어준 틀 위에서 원하는 기능을 구현하는 경우가 많다 보니 대략 알고는 있지만 원하는 데로 구성하지 못하는 경우가 많다. 더군다나, Spring이나 Django같은 웹프레임워크를 쓰다 보면 레이아웃에 해당하는 부분은 import하여 처리하고 만들고자 하는 세부페이지에만 집중하다 보니 전체 레이아웃에 대해 더더욱 신경을 쓰지 않게 된다. 하지만 적은 인원으로 혹은 혼자서 새로운 프로젝트를 하게 된다면 이런 부분이 꽤 아프게 다가온다. 이럴경우 기존의 틀을 복사해오거나 부트스트랩등을 활용하여 넘어가곤 했는데 이 책을 보고나니 조금 부끄러워졌다. 이렇게 쉽게 할 수 있는 거였는데….
기본적으로 초급자 혹은 HTML과 CSS를 처음 공부하는 분들을 위한 책이라고 밝히고 있다. 하지만 나처럼 HTML과 CSS에 대해 맹목적으로 알고만 있는 분들도 한번 읽어본다면 본인에게 많은 도움이 될 것이라 생각한다.
책의 구성을 보면 1파트는 HTML과 CSS의 기초적인 내용으로, 2파트는 실제 웹 페이지의 레이아웃 구성 실습, 3파트는 CSS의 심화 과정으로 반응형 태그와 부트스트랩을 소개하고 있다. 특히 2파트가 이 책에서 가장 좋은 부분이라고 생각한다. 실제로 조금씩 레이아웃을 쌓아가며 전체 레이아웃을 구성해 가는 과정을 보여준다.
추가로, 저자가 직접 유튜브에 강의를 진행하고 있다. 이 글을 작성하는 시점 기준으로 아직 1파트중 입력태그까지 업로드되어있다. 진도가 좀 늦은 감이 있지만 처음 웹을 공부하려고 하는 분들에게는 많은 도움이 될듯하다.
아쉬운 점이라면 가격 대비 그렇게 많은 내용이 들어있지 않다. 책 제목이 바이블이고 부피도 상당하지만, 초보자용 따라 하기식 진행이다 보니 내용 자체는 그렇게 많지 않고, 2~3일이면 완독할 수 있을듯한 분량이다.
한빛 미디어의 나는 리뷰어다 5월 미션 책이 ‘모던 웹을 위한 HTML5+CSS3 바이블 3판’ 이였다. 저자가 IT출판 아이돌? 유인성작가가 쓴 44번째 도서라고 합니다. 1권 쓰기도 힘든데 44권이나 출판을… 후덜덜. 표지는 작가님이 표지 디자인(캐릭터 일러스트)을 할줄 알았는데 모던? 표지 디자인이다.
첫장을 보면 모던 웹을 위한 시리즈에 대한 설명을 하고 있다. 그 첫번째로 HTML5+CSS3 바이블 3판, 두번째가 JavaScript+jQuery 프로그래밍 3판 마지막으로 Node.Js 프로그래밍 3판이다. 웹 개발의 3종 패키지로 웹 입문 부터 프론트 엔드, 백엔드 웹개발을 빅픽처를 그리고 있다.
그리고 학습진도표를 제공하고 있어 목표에 맞게 자기 주도 학습을 할수 있도록 도와 준다.
책 구성은 총 12 챕터로 632페이지로 구성되어 있다. 내용은 전부 올 컬러이고 종이질 또한 상급으로 책 넘김 느낌이 좋다.
파트1은 챕터 1~4로 구성되어 있고 HTML5+CSS3 기본 문법을 설명하고 있다.
파트2는 챕터 5~8로 구성되어 있고 HTML5+CSS3를 사용한 레이아웃 구성에 대해서 설명을 하고 있다.
파트3은 챕터 9~12로 구성되어 있고 CSS3 변형과 애니메이션, CSS3 추가 규칙 및 반응형 웹, 그리드 시스템에 대해서 설명하고 있다.
그리고 부록으로 부트스트랩, Less 스타일시트, 자바스크립트, SVG태그에 대해서 소개를 하고 있다.
그리고 이책을 읽을 대상 독자에 대한 레벨테스트? 부분이 있는데 결과에 의하면 나는 이책을 읽을 필요가 없다고 작가가 말하고 있다. 그래도 리뷰를 해야 하니깐 후다닥 읽으니 1-2일 정도 몰입 하면 다읽을수 있는 분량이다.
이책을 읽은 소감은 웹을 처음 시작하는 프론트엔드 개발자, 디자이너등 입문자에게 추천 할수 있겠습니다. 다른 HTML5+CSS3와 다르게 딱딱하게 태그 설명 예제 코드로 쓰여지지 않고 기능및 코드를 잘 풀어서 설명하고 있어 술술 읽을수 있을 겁니다.
이책은 3판이나 나와서 많이 다듬어진 책이라서 크게 구성에 문제가 될건 없다.
하지만 나의 매의 눈은 벗어 날수 없는 오타 및 잘못된 예시 들이 몇몇 발견 되었다. p.49 코드 2-9 글자 형태 태그 중 small, sub, sup 태그의 예시가 잘된게 아닌가 생각이 되네요.
기존 코드 Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
변경
금액 :32,000원(부가세 포함)
산소 화학식 : O2
4의 제곱 : 42 = 16
이렇게 예시가 되야 small, sub, sup 태그 사용법을 좀더 쉽게 이해 할수 있지 않을까 생각합니다.
하드코딩을 하지 않은지 너무 오래되었어요. 제 브랜드 사이트 작업도 있고 HTML5, CSS3 도 언어인지라 슬슬 복습할 때도 되었다 싶은 시기였습니다. 요즘 제가 디자인 교육을 받고 있는 센터에서 반응형 웹사이트 만들기 수업도 개설되었고 한빛미디어 서평 이벤트에 HTML5, CSS3 책이 당첨되며 왠지 운명이구나 싶어졌습니다.
사실 아직 완벽하게 읽은 것은 아니에요. 수업이 진행되면 투 트랙으로 책도 같이 읽으며 진행할 생각이라 미리 대략적으로 읽고 무슨 무슨 내용이 있나만 파악한 상태입니다. 무엇보다도 광고 카피가 HTML5, CSS3를 배우는 것만이 목적이 아니라 웹페이지를 구현하는 것이 목적인 책이라는 말이 딱 마음에 들었어요!
작가님... 세상에 어쩌다 HTML5, CSS3 관련 책들을 번역하셨다니... 그 능력이 부러울 뿐이네요.
20일에 끝내는 학습 계획표가 있습니다. 제 수업도 딱 3주 동안 주 2회 진행되는 수업이라 몰입해서 20일 정도 공부할 수 있을 것 같아요.
재미있는 부분은 이 책을 읽어야 하는 사람들을 미리 선별할 수 있는 테스트 페이지가 있습니다. 위 두 사진의 코드를 읽고 어떤 게 구현될지 그려낼 수 있는 분과 아닌 분들로 독자를 구별해낼 수 있데요. 전 실패해서 처음부터 열심히 읽어야 합니다. ㅋㅋㅋ
전 원래 그렇게 생각하지만 작가님도 내용을 하나하나 외우려고 하지 말라고 충고해주셨습니다!
이 책은 정말 웹의 역사부터 차근차근 알려줍니다. 돈 벌기에 급급했던 지난날을 되돌아보며 학창시절 배웠던 내용을 되새겨 볼 수 있었습니다.
목적!! 을 아는 학습과 그렇지 못한 학습의 결과는 많이 다르죠? HTML5, CSS3를 공부해야 하는 이유를 보고 동기부여하세요!
하지만 요즘 대세가 스마트폰 과 웹이 대세이니 HTML 정도는 기본으로 익혀 둔다면 많은 도움이 될것 같아서 HTML5 도서 리뷰에 도전해 보았습니다.
HTML5 가 완전히 표준화에 자리 잡은 것은 2014년 경이라고 합니다.
사실 저도 그 시점에 HTML5이 무엇인지 궁금해서 책을 열어 보기도 했지만 그냥 HTML 과 HTML5 의 차이를 잘 모르겠더라구요.
그런데 이 책에서 HTML5를 공부해 주어야 하는 이유에 대해서 설명을 해 주네요.
요즘에는 모바일이나 아니면 정말 실시간 주식현황까지도 웹페이지를 이용해서 제공해 주고 있거든요.
예전 HTML 표준이었던 시절에는 주식매매 시스템 개발을 하려고 하면 실시간으로 가격을 가져 오기 위해서 계속 가격 정보를 refresh 해서 웹서버에서 정보를 긁어 와야만 했거든요.
그러기 위해서는 계속 웹서버에 정보를 요청하는 타이머를 구현해야 했었습니다.
그래서 예전에는 응용프로그램의 TCP/IP로 실시간 통신을 하면서 어떤 값이 변경이 되면 이벤트를 발생 시켜서 소켓에 그 정보를 전송하면 클라이언트에서 바로 갱신 하는 형태로 구현을 하고 그것을 설치해서 웹에서 보여 주는 형태로 개발하는 액티브엑스 형태의 프로그램이 많았던 것으로 기억합니다.
그런데 HTML5 표준에는 웹소켓이라고 하는 표준 통신프로토콜이 내장 되어 있어서 이 부분이 정말 획기적으로 바뀌지 않았나 생각이 되네요.
이 웹소켓으로 구현을 하면 응용프로그램에서 TCP/IP 실시간 통신을 하는 것과 마찬가지로 웹클라이언트와 웹서버와 실시간 통신이 가능하다고 해요.
물론 이런 것들 때문만은 아니고 pc나 모바일, 태블릿 등 여러 장비에서 융통성 있게 사용하기 위해 변화된 HTML5는 아주 막강한 힘을 갖게 된것 같네요.
chapter 6장에서는 스마트폰 레이아웃을 만드는 방법과 7장에서는 태블릿 레이아웃을 만드는 부분에 대해서 집중적으로 다루고 있는 것을 보면 현재 스마트폰의 힘이 막강해 졌는지를 이해 할수가 있네요.
저도 이동중에나 집에서도 스마트폰을 이용하는 횟수가 예전에 비해 많아 진것을 본다면 이러한 스마트폰 레이아웃은 정말 필요한것 같아요.
네이버 모바일 페이지의 예를 들어서 각각의 태그에 대해 설명을 해 주고 있네요.
이 책을 읽으면서 모든것을 암기해야 하는 것이 아니고 그냥 훑어 보면서 이런 기능이 있고
이런 웹페이지는 이런 기능을 이용해서 만들었겠구나 하는 정도만 이해 하고 넘어 가시면 이 책을 읽는 충분한 목적을 이룬것이라 생각 됩니다.
이 책을 읽으면서 가장 좋았던 부분은 사실 HTML5 보다도 CSS 부분에 대해서 그동안 웹페이지를 분석 하려고 볼 때마다 CSS 의 다양함에 약간은 질렸던 부분들이 있었거든요.
하지만 그냥 슬쩍 슬쩍 읽어 가면서 이런 기능을 이렇게 구현하는 구나 하고 이해 할 수가 있었던 점이 참 좋았던것 같네요.
그리고 나중에 웹페이지를 구현하려고 할때...
이책의 제목에서 바이블이라고 했던 것처럼 그 기능의 위치를 찾아서 참고해서 구현을 해 주면 좋을것 같아요.
처음에는 예제들을 보면서 그냥 쉽게 훑어가고 직접 웹페이지를 구현하면서 바이블처럼 찾아 보면서 구현을 하기 딱 좋은 책이네요.
잘 만들어진 책이란것을 알 수 있는 것이 벌써 3판이 나온 것을 보면 HTML5 의 서적 중에서도 인기 있는 인정 받은 책임이 분명해 보이네요.^^
요즘 리뷰어가 회사에서 하는 일은 backend와 frontend를 연동하여 사내툴을 개발하는 일이다. 예전 같으면 웹과 관련된 일은 정말 3D라고 여겨 절대로 하지 않았겠지만, 요즘은 시대가 많이 바뀐지라 웹 프로그래머가 정말로 많은 각광과 호황을 누리고 있는 듯하다. 당장에 지금 다니는 회사 내에서도 vue.js와 java spring을 제대로 할 줄 아는 사람이 없어 인력난에 시달리고 있으니말이다. 이런 시기에 위의 바이블 책은 다양한 예제를 통해 웹에 관련된 기본 지식을 매우 잘 소개하고 있으니 정말 시대 적절한 도서라 할 수 있다.
책에 관한 본격적인 리뷰에 임하기에 앞서 어떤 사람들에게 본 서를 권하는지 적어보도록 하겠다.
【어떤 독자를 위한 책인가】
이 책에서 다루는 내용은 책의 주제와 같이 HTML5와 CSS에 관한 내용을 다룬다. 그냥 대충대충 내용만 집고 전체적으로 살펴보는 그런 것이 아니라. 정말 테그 하나, 기능 하나까지 꼼꼼히 집고 넘어가며 잘 설명하고 있다. 따라서 이 책은 단순 입문자 뿐만 아니라, 레퍼런스 서로 중급자 이상도 옆에 두고 참조하며 작업을 하면 좋은 책이다.
【책의 구성】 '모던 웹을 위한 HTML5 + CSS3 바이블' 책의 구성은 어떠한가.
이 책의 구성은 정말로 친절하다. 처음에 웹의 전체적인 히스토리를 시작으로 HTML과 CSS에 각각의 테그별 기능 그리고 그 기능을 이용한 예제, 예제 코드 등을 정말 친절하게 설명하며 진행하고 있다. 무엇보다 소스 코드 예제가 컬러풀하게 되어있어서 테그와 내용을 한번에 쉽게 파악할 수 있어 공부하기에 정말 좋은 구성을 하고 있다. 또한 내용뒤에 바로 해당 내용과 관련된 코드가 나오기 때문에 내용을 코드로 이해하기가 매우 쉬운 구조이다. 그러므로 HTML과 CSS를 처음 접하는 독자라면 위의 책의 내용을 차례 차례 따라하다보면 자기도 모르는 사이에 중급자의 길에 들어서 있을 것이라 생각된다.
【모던 웹을 위한 HTML5 + CSS3 바이블를 읽으며…….】
요즘은 웹을 모르면 거의 프로그래머의 기초가 안되었다고 보는??? 그런 아이러니한 시대가 되었다. 불과 5~6년 전만 해도 안드로이드와 아이폰, 윈도우 프로그래밍이 대세였던 시대였는데, 지금은 웹 프로그래밍 하나만 잘하면 안드로이드, 아이폰, 윈도우 모두를 섭렵할 수 있는 시대가 도래했기 때문이다. 무엇보다 모든 것이 인터넷으로 연결되는 것이 당연한 지금 시대에 웹이 이렇게 각광 받는 것은 어찌보면 당연한 일이라고도 보여진다. 그러므로 이번 기회에 독자 여러분들도 웹을 공부해보시길 권한다. ( 음.. 역시 프로그래머는 시대에 맞춰 꾸준히 기초를 갈고 닦으며 그 시대상의 트랜드 기술을 숙지하는 것은 숙명인 듯하다.)