청구할인 안내(인터파크 제휴카드) | 안내
삼성카드 5% (3만원 이상 결제/최대 1만원 할인)
북피니언 롯데카드 30% (최대할인 3만원 / 3만원 이상 결제)
하나SK 북&카드 30% (최대할인 3만원 / 3만원 이상 결제)
EBS 롯데카드 20% (최대할인 3만원 / 3만원 이상 결제)
인터파크 NEW 우리V카드 10% (최대할인 3만원 / 3만원 이상 결제)
인터파크 현대카드 7% (최대할인 3만원 / 3만원 이상 결제)
Close

2013년 9월 9일 이후 누적수치입니다.

웹킷이 주도하는 미래형 웹 개발 : HTML5+CSS3 반응형 웹 표준 앱의 필수 기술 WebKit

판매지수 17
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
정가

35,000원

  • 31,500 (10%할인)

    1,750P (5%적립)

  • (3건)

    25,000원 ~(29%할인)

    [특급]

  • 중고판매

    이 책을 인터파크에
    판매하세요

  • 이벤트/기획전

  • 연관도서(52)

  • 사은품(1)

출판사 서평

HTML5+CSS3 반응형 웹 표준 사이트를 만들고 검증하는 가장 손쉬운 방법!
구글 크롬, 애플 사파리가 선택한 오픈소스 웹브라우저 렌더링 엔진, 웹킷 가이드


웹킷을 알면 웹의 미래가 보인다. 구글 크롬과 애플 사파리의 핵심 기술이자 사실상 표준인 가장 강력한 웹브라우저 렌더링 엔진인 오픈소스 프로젝트 웹킷(WebKit)에 관한 국내 최초 개론서. 웹킷이 무엇이며, 어떻게 활용되는지를 살펴보고, HTML5와 CSS3로 만드는 반응형 웹 표준 사이트를 만들고 검증하는 방법을 배운다. 또한 캔버스와 SVG의 개념, iOS와 안드로이드용 모바일 웹앱을 만드는 방법도 익힐 수 있다. 웹표준과 반응형 웹 사이트를 만들어야 하는 웹 개발자와 디자이너는 물론이고 웹사이트와 브라우저 품질을 검증하고 테스트하는 담당자까지, 미래형 웹을 지향하는 일을 하는 이라면 모두 읽어야 한다. 웹킷과 웹킷 기반 브라우저의 기능, 웹표준 사이트 제작과 검증 방법, 그리고 웹의 미래까지를 꿰뚫는 책이다.

이 책에서 다루는 내용

- 외부 이미지 대신 CSS3 속성을 이용한 스타일링 옵션 확장
- 마크업에 클래스와 아이디의 필요성을 줄이는 고급 CSS3 선택자 사용
- 비디오와 오디오 태그 마크업을 이용한 미디어 임베드
- 캔버스와 SVG로 만드는 놀라운 2D와 3D 그래픽 작업
- 풍부한 웹 폼 생성을 위한 HTML5 폼 요소 사용법
- iOS와 안드로이드 앱의 룩앤필을 흉내 낼 수 있는 웹 앱 만들기
- 가속도계와 지오로케이션 지원 같은 모바일 디바이스 하드웨어 기능 활용
- 브라우저 간 호환성 문제의 쉽고 빠른 해결법
- 웹킷의 최적화 기술을 통한 성능 개선

이 책의 구성

1부: 웹킷의 기초
1부에서는 엔진이 어떻게 발전했는지뿐만 아니라 어떤 플랫폼과 디바이스에서 웹킷을 사용하는지를 살펴보고, 웹킷의 간단한 역사부터 설명한다. 그리고 웹킷 개발에 필요한 다양한 브라우저와 모바일 디바이스 에뮬레이터 설치 등 컴퓨터 환경 설정 방법도 배운다. 각각 이런 환경 안에서 자바스크립트 버그를 해결하고 찾아내기 위한 툴 사용법도 설명한다. 실시간 스타일링 옵션을 테스트하고, 웹 사이트의 성능을 확인한다. 마지막으로 인터넷 익스플로러와 파이어폭스처럼 비 웹킷 브라우저용 테스트 환경을 설정하는 방법에 대해서도 살펴본다.

