• HTML5 & CSS3 실전에서는 이렇게 쓴다!

  • 알렉시스 골드스타인, 루이스 라자리스, 에스텔 웨일 지음
  • 장현순 옮김

  • 위키북스 오픈소스 & 웹 시리즈_036
  • ISBN: 9788992939959
  • 25,000원 | 2012년 01월 5일 발행 | 380쪽



책 제목인 『HTML5 & CSS3 실전에서는 이렇게 쓴다!』에서 느낄 수 있듯이 이 책은 웹 프로그래머와 디자이너가 실제로 사이트를 제작하면서 궁금해 할 수 있는 혹은 참고할 수 있는 HTML5와 CSS3와 관련된 내용을 기본 뼈대로 삼고 있다. 이제 막 초보 딱지를 떼고 HTML과 CSS에 대한 개념을 익힌 프로그래머뿐 아니라 HTML5와 CSS3의 최신 기술을 직접 확인해보고 싶은 중급 프로그래머에게 이 책의 군더더기 없는 설명이 도움될 것이다.

이 책에서는 'The HTML5 Herald‘라는 구식 신문(www.thehtml5herald.com에 실제로 구현돼 있다) 웹 사이트를 HTML5와 CSS3의 새로운 기술을 이용해 실제로 하나하나 만들어가면서 실습할 수 있게 구성돼 있으며, 새로운 기술을 하나씩 설명하면서 다양한 브라우저에서의 지원 여부와 하위호환성에 대한 상세한 설명을 덧붙여 프로그래머가 새로운 기술을 자유롭게 적용할 수 있게 배려한다.

HTML5와 CSS3의 새로운 기능 외에도 Modernizr, WAI-ARAI 및 마이크로데이터와 같이 HTML5와 함께 쓰이는 필수 기술은 부록에서 자세히 다루고 있으며, 새로운 기능에 대해 좀 더 심도 있게 살펴보고 싶은 독자를 위해 꼼꼼하게 준비한 참고자료도 제공하고 있다.

바로 지금 여기에 있습니다!

『HTML5 & CSS3 실전에서는 이렇게 쓴다!』는 차세대 웹 개발 기술에 대한 완벽한 소개서입니다. 쉽게 따라 할 수 있는 이 책에는 바로 당장 시작하는 데 필요한 모든 내용이 담겨 있습니다. 여러분은 HTML5에서 이용할 수 있는 새로운 의미적 요소뿐 아니라 복잡한 방법 대신 CSS3를 이용해 화려한 웹사이트를 제작하는 방법을 완벽하게 습득할 수 있습니다.

이 책에서 다루는 내용

  • 자체 HTML5 video를 이용해 귀찮은 플래시를 없애는 방법
  • @font-face를 이용해 메시지의 의미를 부각시킬 수 있는 폰트 타입 설정
  • 사용자가 좋아할 만한 지능적이고 자체 유효성 검사를 실시하는 웹 폼 제작
  • 모바일 환경에서 빛을 발하는 최신 웹 앱 제작
  • SVG와 캔버스를 이용한 동적이고 효과적인 그래픽의 실시간 생성
  • 새로운 API를 이용한 위치 정보와 오프라인 기능 추가
  • 기타 등등……

알렉시스 골드스타인(ALEXIS GOLDSTEIN)

알렉시스 골드스타인은 90년대 중반 고등학교 재학시절 처음으로 HTML을 익혔다. 그녀는 여성을 위한 저비용 프로그래밍 강의를 담당하는 Girl Develop It의 강사이자 공동 조직자이며, 브룩클린에 있는 NYC Resistor hackerspace의 매우 자랑스런 멤버이기도 하다.

루이스 라자리스(LOUIS LAZARIS)

루이스 라자리스는 캐나다 토론토에 살고 있으며, 2000년부터 웹 디자인 업계에 몸담고 있는 프리랜서 웹 디자이너이자 프론트 엔드 개발자다. 루이스는 테이블 레이아웃과 원-픽셀 GIF가 이 분야를 지배하던 때부터 웹 디자인 분야에 몸을 담아왔다. 루이스는 자신의 사이트인 Impressive Webs를 비롯해 최고의 웹 디자인 블로그 여러 곳에 글을 기고하고 있다.

에스텔 웨일(ESTELLE WEYL)

에스텔 웨일은 1999년부터 표준 기반의 접근성 높은 웹사이트를 개발해 오고 있는 샌프란시스코의 프론트 엔드 엔지니어다. 그녀는 방문자가 수백만 명에 달하는 두 개의 기술 블로그에 글을 기고하고 있다. 그녀는 열정적으로 웹 개발에 관한 강연을 하고 있으며, 미국 내의 여러 컨퍼런스에서 CSS3, HTML5, 자바스크립트와 모바일 웹 개발을 주제로 강연하기도 한다.

