빌노트의 노트

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

IT책

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

빌노트 2014. 11. 26. 09:27

모던 웹 디자인을 위한 HTML5 CSS3, 윤인성, Modern Web Design, PC 태블릿 모바일 웹페이지 제작, HTML5, CSS3, 웹 디자인, 웹 프로그래밍, HTML 태그, CSS 속성, 레이아웃, 부트스트랩, Bootstrap

대학시절 때는 게임 프로그래밍에 미쳐 휴학까지 했었고, 지금은 어쩌다가 안드로이드를 중심으로 모바일 프로그래밍을 하고 있지만, 최근 저의 주된 관심사는 단연 웹(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, 윤인성, Modern Web Design, PC 태블릿 모바일 웹페이지 제작, HTML5, CSS3, 웹 디자인, 웹 프로그래밍, HTML 태그, CSS 속성, 레이아웃, 부트스트랩, Bootstrap

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

 

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

 

모던 웹 디자인을 위한 HTML5 CSS3, 윤인성, Modern Web Design, PC 태블릿 모바일 웹페이지 제작, HTML5, CSS3, 웹 디자인, 웹 프로그래밍, HTML 태그, CSS 속성, 레이아웃, 부트스트랩, Bootstrap

모던 웹 디자인을 위한 HTML5 CSS3, 윤인성, Modern Web Design, PC 태블릿 모바일 웹페이지 제작, HTML5, CSS3, 웹 디자인, 웹 프로그래밍, HTML 태그, CSS 속성, 레이아웃, 부트스트랩, Bootstrap

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 정복'이라는 책도 최근 나온 것으로 알고 있는데, 내용이 얼마나 알찰지 기대가 됩니다. 근데 이미 모던 시리즈로 다 질러놔서 비슷한 책을 또 구입는 좀 그렇고 아무튼 진짜 보고 싶네요!

 

 


8 Comments
  • 프로필사진 Favicon of https://estherstory.tistory.com BlogIcon 에스델 ♥ 2014.11.26 11:02 신고 요즘 웹 프로그래밍에 관심이 많으시군요^^
    좋은 하루 보내세요!
  • 프로필사진 Favicon of https://billnote.net BlogIcon 빌노트 2014.11.26 14:53 신고 관심사가 너무 다양해서 큰일입니다 ㅎㅎ
    에스델님도 기쁜하루 되세요^^
  • 프로필사진 Favicon of https://zoahaza.net BlogIcon 조아하자 2014.11.26 14:16 신고 이 책 저도 보고있어요! ㅎㅎ 제 소감으로는 웹표준의 관점에서는 훌륭한 책이지만, 웹 접근성의 관점에서는 많이 아쉬운 책이에요. 접근성에 대해서 공부하려면 다른 책이 훨씬 나을 것 같습니다.
  • 프로필사진 Favicon of https://billnote.net BlogIcon 빌노트 2014.11.26 14:54 신고 웹 접근성도 따로 공부해야 하는군요... ㅡㅡㅋ
    저는 개발자다보니 디자인 감각이 꽝입니다 ㅎㅎ
    접근성관련 좋은 책이 있으면 추천바랍니다^^
  • 프로필사진 Favicon of https://zoahaza.net BlogIcon 조아하자 2014.11.26 15:06 신고 기존 xhtml 버전이라면 <웹 표준 핵심가이드북 XHTML+CSS : 웹 접근성에서 크로스 브라우징까지> 이란 책이 웹 접근성에 맞는 마크업을 이해하는 데 도움이 많이 됩니다. 다만 html5에서 웹 접근성에 대한 책은 아직까진... 이렇다할 책을 발견하질 못했다는게 함정이네요 -.-;
  • 프로필사진 Favicon of https://billnote.net BlogIcon 빌노트 2014.11.26 15:12 신고 W3C에서 XHTML2에 대한 지원을 중단한 상태에서 그 책을 사려니 좀...
    그냥 HTML5 멋진 책을 기다려야 할 것 같습니다.
    솔직히 멋진 콘텐츠가 바로 웹접근성이라고 믿고 싶습니다만
    그래도 HTML5의 시맨틱 태그 정도는 적용하는걸로 타협해야겠습니다!
  • 프로필사진 Favicon of https://zoahaza.net BlogIcon 조아하자 2014.11.26 15:18 신고 xhtml 책들... 외국에서는 거의 쓸모가 없겠지만 적어도 우리나라에서는 쓸모 있습니다. 왜냐하면 우리나라 사람들은 html5가 지원되지 않는 구버전 익스플로러를 쓰는 사람이 50% 이상이기 때문입니다. -_-; 어이없는 현실이지요. 마찬가지로 현업에서도 외국에서는 거의 html5 써서 홈페이지 구축하지만 우리나라에서는 모바일 홈페이지가 아닌 이상 html5 쓰는 비율이 10%정도밖에 안됩니다. html5 미지원 브라우저 사용자의 비중이 높아서요 -_-
  • 프로필사진 Favicon of https://billnote.net BlogIcon 빌노트 2014.11.27 10:53 신고 우리나라는 IT기술에 대한 민첩도가 좀 떨어지는 것 같습니다.
    부디 HTML5 표준이 어서 빨리 정착되길 기원합니다^^
댓글쓰기 폼