2부: 웹킷에서 지원하는 CSS3
2부에서는 스타일 능력을 확장하고 외부 이미지에 대한 의존성을 줄이기 위해 다양한 CSS3 프로퍼티를 사용하는 법을 알아본다. 웹킷은 현대 브라우저에서 다양한 CSS3 프로퍼티를 지원하도록 혁신했고, 다양한 실험적인 스타일 옵션을 꾸준히 개발하고 있다.
고급 CSS3 선택자가 마크업에서 id와 클래스가 필요한 상황을 줄이고 어떻게 요소를 더 잘 선택하게 하는지도 알아본다. 마지막으로 필요한 곳에서 어떻게 네이티브 지원을 사용할 수 있는지, 그리고 구 버전 브라우저용으로 대안을 사용하는 법을 포함, CSS3 프로퍼티와 선택자를 지원하는 브라우저 간 호환성에 대해 배운다.

3부: 웹킷에서 지원하는 HTML5
3부에서는 다양한 HTML5 기능을 배운다. 먼저 오디오와 비디오 태그를 이용해서 브라우저에 직접 미디어를 임베드하는 방법을 알아본다. 쉽게 사용할 수 있고, 더 많은 상호 작용을 하는 풍부한 웹 폼을 만들기 위해 HTML5 form 요소를 사용하는 방법을 배운다.
마지막으로 HTML5 canvas와 SVG를 써서 복잡한 모양을 그리는 방법도 알아본다. 이런 고급 요소를 통해 2D와 3D 장면을 그리고, 플래시처럼 멋진 애플리케이션을 만들 수 있다.

4부: 모바일 웹킷
4부에서는 다양한 안드로이드폰과 태블릿, 아이폰, 아이패드용 웹 앱을 개발하는 다양한 기술을 논의하는 웹킷의 모바일 버전에 대해 설명한다. 가속도계와 터치 스크린, 지리 정보 같은 디바이스의 독특한 기능을 활용하는 방법에 대해서도 알려준다.
또한 어떻게 네이티브 iOS와 안드로이드 앱의 UI를 흉내 내는지 설명한다. 센차 터치 같은 자바스트립트로 인터넷에 연결하지 않고도 웹 앱이 오프라인으로 접속될 수 있는지에 대해서도 살펴본다. 마지막으로 폰갭 프레임워크와 이미 잘 알고 있는 HTML, CSS, 자바스크립트를 써서 완벽한 기능을 하는 네이티브 앱을 만드는 방법을 배운다.

5부: 웹킷 파고들기
1~4부와 마찬가지로 중요한 5부에서는 속도 향상을 다룬다. 최적화뿐만 아니라 모든 브라우저에서 성능을 개선할 수 있는 일반적인 방식의 좋은 예제를 검토한다. 또한 웹킷이 페이지를 그리는 방법에서 가질 수 있는 장점을 사용해 웹킷에 특화된 최적화 기술을 배운다.
마지막으로 웹과 웹킷의 미래와 전망을 살펴보고, 웹킷 코어에 패치와 버그 리포트를 올림으로써 웹킷 프로젝트에 기여를 할 수 있는 방법도 알아본다.

목차

1부. 웹킷의 기초

1장 웹킷이란?

웹킷의 역사
웹킷은 어디에 쓰이는가?
웹 브라우저
모바일 디바이스
리치 인터넷 애플리케이션
여러 종류의 디바이스
웹킷이 제공하는 것은 무엇인가?
CSS3
HTML5와 SVG
웹킷을 사용했더라도 기능이 모두 같진 않다
다양한 버전의 웹킷 사용
코어 수정
요약

2장 웹킷 개발 시작하기
테스팅 환경 설정
테스트하는 방법
맥이나 PC냐
크롬과 사파리 환경
구 버전의 브라우저 테스트
크롬과 사파리 문제 디버깅
iOS와 안드로이드 환경
에뮬레이터 선택
iOS 시뮬레이터
안드로이드 에뮬레이터
iOS와 안드로이드 문제 디버깅
웹킷 브라우저 그 이상
파이어폭스
인터넷 익스플로러
오페라
다른 모바일 브라우저
결론

2부. 웹킷에서 지원하는 CSS3

3장 CSS3의 고급 스타일링

CSS3를 사용해 이미지 없이 그래픽 그리기
기본 설정
둥근 모서리
그라디언트
활자체
텍스트와 박스 섀도우
RGBa 투명도
CSS3 애니메이션
전환하기
키프레임의 사용
CSS3 변형
2D 변형
3D 변형
다른 CSS3 프로퍼티
테두리 이미지
마스크
글자 테두리
사각형 반사
웹킷의 움직이는 텍스트
배경 클립
데이터 URI
요약