장현순

1995년 대학에서 웹을 처음 접한 이래로 웹 프로그래머로 일했으며, 웹 관련 기술 및 다양한 분야에 꾸준히 관심을 기울이고 있다. 2년간의 세계여행 후 현재 스위스 취리히의 변두리에 위치한 작은 마을에서 평화롭게 살고 있다. 『윈도우즈 폰 7의 비밀』을 번역했으며, www.memonic.com의 한글 번역 작업을 하고 있다.

 

『HTML5 & CSS3 for the Real World』를 받아든 지도 어느새 3개월 반이 훌쩍 넘었습니다. 오래전부터 웹을 접해온 저도 세 명의 저자가 HTML5와 CSS3에 대한 이야기를 어떻게 풀어갈지 궁금했던 기억이 납니다. HTML은 이제 단순히 컴퓨터의 웹 페이지뿐 아니라 일상 생활의 필수품이 된 스마트폰을 위한 웹 페이지를 만드는 데도 활발하게 쓰인다는 점에서 활용범위가 무궁무진해졌다고 할 수 있습니다. HTML 하나만 확실히 익혀도 충분히 실력을 발휘할 수 있는 장이 굉장히 넓어진 것이지요. 더구나 여러 개발자 커뮤니티 덕분에 HTML뿐 아니라 HTML을 보완하는 기술도 크게 발전해서 브라우저의 하위호환성이나 브라우저별 기능 지원에 대한 개발자들의 골칫거리도 훨씬 줄어들었습니다. 이제는 쉽고도 강력한, 그야말로 HTML의 전성기가 열렸다고 해도 과언이 아닌 것 같습니다.

