Detail View

HTML4, CSS2와 HTML5, CSS3가 무엇인지 몰라도 배울 수 있는 웹 디자인 교과서. 최신 기술인 HTML5와 CSS3를 단계별로 학습하고, 웹 사이트 디자인을 직접 따라하면서 HTML5와 CSS3를 어떻게 응용하는지 설명하므로 단순한 태그 나열이 아니라 스타일을 완성하는 방법을 자연스럽게 터득한다. PC용 웹 페이지 시안을 만들어보고, 스마트폰을 위한 모바일 웹 페이지 제작, 태블릿을 위한 웹 페이지 제작을 따라하는 구성이므로 어떤 웹 사이트 디자인에도 대응할 수 있다.

가상의 소셜커머스를 만들어 실제와 같은 웹 페이지를 제작해본다. 또한, 한 번 디자인해서 PC, 스마트폰, 태블릿 등의 다양한 크기의 화면에 대응하는 반응형 웹 디자인을 살펴보고, 웹 디자인에 쓰이는 정적 그리드 시스템, 동적 그리드 시스템, 반응형 그리드 시스템까지 설명해 어떤 상황에서도 독자가 응용하는 게 가능하다. 또한 스타일시트 핵, HTML5 지원을 가능하게 하는 HTML5 Shiv, IE9.js 등을 설명하고, 웹 디자인을 간편하게 해주는 부트스트랩, 체계적인 스타일링을 위한 Less, HTML5를 이용한 미디어 갤러리, SVG를 이용한 지도와 통계 자료 표시 등을 다뤘다.

HTML5의 다양한 태그와 CSS3의 스타일 속성, 복잡한 CSS3 선택자에 대해 코드와 이미지를 함께 보여줘서 시각적으로 바로 이해하는 구성으로 되어 있다. 직접 실습해보지 않아도 코드와 결과를 바로 확인할 수 있게 했다. 또한, 브라우저별 지원 여부를 별도로 표기해 다양한 브라우저에서 직접 테스트해보지 않아도 사용 여부를 알 수 있다. 이 책의 모든 예제는 인터넷 익스플로러 8 이상에서 동작하며, 브라우저 지원 여부에 따라 인터넷 익스플로러, 크롬, 사파리, 파이어폭스, 오페라의 버전을 명시했으며, 아이폰, 안드로이드폰, 갤럭시 탭, 아이패드에서 테스트했다. 뉴아이패드를 위한 레티나 디스플레이를 인식하는 방법까지 빠짐없이 수록했다.

예제 및 HTML5+CSS3 일람표 제공: www.hanb.co.kr/exam/1955

이 책이 제시하는 핵심 내용
웹 디자인을 처음 배우는 독자를 위한 HTML5+CSS3 웹 디자인 교과서

어떤 독자를 위한 책인가?
웹 디자인을 처음 배우지만, HTML5와 CSS3까지 한 번에 배우고 싶은 학생이나 초보자
웹 디자인을 알지만 HTML5와 CSS3를 학습하려는 디자이너나 개발자
태블릿, 모바일 웹 사이트 디자인과 반응형 웹 디자인을 해보고 싶은 독자

시대의 흐름에 맞춰 다시 쓴 웹 디자인 교과서
HTML4, CSS2와 HTML5, CSS3가 무엇인지 몰라도 배울 수 있는 웹 디자인 교과서다. HTML4, CSS2와 HTML5, CSS3의 차이를 구분하고, 어떤 것은 써도 되고, 어떤 것은 써도 안 되는지 알아야 하고, 어떤 것은 HTML4이고, HTML5는 무엇이 다른지 알아야 하는 복잡한 공부방법은 필요 없다. 웹 디자인 경험이 없어도, HTML과 CSS가 무엇인지 몰라도 바로 웹 디자인을 시작할 수 있다. 웹 디자인은 이 한 권으로 끝낸다!

자바스크립트가 없는 HTML5 책은 어디 없나요? HTML5 디자인이 알고 싶을 뿐이에요!
이 책은 부록 일부를 제외하면 본문 전체에서 자바스크립트가 없다. 웹 디자인도 모르는데 HTML5, CSS3, 자바스크립트를 섞어놔서 불만이었다면 이 책이 정답이다. 순수하게 웹 디자인을 공부하고 싶은 독자, HTML5와 자바스크립트를 섞어놔서 공부하기 어려웠던 독자, 웹 디자인을 먼저 배우고 자바스크립트를 공부하고 싶은 독자를 위한 책이다. 웹 디자인에 자바스크립트를 더해 동적으로 만들고 싶다면 자매서 『모던 웹을 위한 JavaScript + jQuery 입문』을 보면 된다.