4장 CSS3의 개선된 선택자 기능
CSS3 선택자와 유사 클래스
선택자 속성
구조적인 선택자
구조적인 유사 클래스
다른 유사 클래스
유사 요소에 기반을 둔 텍스트와 콘텐츠
미디어 쿼리
미디어 쿼리의 사용
미디어 쿼리를 이용해 유연한 레이아웃 만들기
특정 디바이스 감지
요약

5장 CSS3로 다중 브라우저 지원
모든 브라우저에서 동작하는 기본 CSS3 스타일
크로스브라우저에서의 둥근 모서리
크로스브라우저에서의 그라디언트
크로스 브라우저의 폰트 페이스
크로스 브라우저의 텍스트와 박스 섀도우
크로스 브라우저의 RGBa 투명도
크로스 브라우저에서의 테두리 이미지
크로스 브라우저의 배경 클립
크로스 브라우저의 데이터 URI
모든 브라우저에서의 CSS3 애니메이션
전환을 지원하지 않는 브라우저에서의 전환
지원하지 않는 브라우저에서 키프레임 애니메이션
모든 브라우저에서의 CSS3 변형
IE 구 버전에서의 변형 지원
크로스 브라우저의 3D 변형 지원
크로스 브라우저의 CSS3 선택자와 유사 클래스 지원
크로스 브라우저의 선택자 지원
크로스 브라우저의 유사 클래스와 유사 요소 지원
CSS3 선택자 지원을 위한 제이쿼리
크로스 브라우저의 미디어 쿼리 지원
모더나이저를 사용한 기능 감지
요약

3부. 웹킷에서의 HTML5 지원

6장 HTML5 미디어 태그

왜 HTML5를 사용하는가?
HTML5 VIDEO
HTML5 비디오 옵션
HTML5 비디오 포맷
다른 포맷 인코딩
HTML5 비디오 인코딩 테스트
HTML5 오디오
HTML5 오디오 포맷
HTML5 오디오 인코딩
HTML5 미디어 태그와 자바스크립트의 상호 작용
기본 자바스크립트 명령어
HTML5 미디어 태그 대안으로 플래시 사용
대안용 플래시 추가
플래시 파일 생성
요약

7장 캔버스 요소
캔버스의 기본
기본적인 모양 그리기
복잡한 모양 그리기
캔버스 꾸미기
이미지 사용하기
채우기와 획 스타일
선 스타일
그림자
텍스트의 사용
변형
위치 이동
회전
크기 변경
변형
캔버스 상태의 저장과 복구
다양한 상태의 저장과 복구
구성하기와 범위 자르기
구성하기
범위 자르기
반응형 캔버스
기본적인 애니메이션
마우스의 상호 작용
물리학 라이브러리 사용하기
3D 캔버스
웹지엘과 오픈지엘
3D 캔버스 라이브러리
캔버스의 영감
게임
오디오/비디오
그리기와 만드는 툴
수학/물리학
시각 효과
더 많은 캔버스 영감
요약

8장 HTML5 폼
특별 입력 형식
숫자
슬라이더
색과 날짜 선택기
상황에 따른 키보드
검색 박스
상호 작용 기능
플레이스홀더 텍스트
오토포커스
폼 검사
크로스 브라우저 지원
특별한 입력 형식의 크로스 브라우저 지원
상호 작용 기능용 크로스 브라우저 지원
요약

9장 확장가능한 벡터 그래픽 SVG
SVG를 사용할 때의 장점
벡터화된 이미지 형식
완전한 상호 작용
검색 엔진 최적화(SEO, Search Engine Optimization)
파일 크기
자동으로 SVG 생성하기
SVG 파일 생성하기
SVG 라이브러리
SVG 이미지 손으로 직접 작성하기
SVG 마크업 포함하기
선과 모양 그리기
텍스트와 링크, 이미지 추가하기
그라디언트 추가하기
HTML 속성 대신에 CSS 사용하기
자바스크립트 상호 작용
요약

4부. 모바일 웹킷

10장 iOS와 안드로이드로 개발하기

뷰포트와 회전 방향
뷰포트의 조정
미디어 쿼리를 이용한 CSS 조정
자바스크립트를 통한 뷰포트와 방향, 해상도 액세스
모바일 감지하기
유저 에이전트 확인
미디어 쿼리
자바스크립트를 이용한 감지
감지하지 않기
모바일용 스타일링
실제 화면 영역의 최대화
파일 크기의 감소
여러 가지 변경
디바이스 기능의 접근
터치 이벤트
위치 정보
자이로스코프와 가속도계
전화 걸기
문자 메시지
상황에 따른 키보드
자동 수정 기능의 비활성화
미디어 캡처
IOS를 위한 특별히 고려해야 할 점
플래시 대신 HTML5 이용하기
그 밖의 고려사항
요약

