만들면서 배우는 HTML5+CSS3+jQuery 후기

예제 10 이미지

 

 HTML5, CSS3, 제이쿼리와 모더나이저, LESS, 클라우드 웹 폰트를 통해 다양한 웹사이트를 제작해가며 실습하는 책. 책 이름처럼 만들면서 배우는게 주 목표이기 때문에 기본 문법에 대한 자세한 설명이 없어 이에 대해 따로 공부하고 보면 좋은 시너지를 얻을 수 있다. 나는 지금 패스트캠퍼스 프론트엔드 개발자 온라인 완주반 수업을 듣고 있다. 현재 4주차 수업을 듣고 있는데 실습을 진행하기 보단 HTML5과 CSS3의 기본 태그와 속성에 대해 강의하고 있다. 강의를 들으며 실습을 하고싶다고 생각했는데 이 책을 통해서 아쉬운 부분을 채울 수 있었다. 직접 따라해보면서 익히는게 내가 잘못 이해하고 있던 속성도 찾아내고 재미있게 복습할 수 있었다.

 

 이 책의 단점은 오래된 책이라는점. 레이아웃을 구성하는데 책의 끝까지 css3의 float까지만 상용해서 진행한다. Grid와 Flex를 통해 CSS 레이아웃을 연습하고 싶었는데 이 점이 아쉬웠다. 그리고 저자분이 책 내용의 보충이나 추가적인 설명을 위해 웹 사이트에 자료들을 올려놓으셨던거 같은데 현재 그 웹사이트가 사라졌다... 책의 중반부부터는 CSS전처리기인 LESS를 사용하여 실습을 진행하는데, 책에서는 너무 구버전의 LESS 사용법을 다루고 있어 따라 실습하기가 어려웠다. 그래서 나는 최신의 LESS를 다운받아 실습을 진행하였다.

 

 책에서는 less파일을 simpleLess툴을 사용해 컴파일하고, 프로젝트의 css폴더 안에 컴파일된 css파일을 넣어 실습을 진행하는 것처럼 보이는데, 나는 node.js를 통해 최신버전의 less를 다운받고 html에서 less폴더 안에 있는 style.less파일을 직접 연결하여 사용하였다. 이처럼 진행하기 위해서는 아래 사진처럼 header를 작성하면 된다. (주석처리된 부분이 기존 책에서 사용하는 예제의 코드이고, 아래 있는 두줄의 코드가 새로운 방법으로 .less파일을 적용하는 방법이다.)

 

 

 

 

옛날책이라는 단점이 있지만, html/css 기본을 정리할겸 웹 사이트 디자인을 참고하기에는 좋은 책이라 생각한다. 심심할때 한 챕터씩 따라할 생각으로 중고 책을 구입해서 보기엔 나쁘지 않은 책인듯하다. (하지만 가능하다면 최신 책을 읽는게 좋지 않을까.. 하는 생각도 든다)

 

 

예제 이미지

 

---

책 주소

 

[전자책] 만들면서 배우는 HTML5+CSS3+jQuery