스타일링으로 배우는 웹 디자인. 태그와 속성만 나열하는 책에 지쳤어요!
최신 기술인 HTML5와 CSS3를 단계별로 학습하고, 웹 사이트 디자인을 직접 따라하면서 HTML5와 CSS3를 어떻게 응용하는지 설명하므로 단순한 태그 나열이 아니라 스타일을 완성하는 방법을 자연스럽게 터득한다. PC용 웹 페이지 시안을 만들어보고, 스마트폰을 위한 모바일 웹 페이지 제작, 태블릿을 위한 웹 페이지 제작을 따라하는 구성이므로 어떤 웹 사이트 디자인에도 대응할 수 있다. 가상의 소셜커머스를 만들어 실제와 같은 웹 페이지를 제작해본다. 또한, 한 번 디자인해서 PC, 스마트폰, 태블릿 등의 다양한 크기의 화면에 대응하는 반응형 웹 디자인을 살펴보고, 웹 디자인에 쓰이는 정적 그리드 시스템, 동적 그리드 시스템, 반응형 그리드 시스템까지 설명해 어떤 상황에서도 독자가 응용하는 게 가능하다.

다양한 보완 기술 설명
HTML5와 CSS3는 끊임없이 발전하는 표준 기술로 크롬, 웹킷, 파이어폭스 등의 웹 브라우저는 매우 빠르게 발전하는 반면 인터넷 익스플로러는 발전이 더디다. 이를 보완하는 스타일시트 핵, HTML5 지원을 가능하게 하는 HTML5 Shiv, IE9.js 등을 설명한다. 또한, 웹 디자인을 간편하게 해주는 부트스트랩, 체계적인 스타일링을 위한 Less, HTML5를 이용한 미디어 갤러리, SVG를 이용한 지도와 통계 자료 표시 등을 다뤘다.

430여 개의 코드와 580여 개의 이미지로 이해를 돕는다
HTML5의 다양한 태그와 CSS3의 스타일 속성, 복잡한 CSS3 선택자에 대해 코드와 이미지를 함께 보여줘서 시각적으로 바로 이해하는 구성으로 되어 있다. 직접 실습해보지 않아도 코드와 결과를 바로 확인할 수 있게 했다. 또한, 브라우저별 지원 여부를 별도로 표기해 다양한 브라우저에서 직접 테스트해보지 않아도 사용 여부를 알 수 있다. 이 책의 모든 예제는 인터넷 익스플로러 8 이상에서 동작하며, 브라우저 지원 여부에 따라 인터넷 익스플로러, 크롬, 사파리, 파이어폭스, 오페라의 버전을 명시했으며, 아이폰, 안드로이드폰, 갤럭시 탭, 아이패드에서 테스트했다. 뉴아이패드를 위한 레티나 디스플레이를 인식하는 방법까지 빠짐없이 수록했다.

학습 로드맵
『모던 웹 디자인을 위한 HTML5+CSS3 입문』 → 『모던 웹을 위한 JavaScript + jQuery 입문』 → 『모던 웹을 위한 Node.js 프로그래밍』

일람표 수록
HTML5와 CSS3를 한 번에 찾아볼 수 있는 일람표를 특별부록으로 수록했으며, 한빛미디어 웹 사이트(www.hanb.co.kr/exam/1955)에서도 내려받을 수 있다.

Information Provided By: :

목차
지은이의 말 = 4
서문 = 6
CHAPTER 01 HTML5 개요
 1.1. 웹의 역사 = 23
  인터넷의 시작 = 24
  제1차 웹 브라우저 전쟁 = 25
  플러그인 = 27
  웹 2.0 시대 = 27
  WHATWG = 29
  제2차 웹 브라우저 전쟁 = 30
 1.2. HTML5 추가 기능 = 32
  멀티미디어 = 33
  그래픽 = 34
  통신 = 35
  장치 접근 = 36
  오프라인 및 저장소 = 37
  HTML5 시멘틱 태그 = 38
  CSS3 스타일시트 = 38
  성능 및 통합 = 38
 1.3. HTML5를 공부해야 하는 이유 = 39
 1.4. Visual Studio 2012 Express for Web 설치 = 41
 1.5. HTML 페이지 생성 = 43
 1.6. 구글 크롬 설치 = 45
 1.7. 구글 크롬 개발자 도구 = 46
 1.8. IE Tester 설치 = 48