11장 웹 앱 만들기
웹 앱과 네이티브 앱 비교
웹 앱의 장점
네이티브 앱의 장점
북마크 아이콘의 생성
북마크와 다운로드 비교
맞춤형 아이콘의 생성
북마크 스크립트
전체 화면 모드
전체 화면 모드의 활성화
브라우저 바 숨기기
자바스크립트 라이브러리 선택
센차 터치
제이쿼리 모바일
jQTOUCH
Zepto.js
CSS3를 사용한 iOS UI의 렌더링
iOS 스타일링의 재현
iOS UI 기능의 재현
CSS3를 이용한 안드로이드 UI의 랜더링
오프라인의 진입
앱이 오프라인인지 확인하기
HTML5 캐시 매니페스트
로컬 스토리지
오프라인 SQL 데이터베이스
폰갭을 사용한 네이티브 앱 개발
폰갭의 장점
폰갭의 단점
폰갭 시작하기
폰갭 사용하기
폰갭 API
요약

5부. 웹킷 파고들기

12장 웹킷의 성능

최적화 방법
균형감 유지하기
프로파일링 툴
인지 성능 대 실제 성능
애니메이션의 최적화
CSS 애니메이션의 이용
리플로우 피하기
하드웨어 가속
자바스크립트의 최적화
자바스크립트의 로딩
순환문
스코프 체인
돔의 조작
CSS의 최적화
더 빠른 선택자
피해야 하는 프로퍼티
이미지 최적화
웹용 이미지 저장
웹피
쿠키 없는 도메인 사용
웹 소켓
웹 소켓의 장점
브라우저에서 지원
웹 소켓을 사용하는 방법
요약

13장 웹킷의 미래
웹킷 나이틀리 버전
웹킷을 지원하는 방법
오류 리포트 작성
웹킷 코어에 기여하기
문서 작성
웹킷의 나아갈 방향은 어디인가?
개발 중인 기능
일반적인 개선 사항
웹킷의 미래

저자소개

생년월일 -
출생지 -
출간도서 0종
판매수 0권

15년간 웹 프로그래밍에 몸담아 왔으며 HTML4와 CSS3, 자바스크립트에 능숙한 프론트엔드 웹 개발자이자 UX 디자이너다. Smashingmagazine.com에 정기적으로 기고하며, http://jonraasch.com에 개인 블로그를 운영한다.
존 라쉬는 14살에 처음으로 지오시티(GeoCities)에 웹 사이트를 만들어 올렸다. 물론 당시에는 형편없는 수준이었지만, 지금은 아주 멋진 웹 사이트와 최신 기술을 사용하는 웹 기반 애플리케이션을 만들고 있다. 웹 표준과 프론트엔드 성능, UX 디자인에 열정을 갖고 활동 중이다.
예전에는 포틀랜드에 살았지만 이제는 원격으로 일하면서 세계를 여

펼쳐보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

현재 현대엠엔소프트에 근무하고 있다. 이전에는 오비고에서 9년간 모바일 브라우저 개발을 담당했고, QA 팀장으로 근무하면서 웹킷 브라우저 검증과 웹 표준인 HTML5, CSS3를 분석하고, 관련 테스트 케이스를 작성했다.

이 상품의 시리즈

에이콘 웹 프로페셔널 시리즈(총 69권 / 현재구매 가능도서 53권)

펼쳐보기

리뷰

0.0 (총 0건)

기대평

작성시 유의사항

평점
0/200자
등록하기

기대평

0.0

교환/환불

교환/환불 방법

‘마이페이지 > 취소/반품/교환/환불’ 에서 신청함, 1:1 문의 게시판 또는 고객센터(1577-2555) 이용 가능

교환/환불 가능 기간

고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

교환/환불 비용

고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

교환/환불 불가사유

반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

소비자 피해보상

소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

기타

도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

배송안내

  • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

  • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

  • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

  • 배송비

도서(중고도서 포함) 구매

2,000원 (1만원이상 구매 시 무료배송)

음반/DVD/잡지/만화 구매

2,000원 (2만원이상 구매 시 무료배송)

도서와 음반/DVD/잡지/만화/
중고직배송상품을 함께 구매

2,000원 (1만원이상 구매 시 무료배송)

업체직접배송상품 구매

업체별 상이한 배송비 적용