세 명의 저자들 모두 웹 표준을 널리 알리기 위해 노력하고 있습니다. 그뿐만 아니라 직접 웹 프로그래밍을 하고 있고, 그와 관련해서 사람들을 가르치고 있기 때문에 누구보다도 웹 프로그래밍 서적이 어떤 구성이어야 개발자에게 실질적으로 도움이 될지 잘 알고 있는 것 같습니다. 저자는 HTML5와 CSS3에 포함된 오디오, 비디오, 변형, 전환, 의미적 요소 등 새롭게 추가되고 발전된 많은 기능들을 독자의 필요에 따라 찾아볼 수 있게 했을 뿐 아니라 이 책이 지루한 레퍼런스가 되지 않도록 ‚The HTML5 Herald‘라는 매력적인 실습 사이트를 태그부터 하나하나 만들어가는 모습을 보여주면서 HTML5와 CSS3의 핵심을 구성하는 새로운 기능들을 자연스럽게 습득할 수 있게 구성했습니다. 이 책을 따라 차근차근 실습하다 보면 마침내 근사하고 스타일리시한 웹 사이트 하나를 직접 만들어 볼 수 있을 것입니다. 또한 단지 새로운 기능을 설명하는 데 그치지 않고 관련 기술에 대한 배경지식도 꼼꼼히 짚어줌으로써 독자의 이해를 한층 더 돕고 있습니다.

  • 01장 HTML5와 CSS3 소개
    • HTML5란?
    • HTML5가 걸어온 길
      • 진정한 HTML5 규격이 정해질 수 있을까?
    • 왜 HTML5에 관심을 가져야 할까?
    • CSS3란?
    • 왜 CSS3에 관심을 가져야 할까?
    • ‘실전’이란 무엇을 의미하는가?
      • 다양한 브라우저 시장
      • 성장하는 모바일 시장
    • 실전 내용으로 들어가면서
    •  
  • 02장 마크업, HTML5 스타일
    • HTML5 헤럴드 소개
    • 기본 HTML5 템플릿
      • 독타입
      • html 요소
      • head 요소
      • 대등한 상황으로 만들기
      • 나머지는 알고 있는 그대로다
    • HTML5 FAQ
      • 왜 이러한 변경사항이 이전 브라우저에서도 여전히 작동하는 걸까?
      • 모든 태그를 닫지 말아야 할까?
      • 다른 XHTML 기반 문법 규칙은 어떨까?
    • 페이지의 구조 정의
      • header 요소
      • section 요소
      • article 요소
      • nav 요소
      • aside 요소
      • footer 요소
    • HTML5 헤럴드 구조화
    • 정리
    •  
  • 03장 HTML5의 의미적 표현 더 알아보기
    • 콘텐츠 타입의 새로운 측면
    • 문서의 개요
    • 뉴스 속보
      • hgroup 요소
    • 새로운 요소 더 알아보기
      • figure와 figcaption 요소
      • mark 요소
      • progress와 meter 요소
      • time 요소
    • 기존 기능의 변화
      • ‘폐기된‘이라는 용어는 폐기됐다
      • Link 내의 블록 요소
      • 굵은 글씨체
      • 이탤릭체
      • 큰 글씨와 작은 글씨
      • 기다려왔던 cite 요소
      • (정의가 아닌) 설명 목록
    • 다른 새로운 요소와 기능
      • details 요소
      • 맞춤형 순서 있는 목록
      • 범위가 지정된 스타일
      • 스크립트를 위한 async 속성
    • HTML5 문서의 유효성 검사
    • 요약
    •  
  • 04장 HTML5 폼
    • 툴박스의 믿을 만한 도구들
    • HTML5 폼 속성
      • required 속성
      • placeholder 속성
      • pattern 속성
      • disabled 속성
      • readonly 속성
      • multiple 속성
      • form 속성
      • autocomplete 속성
      • datalist 요소와 list 속성
      • autofocus 속성
    • HTML5의 새로운 폼 입력 타입
      • Search
      • 이메일 주소
      • URL
      • 전화번호
      • 숫자
      • 범위
      • 색상
    • 날짜와 시간
    • HTML5에서의 다른 새로운 폼 컨트롤
      • output 요소
      • keygen 요소
    • 기존 폼 컨트롤과 속성의 변화
      • form 요소
      • optgroup 요소
      • textarea 요소
    • 결론
    •  
  • 05장 HTML5 오디오와 비디오
    • 탄생 배경
    • 기능 지원의 현재 상태
      • 비디오 컨테이너 포맷
      • 비디오 코덱
      • 오디오 코덱
      • 현재 브라우저에서는 어떤 조합이 작동할까?
    • 마크업
      • 내장 컨트롤 사용
      • autoplay 속성
      • loop 속성
      • preload 속성
      • poster 속성
      • audio 속성
      • 다중 비디오 포맷 지원
      • source 순서
      • 인터넷 익스플로러 6~8은 어떻게 될까?
      • MIME 타입
    • 웹용 비디오 파일 인코딩
    • 맞춤 컨트롤 생성
      • 첫 시작을 위한 몇 가지 마크업과 스타일
      • 미디어 요소 API 소개
      • 비디오의 재생과 중지
      • 비디오의 오디오 트랙에 대한 음소거 및 음소거 해제
      • 비디오 재생이 끝났을 때의 반응
      • 비디오 재생에 따른 시간 업데이트
      • 미디어 요소 API의 추가적인 기능
    • 오디오는 어떤가?
    • 접근 가능한 미디어
    • 쇼타임
    •  
  • 06장 CSS3 소개
    • 이전 브라우저 지원하기
    • CSS3 선택자
      • 관계형 선택자
      • 속성 선택자
      • 가상 클래스(Pseudo-classes)
      • 구조적 가상 클래스
      • 가상 요소와 생성된 콘텐츠
    • CSS3 색
      • RGBA
      • HSL과 HSLA
      • 불투명도
    • 실전 적용
    • 둥근 모서리: border-radius
    • 그림자 효과
      • Inset과 여러 개의 그림자 효과
    • 텍스트 그림자 효과
    • 더 많은 그림자 효과
    • 다음으로
    •  
  • 07장 CSS3 그라디언트와 다중 배경
    • 선형 그라디언트
      • W3C 문법
      • 이전의 웹킷 문법
      • 종합 예제
      • SVG를 이용한 선형 그라디언트
      • IE 필터를 이용한 선형 그라디언트
      • 이용 가능한 도구
    • 방사형 그라디언트
      • W3C 문법
      • 이전의 웹킷 문법
      • 모든 내용을 통합하면
    • 반복 그라디언트
    • 다중 배경 이미지
    • 배경 크기
    • 배경으로
    •  
  • 08장 CSS3 변형과 전환
    • 변형(Transform)
      • 이동(Translation)
      • 크기변환
      • 회전
      • 비틀기
      • 변형의 원점 변경
      • 인터넷 익스플로러 8과 그 이전 버전을 위한 지원
    • 전환(Transition)
      • transition-property
      • transition-duration
      • transition-timing-function
      • transition-delay
      • transition 약칭표기 속성
      • 다중 전환
    • 애니메이션
      • 키 프레임
      • 애니메이션 속성
    • 넘어가면서
    •  
  • 09장 웹 폰트와 다단 레이아웃
    • @font-face를 이용한 웹 폰트
      • @font-face 구현
      • 폰트 소스 선언
      • 폰트 속성 기술자
      • 유니코드 범위
      • 폰트 적용
      • 법적 고려 사항
      • 다양한 폰트 파일 생성: 폰트 스쿼럴
      • 다른 고려 사항
    • CSS3 다단 레이아웃
      • column-count 속성
      • column-gap 속성
      • column-width 속성
      • columns 약칭표기 속성
      • 단과 height 속성
      • 그 밖의 단 기능
      • 다른 고려 사항
      • 점진적 향상
    • 미디어 쿼리
      • 미디어 쿼리란?
      • 문법
      • 미디어 쿼리의 유연성
      • 브라우저 지원
      • 추가 참고 자료
    • 스타일리시하게 살기
    •  
  • 10장 위치 정보, 오프라인 웹 앱, 그리고 웹 스토리지
    • 위치 정보
      • 프라이버시에 대한 배려
      • 위치 정보 메서드
      • Modernizr를 이용한 지원 여부 확인
      • 현재 위치 조회
      • 위치 정보의 Position Object
      • 위도와 경도 얻기
      • 지도 불러오기
      • 이전의 모바일 기기에 대한 마지막 한마디
    • 오프라인 웹 애플리케이션
      • 작동 방법: HTML5 애플리케이션 캐시
      • 오프라인에서 작동하도록 사이트 설정하기
      • 사이트를 오프라인으로 저장하기 위한 허가 얻기
      • 오프라인 테스트
      • 오프라인에서도 이용 가능한 HTML5 헤럴드 만들기
      • 오프라인 웹 애플리케이션 저장 공간의 제약
      • Fallback 섹션
      • 캐시 리프레싱
      • 지금 온라인 상태일까?
      • 추가 참고 자료
    • 웹 스토리지
      • 두 종류의 웹 스토리지
      • 웹 스토리지 데이터의 모습
      • 데이터 저장하기와 읽기
      • 저장 데이터 변환
      • 좀 더 간단한 사용법
      • 특정 항목 제거와 전체 데이터 지우기
      • 스토리지 제한
      • 보안 고려사항
      • HTML5 헤럴드에 웹 스토리지 추가
      • 웹 인스펙터를 이용한 웹 스토리지 값 열람
    • 추가적인 HTML5 API
      • 웹 워커
      • 웹 소켓
      • Web SQL과 IndexedDB
    • 그림 그리기로 되돌아가 보자
    •  
  • 11장 캔버스, SVG와 드래그 앤 드롭
    • 캔버스
      • 캔버스의 역사
      • canvas 요소 생성
      • 캔버스에 그리기
      • 컨텍스트 얻기
      • 브러시에 색 입히기
      • 캔버스에 사각형 그리기
      • 캔버스 좌표 시스템
      • fillStyle의 변형
      • Path를 이용해 다른 모양 그리기
      • 캔버스 그림 저장하기
      • 이미지를 캔버스에 그리기
      • 이미지 조작하기
      • 컬러에서 흑백으로 이미지 변환하기
      • getImageData에서의 보안 오류
      • 캔버스로 비디오 조작하기
      • 캔버스에 텍스트 표시하기
      • 접근성에 대한 우려
      • 추가 참고 자료 목록
    • SVG
      • SVG에서 그리기
      • SVG 이미지 생성을 위한 잉크스케이프 활용
      • SVG 필터
      • 라파엘 라이브러리 활용
      • 캔버스 vs. SVG
    • 드래그 앤 드롭
      • WAI-ARIA 고양이에게 먹이주기
      • 드래그 가능한 요소 만들기
      • DataTransfer 객체
      • 드롭된 요소 받기
      • 참고 자료
    • 여기까지입니다!
    •  
  • 부록A Modernizr
    • CSS에서 Modernizr 이용하기
    • 자바스크립트에서 Modernizr 이용하기
    • 인터넷 익스플로러 8과 그 이전 버전에서의 HTML5 요소에 대한 스타일 적용 지원
    • 추가 참고 자료
    •  
  • 부록B WAI-ARIA
    • WAI-ARIA가 어떻게 의미적 표현을 보완하는가
    • WAI-ARIA의 현재 상태
    • 추가 참고 자료 목록
    •  
  • 부록C 마이크로데이터
    • HTML5의 의미적 표현은 충분하지 않은가?
    • 마이크로데이터 문법
    • 이름-값 쌍 이해하기
    • 마이크로데이터 네임스페이스
    • 추가 참고 자료

예제코드 관련 GitHub 페이지

도서 소개자료

관련 글