CHAPTER 02 HTML5 태그 기본
 2.1. 글자 태그 = 50
  제목 = 50
  본문 = 51
  앵커 태그 = 55
  글자 형태 = 58
  루비 문자 = 60
 2.2. 목록 태그 = 62
  기본 목록 = 63
  정의 목록 = 65
 2.3. 테이블 태그 = 66
  테이블 태그 기본 = 66
  테이블 태그의 속성 = 70
 2.4. 이미지 태그 = 72
 2.5. 오디오 태그 = 75
  audio 태그 = 75
  source 태그 = 78
 2.6. 비디오 태그 = 79
  video 태그 = 80
  track 태그 = 85
 2.7. 입력 양식 태그 = 87
  입력 양식 개요 = 88
  기본 input 태그 = 90
  HTML5 입력 양식 태그 = 93
  textarea 태그 = 96
  select 태그 = 97
  fieldset와 legend 태그 = 101
 2.8. 공간 분할 태그 = 102
  div 태그와 span 태그 = 103
  HTML5 시멘틱 구조 태그 = 106
CHAPTER 03 CSS3 선택자 기본
 3.1. 선택자 종류 개요 = 112
 3.2. 전체 선택자 = 114
 3.3. 태그 선택자 = 117
 3.4. 아이디 선택자와 클래스 선택자 = 118
  아이디 선택자 = 119
  클래스 선택자 = 121
 3.5. 속성 선택자 = 124
  기본 속성 선택자 = 124
  문자열 속성 선택자 = 127
 3.6. 후손 선택자와 자손 선택자 = 129
  후손 선택자 = 130
  자손 선택자 = 132
 3.7. 동위 선택자 = 135
 3.8. 반응 선택자 = 137
 3.9. 상태 선택자 = 139
 3.10. 구조 선택자 = 142
  일반 구조 선택자 = 143
  형태 구조 선택자 = 145
 3.11. 문자 선택자 = 148
  시작 문자 선택자 = 148
  전후 문자 선택자 = 149
  반응 문자 선택자 = 152
 3.12. 링크 선택자 = 153
 3.13. 부정 선택자 = 155
CHAPTER 04 CSS3 스타일 속성 기본
 4.1. CSS3 단위 = 158
  키워드 = 159
  크기 단위 = 159
  색상 단위 = 163
  URL 단위 = 167
 4.2. 가시 속성 = 168
  display 속성 = 169
  visibility 속성 = 172
  opacity 속성 = 175
 4.3. 박스 속성 = 175
  width 속성과 height 속성 = 176
  margin 속성과 padding 속성 = 177
  box-sizing 속성 = 180
 4.4. 테두리 속성 = 182
  border-width 속성과 border-style 속성 = 183
  border-radius 속성 = 185
 4.5. 배경 속성 = 187
  background-image 속성 = 187
  background-size 속성 = 189
  background-repeat 속성 = 193
  background-attachment 속성 = 194
  background-position 속성 = 197
 4.6. 폰트 속성 = 200
  font-size 속성 = 200
  font-family 속성 = 202
  font-style 속성과font-weight 속성 = 206
  line-height 속성 = 207
  text-align 속성 = 210
  text-decoration 속성 = 212
 4.7. 위치 속성 = 213
  position 속성 = 214
  z-index 속성 = 217
  위치 속성과 관련된 공식 = 219
  overflow 속성 = 221
 4.8. float 속성 = 223
  float 속성 개요 = 224
  float 속성을 사용한 수평 정렬 = 226
  float 속성을 사용한 레이아웃 구성 = 227
 4.9. 그림자 속성 = 233
  text-shadow 속성 = 233
  box-shadow 속성 = 234
 4.10. 벤더 프리픽스 = 237
 4.11. 그레이디언트 = 240
CHAPTER 05 웹 페이지 레이아웃
 5.1. 웹 페이지 개요 = 245
 5.2. 레이아웃 구분 = 249
 5.3. 초기화 = 251
 5.4. 헤더 구조 작성 = 254
 5.5. 웹 폰트 = 257
 5.6. 수평 메뉴 = 260
 5.7. 콘텐츠 구성 = 262
 5.8. 본문 구성 = 265
 5.9. 사이드 탭바 구성 = 267
 5.10. 목록 구성 = 272
 5.11. 푸터 구성 = 275
 5.12. 정리 = 277
CHAPTER 06 스마트폰 레이아웃
 6.1. 스마트폰 개요 = 285
 6.2. 모바일 웹 개발 주의사항 = 289
 6.3. 뷰포트 meta 태그 = 291
 6.4. 초기화 = 293
 6.5. 헤더 구조 구성 = 295
 6.6. 스프라이트 이미지 = 299
 6.7. 토글 목록 구성 = 303
 6.8. 내비게이션 구성 (1) = 306
 6.9. 내비게이션 구성 (2) = 309
 6.10. 본문 구성 = 312
 6.11. 푸터 구성 = 314
 6.12. 정리 = 315
 6.13. 전체 화면 = 321
 6.14. 글자 감추기 = 324
