PC, 태블릿, 모바일 웹페이지 제작을 위한 디자인 입문서 '모던 웹 디자인을 위한 HTML5 + CSS3 입문' - 윤인성 지음 (HTML5, CSS3 기초에서부터 반응형 웹디자인, 부트스트랩까지)

대학시절 때는 게임 프로그래밍에 미쳐 휴학까지 했었고, 지금은 어쩌다가 안드로이드를 중심으로 모바일 프로그래밍을 하고 있지만, 최근 저의 주된 관심사는 단연 웹(Web) 프로그래밍입니다. 멋진 웹페이지 화면을 보고 있으면 "이건 어떻게 만들었지?"라는 궁금증이 생기더군요. 예전에는 현란한 웹 화면은 거의 다 플래시로 만들었는데 요즘은 HTML5, CSS3, JavaScript라는 것으로도 잘 구현됩니다. 이렇게 관심이 생겼으니 서버쪽은 제껴두더라도 클라이언트쪽 웹을 제대로 공부하고 싶은 마음에 HTML, CSS부터 덤볐습니다. 웹표준 관련된 책을 포함해서 이 책, 저 책 안 가리고 많이 읽어보았지요. 그 중에서 가장 마음에 들었던 책이 '모던 웹 디자인을 위한 HTML5 + CSS3 입문'으로, 웹에 대한 궁금증을 가장 많이 해결해주었습니다.

 

모던 웹 디자인을 위한 HTML5 + CSS3 입문 (Modern Web Design)

 

Chapter 1. HTML5 개요

Chapter 2. HTML5 태그 기본

Chapter 3. CSS3 선택자 기본

Chapter 4. CSS3 스타일 속성 기본

Chapter 5. 웹 페이지 레이아웃

Chapter 6. 스마트폰 레이아웃

Chapter 7. 태블릿 PC 레이아웃

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

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

Chapter 10. CSS3 변환

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

Chapter 12. 그리드 시스템

부록 A. 인터넷 익스플로러 보완 방법

부록 B. 부트스트랩

부록 C. Less 스타일시트

부록 D. HTML5를 사용한 플래시 웹 페이지 개발

부록 E. SVG 태그

 

'모던 웹 디자인을 위한 HTML5 + CSS3 입문'은 HTML5, CSS3 문법부터 상세하게 설명하고 있는 입문서지만, 실전에서도 활용할만한 다양한 내용을 다루고 있습니다. 뒷부분에는 최신 HTML5, CSS3에 대한 내용도 조금 설명하는데 우리나라는 아직 구버전 익스플로러가 지배적이라 점진적으로 적용해 나가야 할 것 같습니다.

 

개인적으로 HTML5/CSS3 공부의 핵심은 CSS선택자라고 생각합니다. JavaScript에서도 마찬가지겠지만 정확히 원하는 특정 태크(엘리먼트)를 선택하는 것에서부터 모든 것이 시작됩니다.

 

평소 티스토리 블로그 스킨을 수정하면서 궁금했던 점 'display, visibility 속성의 차이는 무엇인가?' 그리고 'position, overflow, float 속성은 도대체 무엇인가?' 등등... '모던 웹 디자인을 위한 HTML5 + CSS3 입문'에서는 이러한 질문에 대한 답을 공식을 써가며 설명하는데, 궁금증이 정말 한방에 해결되었습니다. 제가 알기론 이 책의 저자가 저보다 훨씬 젊은 학생으로 알고있는데, 이 정도 책을 쓸 수 있다니 부럽기도 하면서 멋지네요! 

 

5장부터 8장까지는 일반 웹페이지 레이아웃, 모바일 레이아웃, 태블릿 레이아웃, 소셜커머스 레이아웃을 만드는 방법을 보여주는데,  나중에 직접 웹 페이지를 만들 때 참고하면 좋을 것 같습니다.

 

'모던 웹 디자인을 위한 HTML5 + CSS3 입문' 부록에서는 반응형 웹 페이지를 쉽게 개발할 수 있도록 트위터에서 개발한 프레임워크 부트스트랩(Bootstrap)이라는 것을 간단하게 설명하는데, 책을 따라서 하나하나 따라해보면 진짜 쉽게 방응형 웹페이지가 만들어지는 것을 볼 수 있습니다. 아쉽게도 최근 부트스트랩3.0 버전이 아닌 구버전 2.3.2버전으로 중심으로 설명하고 있습니다. 부트스트랩은 사용하기 쉽게 만들어졌기 때문에 최신버전으로 시작하고 싶다면, 사이트에서 제공하는 Getting started으로 공부하면 됩니다. 

요즘은 브라우저가 설치 안 된 기기가 거의 없기 때문에, 기기마다 따로 네이티브(아이폰, 안드로이드, 윈도우 등) 프로그래밍을 하느니 속편하게 멋진 반응형 웹앱(Web App) 하나만 만들어 사용하면 좋지 않을까 생각합니다. 물론 퍼포먼스(속도)에 차이가 있겠지만, 기기의 성능도 점점 좋아지는 추세이니 앞으로 그 문제는 사라지겠지요. (경험상 아직은 웹 앱이 좀 느립니다. 최근 안드로이드, 아이폰 프로그래밍을 따로 하기 싫어서 하이브리드 앱을 만든 적이 있는데, 결국은 속도 때문에 네이티브로 다시 만들어야했습니다.)

HTML5, CSS3를 공부를 했다면 다음으로는 바로 JavaScript, jQuery 를 공부를 해야 합니다. 이번에 모던 웹 시리즈가 너무 마음에 들어 JS, jQuery 책도 '모던 웹 디자인을 위한 JavaScript + jQuery 입문'으로 봤는데 조만간에 리뷰를 올리도록 하겠습니다. 느낌만 말씀드리면 이 책도 좋습니다. 이 책이 아니더라도, 제가 좋아하는 저자인 김상형씨가 최근에 쓴 'HTML5+CSS3 정복', 'JavaScript+jQuery 정복'이라는 책도 최근 나온 것으로 알고 있는데, 내용이 얼마나 알찰지 기대가 됩니다. 근데 이미 모던 시리즈로 다 질러놔서 비슷한 책을 또 구입는 좀 그렇고 아무튼 진짜 보고 싶네요!

 

[IT도서] - 레퍼런스용으로 곁에 두면 든든한 안드로이드 교제 '안드로이드 프로그래밍 정복' - 김상형 (Android Programming 책추천)

[IT도서] - C언어 기초를 전혀 모르는 아두이노 입문자를 위한 책 '스케치로 시작하는 아두이노 프로그래밍 Programming Arduino Getting Started with Sketches'

[IT제품리뷰] - 초보자를 위한 저렴한 아두이노 키트 추천 '메카솔루션 입문자를 위한 아두이노 종결 키트' (Arduino Ultimate Kit for Beginners)

[IT도서] - 알라딘 중고서점에서 절판 된 '유닉스 파워 툴 UNIX POWER TOOLS'을 득템하다!

[IT도서] - 온라인 강의와 함께 보면 좋은 'Do it 안드로이드 앱 프로그래밍' (젤리빈 개정판)