CHAPTER 07 태블릿 PC 레이아웃
 7.1. 초기화 = 328
 7.2. 헤더 구성 = 330
 7.3. 내비게이션 구성 = 331
 7.4. 콘텐츠 구성 = 335
 7.5. 수직 목록 구성 = 340
 7.6. 본문 구성 = 342
 7.7. 푸터 구성 = 343
 7.8. 정리 = 344
 7.9. 고정 바 = 349
CHAPTER 08 소셜커머스 메인 페이지
 8.1. 초기화 = 353
 8.2. 헤더 구성 = 356
 8.3. 사이드 구성 = 358
 8.4. 내비게이션 구성 (1) = 361
 8.5. 내비게이션 구성 (2) = 364
 8.6. 목록 구성 = 366
 8.7. 콘텐츠 구성 = 372
 8.8. 최종 정리 = 376
CHAPTER 09 CSS3 변형과 애니메이션
 9.1. 변형 속성 기본 = 379
 9.2. 변형 속성 = 382
  transition-delay 속성 = 385
  transition-timing-function 속성 = 386
  transition-property 속성 = 389
 9.3. 키 프레임과 애니메이션 속성 = 392
  animation-name 속성 = 394
  animation-iteration-count 속성 = 395
  animation-direction 속성 = 396
  animation-play-state 속성 = 397
CHAPTER 10 CSS3 변환
 10.1. 2차원 변환 = 400
  transform 속성 = 401
  2차원 변환 함수 = 403
  transform-origin 속성 = 406
 10.2. 3차원 변환 = 409
  3차원 변환 함수 = 410
  transform-style 속성 = 413
  backface-visibility 속성 = 415
 10.3. 원근법 = 416
 10.4. 회전 목마 = 418
  body 태그 구성 = 419
  스타일 적용 = 421
  애니메이션 적용 = 423
CHAPTER 11 CSS 추가 규칙과 반응형 웹
 11.1. ＠import 규칙 = 428
 11.2. ＠font-face 규칙 = 431
 11.3. ＠media 규칙 = 434
 11.4. 반응형 웹 = 440
 11.5. 화면 방향 전환 = 444
CHAPTER 12 그리드 시스템
 12.1. 그리드 시스템 플러그인 = 447
  960 Grid System 플러그인 = 447
  1140 CSS Grid 플러그인 = 451
 12.2. 정적 그리드 시스템 = 455
 12.3. 동적 그리드 시스템 = 461
 12.4. 반응형 그리드 시스템 = 467
부록 A. 인터넷 익스플로러 보완 방법
 A.1 시작하기 전에  = 472
 A.2 인터넷 익스플로러 - 조건부 주석 = 473
 A.3 인터넷 익스플로러 - 스타일시트 핵 = 476
 A.4 HTML5 지원 - HTML5 Shiv = 477
 A.5 HTML5 지원 - IE9.js = 480
 A.6 CSS3 속성 - CSS3 Pie = 483
 A.7 CSS3 미디어쿼리 - CSS3 MediaQueries.js 플러그인 = 486
 A.8 CSS3 초기화 - Normalize.css 플러그인 = 488
부록 B. 부트스트랩
 B.1 설정 = 492
 B.2 레이아웃 = 494
 B.3 툴바 = 498
 B.4 툴바 버튼 = 502
 B.5 다단 레이아웃 = 509
 B.6 수직 목록 = 512
 B.7 정리 = 517
부록 C. Less 스타일시트
 C.1 개요 = 520
 C.2 Less 컴파일러 = 523
 C.3 기본 = 525
  변수 = 525
  연산 = 526
  내장 선택자 = 527
  내장 함수 = 528
  믹스인 = 532
 C.4 서버를 사용한 변환 = 538
  정적 파일 변환 = 539
  동적 파일 변환 = 540
부록 D. HTML5를 사용한 플래시 웹 페이지 개발
 D.1 HTML5의 플래시 대체 가능 범위 = 541
 D.2 회전 이미지 갤러리 = 543
  HTML 페이지 구성 = 543
  스타일시트 작성 = 544
  자바스크립트 코드 작성 = 546
 D.3 영화 소개 페이지 = 551
  HTML 페이지 구성 = 553
  내비게이션 목록 구성 = 556
  자바스크립트 구성 = 557
  타이틀 구성 = 559
  일반 페이지 구성 = 561
  캐릭터 페이지 구성 = 565
부록 E. SVG 태그
 E.1 기본 = 573
  라파엘 플러그인 = 576
  SVG 태그를 사용한 지도 = 580
  SVG 태그를 사용한 지도와 통계 자료 = 588
찾아보기 = 593